Start doing a dark mode myself

darkreader is pretty big, and this is nice, simple and fast.

Not to mention has much less JS
This commit is contained in:
Jake Howard 2022-08-16 22:51:03 +01:00
parent 8952f7eae5
commit 37cc1979be
Signed by: jake
GPG key ID: 57AFB45680EDD477
8 changed files with 37 additions and 29 deletions

15
package-lock.json generated
View file

@ -10,7 +10,6 @@
"dependencies": { "dependencies": {
"@fortawesome/fontawesome-free": "^6.1.1", "@fortawesome/fontawesome-free": "^6.1.1",
"bulma": "^0.9.4", "bulma": "^0.9.4",
"darkreader": "^4.9.51",
"elevator.js": "^1.0.1", "elevator.js": "^1.0.1",
"esbuild": "^0.14.43", "esbuild": "^0.14.43",
"firacode": "^6.2.0", "firacode": "^6.2.0",
@ -535,15 +534,6 @@
"node": ">=4" "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": { "node_modules/debug": {
"version": "4.3.4", "version": "4.3.4",
"resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz", "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
@ -4241,11 +4231,6 @@
"integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==", "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==",
"dev": true "dev": true
}, },
"darkreader": {
"version": "4.9.51",
"resolved": "https://registry.npmjs.org/darkreader/-/darkreader-4.9.51.tgz",
"integrity": "sha512-GdvcCv8w6SEr7m9m8qEm7u55i5xPsfOahjRHPH33gTbG6KvJl/WXTK93MyVJRHRGtrgyapvrnC5fm2gYNbHQFQ=="
},
"debug": { "debug": {
"version": "4.3.4", "version": "4.3.4",
"resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz", "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",

View file

@ -29,7 +29,6 @@
"dependencies": { "dependencies": {
"@fortawesome/fontawesome-free": "^6.1.1", "@fortawesome/fontawesome-free": "^6.1.1",
"bulma": "^0.9.4", "bulma": "^0.9.4",
"darkreader": "^4.9.51",
"elevator.js": "^1.0.1", "elevator.js": "^1.0.1",
"esbuild": "^0.14.43", "esbuild": "^0.14.43",
"firacode": "^6.2.0", "firacode": "^6.2.0",

18
static/src/js/darkmode.js Normal file
View file

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

View file

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

View file

@ -1,4 +1,9 @@
footer.footer { footer.footer {
margin-top: auto; margin-top: auto;
padding: 1rem; padding: 1rem;
@include dark-mode {
background-color: $dark;
color: $grey-light;
}
} }

View file

@ -0,0 +1,5 @@
@mixin dark-mode {
body.dark-mode & {
@content;
}
}

View file

@ -2,6 +2,7 @@
@use "sass:color"; @use "sass:color";
@use "bulma_overrides" as *; @use "bulma_overrides" as *;
@use "mixins" as *;
@import "bulma/bulma"; @import "bulma/bulma";
@ -29,4 +30,10 @@ main {
a { a {
transition: color 0.25s, background-color 0.25s; transition: color 0.25s, background-color 0.25s;
@include dark-mode {
&:hover {
color: $grey-lighter;
}
}
} }

View file

@ -41,9 +41,8 @@
<script async defer type="text/javascript" src="{% static 'js/base.js' %}"></script> <script async defer type="text/javascript" src="{% static 'js/base.js' %}"></script>
<script async defer type="text/javascript" src="{% static 'contrib/htmx/htmx.min.js' %}"></script> <script async defer type="text/javascript" src="{% static 'contrib/htmx/htmx.min.js' %}"></script>
{% block darkmode %} {# Not async to avoid bright flashes #}
<script type="text/javascript" src="{% static 'js/darkreader.js' %}"></script> <script type="text/javascript" src="{% static 'js/darkmode.js' %}"></script>
{% endblock %}
{% block extra_js %}{% endblock %} {% block extra_js %}{% endblock %}