✨ feat: follow user OS theme with JS disabled

Idea from #330.

config.toml

@@ -77,11 +77,11 @@ taxonomies = [{name = "tags", feed = true}]
 override_serif_with_sans = false
 
 # Enable JavaScript theme toggler to allow users to switch between dark/light mode.
-# If disabled, your site will only use the theme specified in the `default_theme` variable.
+# If disabled, your site will use the theme specified in the `default_theme` variable.
 theme_switcher = true
 
 # This setting determines the default theme on load ("light" or "dark").
-# To default to the user's OS-level theme, leave it empty or unset.
+# To follow the user's OS theme, leave it empty or unset.
 default_theme = ""
 
 # Choose the colourscheme (skin) for the theme. Default is "teal".

content/blog/customise-tabi/index.ca.md

@@ -19,6 +19,8 @@ tabi pot ser personalitzat de dues maneres: establint el tema per defecte (fosc
 
 Utilitza `default_theme = "dark"` per establir el tema fosc com a predeterminat, o `default_theme = "light"` per establir el tema clar com a predeterminat.
 
+Establir `default_theme = ""` (o comentar la variable) seguirà la preferència del sistema de l'usuari (mode clar o fosc).
+
 Per configurar permanentment el teu lloc en el tema fosc o clar, necessites desactivar el `theme_switcher` a `config.toml` i establir el teu tema preferit (`light` o `dark`) a `default_theme`.
 
 Per exemple, per tenir un tema fosc permanent:

content/blog/customise-tabi/index.es.md

@@ -19,6 +19,8 @@ tabi puede ser personalizado de dos maneras: estableciendo el tema predeterminad
 
 Usa `default_theme = "dark"` para establecer el tema oscuro como predeterminado, o `default_theme = "light"` para establecer el tema claro como predeterminado.
 
+Establecer `default_theme = ""` (o no especificar la variable) seguirá las preferencias del sistema del usuario (modo claro u oscuro).
+
 Para configurar permanentemente tu sitio en el tema oscuro o claro, necesitas desactivar el `theme_switcher` en `config.toml` y establecer tu tema preferido (`light` o `dark`) como el `default_theme`.
 
 Por ejemplo, para tener un tema oscuro permanente:

content/blog/customise-tabi/index.md

@@ -19,6 +19,8 @@ tabi can be customised in two ways: by setting the default theme (dark or light)
 
 Use `default_theme = "dark"` to set the dark theme as the default, or `default_theme = "light"` to set the light theme as the default.
 
+Setting `default_theme = ""` (or commenting out the variable) will follow the user's system preference (light or dark mode).
+
 To permanently set your site to either the dark or light theme, you need to disable the theme switcher in `config.toml` and set your preferred theme as the `default_theme`.
 
 For example, to have a permanent dark theme:

sass/main.scss

@@ -46,7 +46,46 @@
     font-display: swap;
 }
 
