diff --git a/package-lock.json b/package-lock.json
index e80d730..6651e64 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,7 +10,6 @@
"dependencies": {
"@fortawesome/fontawesome-free": "^6.1.1",
"bulma": "^0.9.4",
- "darkreader": "^4.9.51",
"elevator.js": "^1.0.1",
"esbuild": "^0.14.43",
"firacode": "^6.2.0",
@@ -535,15 +534,6 @@
"node": ">=4"
}
},
- "node_modules/darkreader": {
- "version": "4.9.51",
- "resolved": "https://registry.npmjs.org/darkreader/-/darkreader-4.9.51.tgz",
- "integrity": "sha512-GdvcCv8w6SEr7m9m8qEm7u55i5xPsfOahjRHPH33gTbG6KvJl/WXTK93MyVJRHRGtrgyapvrnC5fm2gYNbHQFQ==",
- "funding": {
- "type": "opencollective",
- "url": "https://opencollective.com/darkreader/donate"
- }
- },
"node_modules/debug": {
"version": "4.3.4",
"resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
@@ -4241,11 +4231,6 @@
"integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==",
"dev": true
},
- "darkreader": {
- "version": "4.9.51",
- "resolved": "https://registry.npmjs.org/darkreader/-/darkreader-4.9.51.tgz",
- "integrity": "sha512-GdvcCv8w6SEr7m9m8qEm7u55i5xPsfOahjRHPH33gTbG6KvJl/WXTK93MyVJRHRGtrgyapvrnC5fm2gYNbHQFQ=="
- },
"debug": {
"version": "4.3.4",
"resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
diff --git a/package.json b/package.json
index da7b6b6..c85753f 100644
--- a/package.json
+++ b/package.json
@@ -29,7 +29,6 @@
"dependencies": {
"@fortawesome/fontawesome-free": "^6.1.1",
"bulma": "^0.9.4",
- "darkreader": "^4.9.51",
"elevator.js": "^1.0.1",
"esbuild": "^0.14.43",
"firacode": "^6.2.0",
diff --git a/static/src/js/darkmode.js b/static/src/js/darkmode.js
new file mode 100644
index 0000000..5a7fdb9
--- /dev/null
+++ b/static/src/js/darkmode.js
@@ -0,0 +1,18 @@
+const DARK_MODE_CLASS = "dark-mode";
+const body = document.getElementsByTagName("body")[0];
+
+const matchesDarkMode = window.matchMedia("(prefers-color-scheme: dark)");
+
+function handleDarkMode(darkMode) {
+ if (darkMode) {
+ body.classList.add(DARK_MODE_CLASS);
+ } else {
+ body.classList.remove(DARK_MODE_CLASS);
+ }
+}
+
+matchesDarkMode.addEventListener("change", (event) =>
+ handleDarkMode(event.matches)
+);
+
+handleDarkMode(matchesDarkMode.matches);
diff --git a/static/src/js/darkreader.js b/static/src/js/darkreader.js
deleted file mode 100644
index 7706029..0000000
--- a/static/src/js/darkreader.js
+++ /dev/null
@@ -1,10 +0,0 @@
-const DarkReader = require("darkreader");
-
-const DARK_READER_OPTIONS = {};
-
-const DARK_READER_FIXES = {
- invert: [".wagtail-userbar-icon"],
-};
-
-// TODO: Add a UI toggle
-DarkReader.auto(DARK_READER_OPTIONS, DARK_READER_FIXES);
diff --git a/static/src/scss/_footer.scss b/static/src/scss/_footer.scss
index a6ec22d..ef9cc37 100644
--- a/static/src/scss/_footer.scss
+++ b/static/src/scss/_footer.scss
@@ -1,4 +1,9 @@
footer.footer {
margin-top: auto;
padding: 1rem;
+
+ @include dark-mode {
+ background-color: $dark;
+ color: $grey-light;
+ }
}
diff --git a/static/src/scss/_mixins.scss b/static/src/scss/_mixins.scss
new file mode 100644
index 0000000..bc51539
--- /dev/null
+++ b/static/src/scss/_mixins.scss
@@ -0,0 +1,5 @@
+@mixin dark-mode {
+ body.dark-mode & {
+ @content;
+ }
+}
diff --git a/static/src/scss/base.scss b/static/src/scss/base.scss
index 0aaa725..9f3da3f 100644
--- a/static/src/scss/base.scss
+++ b/static/src/scss/base.scss
@@ -2,6 +2,7 @@
@use "sass:color";
@use "bulma_overrides" as *;
+@use "mixins" as *;
@import "bulma/bulma";
@@ -29,4 +30,10 @@ main {
a {
transition: color 0.25s, background-color 0.25s;
+
+ @include dark-mode {
+ &:hover {
+ color: $grey-lighter;
+ }
+ }
}
diff --git a/website/common/templates/base.html b/website/common/templates/base.html
index e3201be..4bbc275 100644
--- a/website/common/templates/base.html
+++ b/website/common/templates/base.html
@@ -41,9 +41,8 @@
- {% block darkmode %}
-
- {% endblock %}
+ {# Not async to avoid bright flashes #}
+
{% block extra_js %}{% endblock %}