diff --git a/package-lock.json b/package-lock.json
index b4e47e3..3ce0636 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,7 +10,7 @@
"dependencies": {
"@fortawesome/fontawesome-free": "^6.1.1",
"bulma": "^0.9.4",
- "darkmode-js": "^1.5.7"
+ "darkreader": "^4.9.51"
},
"devDependencies": {
"esbuild": "^0.14.43",
@@ -186,10 +186,14 @@
"node": ">=4.8"
}
},
- "node_modules/darkmode-js": {
- "version": "1.5.7",
- "resolved": "https://registry.npmjs.org/darkmode-js/-/darkmode-js-1.5.7.tgz",
- "integrity": "sha512-gM1KhV/yy/84ZUpES9/oeOn0CVtuOi2HBd+Kccr4CJz+rFccQo2gUuPbjfyPXUx7t800Zf408G6kZb5rkTgjFA=="
+ "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/define-properties": {
"version": "1.1.4",
@@ -1716,10 +1720,10 @@
"which": "^1.2.9"
}
},
- "darkmode-js": {
- "version": "1.5.7",
- "resolved": "https://registry.npmjs.org/darkmode-js/-/darkmode-js-1.5.7.tgz",
- "integrity": "sha512-gM1KhV/yy/84ZUpES9/oeOn0CVtuOi2HBd+Kccr4CJz+rFccQo2gUuPbjfyPXUx7t800Zf408G6kZb5rkTgjFA=="
+ "darkreader": {
+ "version": "4.9.51",
+ "resolved": "https://registry.npmjs.org/darkreader/-/darkreader-4.9.51.tgz",
+ "integrity": "sha512-GdvcCv8w6SEr7m9m8qEm7u55i5xPsfOahjRHPH33gTbG6KvJl/WXTK93MyVJRHRGtrgyapvrnC5fm2gYNbHQFQ=="
},
"define-properties": {
"version": "1.1.4",
diff --git a/package.json b/package.json
index b60a4bc..a39500a 100644
--- a/package.json
+++ b/package.json
@@ -22,6 +22,6 @@
"dependencies": {
"@fortawesome/fontawesome-free": "^6.1.1",
"bulma": "^0.9.4",
- "darkmode-js": "^1.5.7"
+ "darkreader": "^4.9.51"
}
}
diff --git a/static/src/js/darkmode.js b/static/src/js/darkmode.js
deleted file mode 100644
index 47b0d36..0000000
--- a/static/src/js/darkmode.js
+++ /dev/null
@@ -1,25 +0,0 @@
-import Darkmode from "darkmode-js";
-
-const DARKMODE_OPTIONS = {
- left: "32px",
- right: "unset",
- time: "0.7s",
- saveInCookies: false,
- label: "🌓",
-};
-
-window.addEventListener("load", () => {
- const darkmode = new Darkmode(DARKMODE_OPTIONS);
- darkmode.showWidget();
- window.darkmodejs = darkmode;
-});
-
-// Also listen to native theme changes
-window
- .matchMedia("(prefers-color-scheme: dark)")
- .addEventListener("change", (e) => {
- if (e.matches !== window.darkmodejs.isActivated()) {
- // HACK: .toggle doesn't work quite right
- window.darkmodejs.button.click();
- }
- });
diff --git a/static/src/js/darkreader.js b/static/src/js/darkreader.js
new file mode 100644
index 0000000..635f793
--- /dev/null
+++ b/static/src/js/darkreader.js
@@ -0,0 +1,10 @@
+import * as DarkReader from "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/base.scss b/static/src/scss/base.scss
index a8e721c..c32d0e6 100644
--- a/static/src/scss/base.scss
+++ b/static/src/scss/base.scss
@@ -16,8 +16,3 @@ body {
display: flex;
flex-direction: column;
}
-
-.darkmode-layer,
-.darkmode-toggle {
- z-index: $navbar-z - 1;
-}
diff --git a/templates/base.html b/templates/base.html
index 6be69d4..e19a83d 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -41,7 +41,7 @@
{% block darkmode %}
-
+
{% endblock %}
{% block extra_js %}{% endblock %}