Swap darkmode-js for darkreader

darkreader is more customizable, and doesn't do weird things to images. Being able to use CSS-native animations is also much simpler
This commit is contained in:
Jake Howard 2022-06-19 15:53:44 +01:00
parent 8e1426c8ea
commit 00e1d28f4e
Signed by: jake
GPG key ID: 57AFB45680EDD477
6 changed files with 25 additions and 41 deletions

22
package-lock.json generated
View file

@ -10,7 +10,7 @@
"dependencies": { "dependencies": {
"@fortawesome/fontawesome-free": "^6.1.1", "@fortawesome/fontawesome-free": "^6.1.1",
"bulma": "^0.9.4", "bulma": "^0.9.4",
"darkmode-js": "^1.5.7" "darkreader": "^4.9.51"
}, },
"devDependencies": { "devDependencies": {
"esbuild": "^0.14.43", "esbuild": "^0.14.43",
@ -186,10 +186,14 @@
"node": ">=4.8" "node": ">=4.8"
} }
}, },
"node_modules/darkmode-js": { "node_modules/darkreader": {
"version": "1.5.7", "version": "4.9.51",
"resolved": "https://registry.npmjs.org/darkmode-js/-/darkmode-js-1.5.7.tgz", "resolved": "https://registry.npmjs.org/darkreader/-/darkreader-4.9.51.tgz",
"integrity": "sha512-gM1KhV/yy/84ZUpES9/oeOn0CVtuOi2HBd+Kccr4CJz+rFccQo2gUuPbjfyPXUx7t800Zf408G6kZb5rkTgjFA==" "integrity": "sha512-GdvcCv8w6SEr7m9m8qEm7u55i5xPsfOahjRHPH33gTbG6KvJl/WXTK93MyVJRHRGtrgyapvrnC5fm2gYNbHQFQ==",
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/darkreader/donate"
}
}, },
"node_modules/define-properties": { "node_modules/define-properties": {
"version": "1.1.4", "version": "1.1.4",
@ -1716,10 +1720,10 @@
"which": "^1.2.9" "which": "^1.2.9"
} }
}, },
"darkmode-js": { "darkreader": {
"version": "1.5.7", "version": "4.9.51",
"resolved": "https://registry.npmjs.org/darkmode-js/-/darkmode-js-1.5.7.tgz", "resolved": "https://registry.npmjs.org/darkreader/-/darkreader-4.9.51.tgz",
"integrity": "sha512-gM1KhV/yy/84ZUpES9/oeOn0CVtuOi2HBd+Kccr4CJz+rFccQo2gUuPbjfyPXUx7t800Zf408G6kZb5rkTgjFA==" "integrity": "sha512-GdvcCv8w6SEr7m9m8qEm7u55i5xPsfOahjRHPH33gTbG6KvJl/WXTK93MyVJRHRGtrgyapvrnC5fm2gYNbHQFQ=="
}, },
"define-properties": { "define-properties": {
"version": "1.1.4", "version": "1.1.4",

View file

@ -22,6 +22,6 @@
"dependencies": { "dependencies": {
"@fortawesome/fontawesome-free": "^6.1.1", "@fortawesome/fontawesome-free": "^6.1.1",
"bulma": "^0.9.4", "bulma": "^0.9.4",
"darkmode-js": "^1.5.7" "darkreader": "^4.9.51"
} }
} }

View file

@ -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();
}
});

View file

@ -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);

View file

@ -16,8 +16,3 @@ body {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
.darkmode-layer,
.darkmode-toggle {
z-index: $navbar-z - 1;
}

View file

@ -41,7 +41,7 @@
<script async defer type="text/javascript" src="{% static 'js/base.js' %}"></script> <script async defer type="text/javascript" src="{% static 'js/base.js' %}"></script>
{% block darkmode %} {% block darkmode %}
<script async defer type="text/javascript" src="{% static 'js/darkmode.js' %}"></script> <script type="text/javascript" src="{% static 'js/darkreader.js' %}"></script>
{% endblock %} {% endblock %}
{% block extra_js %}{% endblock %} {% block extra_js %}{% endblock %}