+@mixin theme-variables($theme) {
+    @if $theme =='light' {
+        --background-color: white;
+        --bg-0: #f0f0f0;
+        --bg-1: #e7e7e7;
+        --bg-2: #fefefe;
+        --bg-3: #d8dcdd;
+        --hover-color: white;
+        --primary-color: #087E96;
+        --divider-color: #d7d7d7;
+        --text-color: #222226;
+        --text-color-high-contrast: #313333;
+        --meta-color: #5b5b65;
+        --codeblock-bg: #26232e;
+        --codeblock-highlight: #383444;
+        --theme-switcher-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M283.211 512c78.962 0 151.079-35.925 198.857-94.792 7.068-8.708-.639-21.43-11.562-19.35-124.203 23.654-238.262-71.576-238.262-196.954 0-72.222 38.662-138.635 101.498-174.394 9.686-5.512 7.25-20.197-3.756-22.23A258.156 258.156 0 0 0 283.211 0c-141.309 0-256 114.511-256 256 0 141.309 114.511 256 256 256z'/%3E%3C/svg%3E%0A");
+        color-scheme: light;
+    }
+
+    @else {
+        --background-color: #1f1f1f;
+        --bg-0: #2f2f2f;
+        --bg-1: #3c3c3c;
+        --bg-2: #171717;
+        --bg-3: #535555;
+        --hover-color: black;
+        --primary-color: #91e0ee;
+        --divider-color: #4a4a4a;
+        --text-color: #D4D4D4;
+        --text-color-high-contrast: #eceeef;
+        --meta-color: #B0B0B0;
+        --codeblock-bg: #19181e;
+        --codeblock-highlight: #282834;
+        --theme-switcher-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 96 960 960' %3E%3Cpath d='M480 776q-83 0-141.5-58.5T280 576q0-83 58.5-141.5T480 376q83 0 141.5 58.5T680 576q0 83-58.5 141.5T480 776ZM80 616q-17 0-28.5-11.5T40 576q0-17 11.5-28.5T80 536h80q17 0 28.5 11.5T200 576q0 17-11.5 28.5T160 616H80Zm720 0q-17 0-28.5-11.5T760 576q0-17 11.5-28.5T800 536h80q17 0 28.5 11.5T920 576q0 17-11.5 28.5T880 616h-80ZM480 296q-17 0-28.5-11.5T440 256v-80q0-17 11.5-28.5T480 136q17 0 28.5 11.5T520 176v80q0 17-11.5 28.5T480 296Zm0 720q-17 0-28.5-11.5T440 976v-80q0-17 11.5-28.5T480 856q17 0 28.5 11.5T520 896v80q0 17-11.5 28.5T480 1016ZM226 378l-43-42q-12-11-11.5-28t11.5-29q12-12 29-12t28 12l42 43q11 12 11 28t-11 28q-11 12-27.5 11.5T226 378Zm494 495-42-43q-11-12-11-28.5t11-27.5q11-12 27.5-11.5T734 774l43 42q12 11 11.5 28T777 873q-12 12-29 12t-28-12Zm-42-495q-12-11-11.5-27.5T678 322l42-43q11-12 28-11.5t29 11.5q12 12 12 29t-12 28l-43 42q-12 11-28 11t-28-11ZM183 873q-12-12-12-29t12-28l43-42q12-11 28.5-11t27.5 11q12 11 11.5 27.5T282 830l-42 43q-11 12-28 11.5T183 873Z'/%3E%3C/svg%3E");
+        color-scheme: dark;
+    }
+}
+
 :root {
+    @include theme-variables('light');
 
     --max-layout-width: 1000px;
     --normal-layout-width: 600px;
@@ -58,45 +97,12 @@
     --serif-font: 'Source Serif', 'Georgia', serif;
     --code-font: 'Cascadia Code';
 
-    --background-color: white;
-    --bg-0: #f0f0f0;
-    --bg-1: #e7e7e7;
-    --bg-2: #fefefe;
-    --bg-3: #d8dcdd;
-    --hover-color: white;
-    --primary-color: #087E96;
-    --divider-color: #d7d7d7;
-    --text-color: #222226;
-    --text-color-high-contrast: #313333;
-    --meta-color: #5b5b65;
-    --codeblock-bg: #26232e;
-    --codeblock-highlight: #383444;
-
-    --theme-switcher-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M283.211 512c78.962 0 151.079-35.925 198.857-94.792 7.068-8.708-.639-21.43-11.562-19.35-124.203 23.654-238.262-71.576-238.262-196.954 0-72.222 38.662-138.635 101.498-174.394 9.686-5.512 7.25-20.197-3.756-22.23A258.156 258.156 0 0 0 283.211 0c-141.309 0-256 114.511-256 256 0 141.309 114.511 256 256 256z'/%3E%3C/svg%3E%0A");
-    color-scheme: light;
     line-height: 190%;
-
     font-family: var(--sans-serif-font);
 }
 
 [data-theme='dark'] {
-
-    --background-color: #1f1f1f;
-    --bg-0: #2f2f2f;
-    --bg-1: #3c3c3c;
-    --bg-2: #171717;
-    --bg-3: #535555;
-    --hover-color: black;
-    --primary-color: #91e0ee;
-    --divider-color: #4a4a4a;
-    --text-color: #D4D4D4;
-    --text-color-high-contrast: #eceeef;
-    --meta-color: #B0B0B0;
-    --codeblock-bg: #19181e;
-    --codeblock-highlight: #282834;
-
-    --theme-switcher-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 96 960 960' %3E%3Cpath d='M480 776q-83 0-141.5-58.5T280 576q0-83 58.5-141.5T480 376q83 0 141.5 58.5T680 576q0 83-58.5 141.5T480 776ZM80 616q-17 0-28.5-11.5T40 576q0-17 11.5-28.5T80 536h80q17 0 28.5 11.5T200 576q0 17-11.5 28.5T160 616H80Zm720 0q-17 0-28.5-11.5T760 576q0-17 11.5-28.5T800 536h80q17 0 28.5 11.5T920 576q0 17-11.5 28.5T880 616h-80ZM480 296q-17 0-28.5-11.5T440 256v-80q0-17 11.5-28.5T480 136q17 0 28.5 11.5T520 176v80q0 17-11.5 28.5T480 296Zm0 720q-17 0-28.5-11.5T440 976v-80q0-17 11.5-28.5T480 856q17 0 28.5 11.5T520 896v80q0 17-11.5 28.5T480 1016ZM226 378l-43-42q-12-11-11.5-28t11.5-29q12-12 29-12t28 12l42 43q11 12 11 28t-11 28q-11 12-27.5 11.5T226 378Zm494 495-42-43q-11-12-11-28.5t11-27.5q11-12 27.5-11.5T734 774l43 42q12 11 11.5 28T777 873q-12 12-29 12t-28-12Zm-42-495q-12-11-11.5-27.5T678 322l42-43q11-12 28-11.5t29 11.5q12 12 12 29t-12 28l-43 42q-12 11-28 11t-28-11ZM183 873q-12-12-12-29t12-28l43-42q12-11 28.5-11t27.5 11q12 11 11.5 27.5T282 830l-42 43q-11 12-28 11.5T183 873Z'/%3E%3C/svg%3E");
-    color-scheme: dark;
+    @include theme-variables('dark');
 
     .invertible-image {
         filter: invert(.88);
@@ -107,6 +113,20 @@
     }
 }
 
