Add button to toggle dark mode

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",

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 />

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')}
 			/>

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;
+}

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"