From 3cada41922abb83b5a5541e4b5efd3fc1659c483 Mon Sep 17 00:00:00 2001 From: Martin Fischer Date: Mon, 4 Aug 2025 20:51:59 +0200 Subject: fix: enable dark theme via CSS --- README.md | 2 ++ assets/css/colors/default.css | 16 +++++++++------- layouts/_default/baseof.html | 1 - static/js/theme-switch.js | 28 ---------------------------- 4 files changed, 11 insertions(+), 36 deletions(-) delete mode 100644 static/js/theme-switch.js diff --git a/README.md b/README.md index 0c82882..bdaf2fa 100644 --- a/README.md +++ b/README.md @@ -2,6 +2,8 @@ Tastefejl is a fork of the [Typo] Hugo theme, with the following changes: +* Replaced the JavaScript theme switching code with a CSS media query. + * Removed [Simple Icons] because I don't want to plaster brands on my website and at one point a 50MB .html file was committed (I filtered the git history to reduce the size of the repository.) diff --git a/assets/css/colors/default.css b/assets/css/colors/default.css index ad820ec..08db276 100644 --- a/assets/css/colors/default.css +++ b/assets/css/colors/default.css @@ -6,10 +6,12 @@ --code-border: rgb(229, 229, 229); } -.dark { - --content-primary: rgb(218, 218, 218); - --content-secondary: rgb(140, 140, 140); - --background: rgb(20, 20, 20); - --code-background: rgb(30, 30, 30); - --code-border: rgb(50, 50, 50); -} \ No newline at end of file +@media (prefers-color-scheme: dark) { + :root { + --content-primary: rgb(218, 218, 218); + --content-secondary: rgb(140, 140, 140); + --background: rgb(20, 20, 20); + --code-background: rgb(30, 30, 30); + --code-border: rgb(50, 50, 50); + } +} diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html index 2decab0..b5c8cc4 100644 --- a/layouts/_default/baseof.html +++ b/layouts/_default/baseof.html @@ -36,6 +36,5 @@ {{ end }} - diff --git a/static/js/theme-switch.js b/static/js/theme-switch.js deleted file mode 100644 index a617fda..0000000 --- a/static/js/theme-switch.js +++ /dev/null @@ -1,28 +0,0 @@ -function isAuto() { - return document.body.classList.contains("auto"); -} - -function setTheme() { - if (!isAuto()) { - return - } - - document.body.classList.remove("auto"); - let cls = "light"; - if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) { - cls = "dark"; - } - - document.body.classList.add(cls); -} - -function invertBody() { - document.body.classList.toggle("dark"); - document.body.classList.toggle("light"); -} - -if (isAuto()) { - window.matchMedia('(prefers-color-scheme: dark)').addListener(invertBody); -} - -setTheme(); -- cgit v1.2.3