+@media (prefers-color-scheme: dark) {
+    :root:not([data-theme='light']) {
+        @include theme-variables('dark');
+
+        .invertible-image {
+            filter: invert(.88);
+        }
+
+        .dimmable-image {
+            filter: brightness(.8) contrast(1.2);
+        }
+    }
+}
+
 html {
     background-color: var(--background-color);
     color: var(--text-color);

static/feed_style.xsl

@@ -4,6 +4,9 @@
   <xsl:output method="html" version="1.0" encoding="UTF-8" indent="yes"/>
   <xsl:template match="/">
     <html xmlns="http://www.w3.org/1999/xhtml" lang="en">
+      <xsl:attribute name="data-theme">
+        <xsl:value-of select="/atom:feed/str:translations/str:default_theme"/>
+      </xsl:attribute>
       <head>
         <title>
           <xsl:value-of select="/atom:feed/atom:title"/> • Feed

templates/atom.xml

@@ -24,6 +24,9 @@
         <str:last_updated_on>
             {{- macros_translate::translate(key="last_updated_on", default="Updated on $DATE", language_strings=language_strings) -}}
         </str:last_updated_on>
+        <str:default_theme>
+            {{- config.extra.default_theme | default(value="") -}}
+        </str:default_theme>
     </str:translations>
 
     {#- Load extra CSS (skin) if set in config.toml -#}

theme.toml

@@ -34,11 +34,11 @@ homepage = "https://osc.garden"
 override_serif_with_sans = false
 
 # Enable JavaScript theme toggler to allow users to switch between dark/light mode.
-# If disabled, your site will only use the theme specified in the `default_theme` variable.
+# If disabled, your site will use the theme specified in the `default_theme` variable.
 theme_switcher = true
 
 # This setting determines the default theme on load ("light" or "dark").
-# To default to the user's OS-level theme, leave it empty or unset.
+# To follow the user's OS theme, leave it empty or unset.
 default_theme = ""
 
 # Choose the colourscheme (skin) for the theme. Default is "teal".