repos/website
1
Fork 0
Code Issues 1 Pull requests 27 Activity

Start doing a dark mode myself

Browse source 
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
Show stats Download patch file Download diff file Expand all files Collapse all files

15
package-lock.json generated
View file

@ -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",

1
package.json
View file

@ -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",

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

10
static/src/js/darkreader.js
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);

5
static/src/scss/_footer.scss
View file

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

5
static/src/scss/_mixins.scss Normal file
View file

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

7
static/src/scss/base.scss
View file

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

5
website/common/templates/base.html
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 'contrib/htmx/htmx.min.js' %}"></script>
{% block darkmode %}
<script type="text/javascript" src="{% static 'js/darkreader.js' %}"></script>
{% endblock %}
{# Not async to avoid bright flashes #}
<script type="text/javascript" src="{% static 'js/darkmode.js' %}"></script>
{% block extra_js %}{% endblock %}