fix: enable dark theme via CSS

4 files changed, 11 insertions, 36 deletions

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 }}
 </body>
 
-<script src="{{ "js/theme-switch.js" | relURL }}"></script>
 <script defer src="{{ "js/copy-code.js" | relURL }}"></script>
 </html>
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();