From e5ee4aba42fbb6b4f3dd2cd7d50b1d0d316748c3 Mon Sep 17 00:00:00 2001
From: Tanner Collin <git@tannercollin.com>
Date: Sun, 5 Apr 2020 22:00:33 +0000
Subject: [PATCH] Add button to toggle dark mode

---
 webclient/package.json  |  1 +
 webclient/src/App.js    | 12 ++++++++++++
 webclient/src/Paste.js  |  2 +-
 webclient/src/light.css |  8 ++++++++
 webclient/yarn.lock     |  5 +++++
 5 files changed, 27 insertions(+), 1 deletion(-)

diff --git a/webclient/package.json b/webclient/package.json
index 83e7c31..548f85a 100644
--- a/webclient/package.json
+++ b/webclient/package.json
@@ -6,6 +6,7 @@
 		"@testing-library/jest-dom": "^4.2.4",
 		"@testing-library/react": "^9.3.2",
 		"@testing-library/user-event": "^7.1.2",
+		"darkmode-js": "^1.5.5",
 		"moment": "^2.24.0",
 		"moment-timezone": "^0.5.28",
 		"react": "^16.12.0",
diff --git a/webclient/src/App.js b/webclient/src/App.js
index 4e1d15f..aebee7a 100644
--- a/webclient/src/App.js
+++ b/webclient/src/App.js
@@ -3,6 +3,7 @@ import { BrowserRouter as Router, Switch, Route, Link, useParams, useHistory } f
 import './semantic-ui/semantic.min.css';
 import './light.css';
 import { Container, Divider, Dropdown, Form, Grid, Header, Icon, Image, Menu, Message, Segment, Table } from 'semantic-ui-react';
+import Darkmode from 'darkmode-js';
 import { isAdmin, requester } from './utils.js';
 import { ManageScroll } from './ManageScroll.js';
 import { Home } from './Home.js';
@@ -72,6 +73,17 @@ function App() {
 		});
 	}, [history.location]);
 
+	useEffect(() => {
+		const options = {
+			bottom: '16px',
+			right: '16px',
+			buttonColorDark: '#333',
+			buttonColorLight: '#ddd',
+		}
+		const darkmode = new Darkmode(options);
+		darkmode.showWidget();
+	}, []);
+
 	return (
 		<div>
 			<ManageScroll />
diff --git a/webclient/src/Paste.js b/webclient/src/Paste.js
index a50cef7..f8ba118 100644
--- a/webclient/src/Paste.js
+++ b/webclient/src/Paste.js
@@ -40,7 +40,7 @@ function PasteForm(props) {
 	return (
 		<Form onSubmit={handleSubmit}>
 			<Form.TextArea
-				maxlength={20000}
+				maxLength={20000}
 				rows={20}
 				{...makeProps('paste')}
 			/>
diff --git a/webclient/src/light.css b/webclient/src/light.css
index ff771ad..379ec38 100644
--- a/webclient/src/light.css
+++ b/webclient/src/light.css
@@ -118,6 +118,10 @@ body {
 	width: 10rem;
 }
 
+.darkmode--activated .footer {
+	mix-blend-mode: difference;
+}
+
 .footer {
 	margin-top: -20rem;
 
@@ -154,3 +158,7 @@ body {
 	margin-left: -3.5px;
 	margin-right: 0.5em;
 }
+
+.darkmode-layer, .darkmode-toggle {
+	z-index: 500;
+}
diff --git a/webclient/yarn.lock b/webclient/yarn.lock
index cfb44c9..997506e 100644
--- a/webclient/yarn.lock
+++ b/webclient/yarn.lock
@@ -3275,6 +3275,11 @@ damerau-levenshtein@^1.0.4:
   resolved "https://registry.yarnpkg.com/damerau-levenshtein/-/damerau-levenshtein-1.0.5.tgz#780cf7144eb2e8dbd1c3bb83ae31100ccc31a414"
   integrity sha512-CBCRqFnpu715iPmw1KrdOrzRqbdFwQTwAWyyyYS42+iAgHCuXZ+/TdMgQkUENPomxEz9z1BEzuQU2Xw0kUuAgA==
 
+darkmode-js@^1.5.5:
+  version "1.5.5"
+  resolved "https://registry.yarnpkg.com/darkmode-js/-/darkmode-js-1.5.5.tgz#6e0180a5dc98038c4b96fbdcc482fb230966ff14"
+  integrity sha512-loXmLt2rJ2PYg7Z4lD8drIKG+LEk0ai7ay4JTV0bS5ZWpXmH7s9dShCu6tQ0mwWgETIn2yZ5BURK/fZoPXgZxQ==
+
 dashdash@^1.12.0:
   version "1.14.1"
   resolved "https://registry.yarnpkg.com/dashdash/-/dashdash-1.14.1.tgz#853cfa0f7cbe2fed5de20326b8dd581035f6e2f0"