Add button to toggle dark mode

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