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