✨ feat: allow setting the default theme

Used as fallback when JS is disabled and `theme_switcher` is enabled. If `default_theme` is unset, it defaults to "light". Used as single theme when `theme_switcher` is disabled.
welpo · Aug 7, 2023 · c78c7f5 · c78c7f5
1 parent ab879e3
commit c78c7f5
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 5 deletions.
diff --git a/config.toml b/config.toml
@@ -133,10 +133,17 @@ language_name.ca = "Català"
 language_name.en = "English"
 language_name.es = "Español"
 
-# Enable JavaScript theme toggler for dark/light mode (and automatic switching).
-# The default setting is the light theme.
+# Enable JavaScript theme toggler to allow users to switch between dark/light mode.
+# Also enables automatic switching based on user's OS-level theme settings.
+# If disabled, your site will only use the theme specified in the `default_theme` variable.
 theme_switcher = true
 
+# This setting determines the default theme ("light" or "dark").
+# If you wish to use only a dark or light theme, disable the `theme_switcher` above and set this variable.
+# If `theme_switcher` is enabled, this will be the theme that is visible to users who have JavaScript disabled.
+# Defaults to "light", if unset.
+default_theme = "light"
+
 # Add a "copy" button to codeblocks (loads ~700 bytes of JavaScript).
 copy_button = true
 

diff --git a/templates/base.html b/templates/base.html
@@ -9,7 +9,10 @@
 {% import "macros/add_comments.html" as macros_add_comments %}
 
 <!DOCTYPE html>
-<html lang="{{ lang }}">
+<html lang="{{ lang }}" {% if config.extra.default_theme -%}
+    data-theme="{{config.extra.default_theme}}"
+{%- endif -%}>
+
 {% include "partials/header.html" %}
 
 <body>

diff --git a/theme.toml b/theme.toml
@@ -26,10 +26,17 @@ language_name.ca = "Català"
 language_name.en = "English"
 language_name.es = "Español"
 
-# Enable JavaScript theme toggler for dark/light mode (and automatic switching).
-# The default setting is the light theme.
+# Enable JavaScript theme toggler to allow users to switch between dark/light mode.
+# Also enables automatic switching based on user's OS-level theme settings.
+# If disabled, your site will only use the theme specified in the `default_theme` variable.
 theme_switcher = true
 
+# This setting determines the default theme ("light" or "dark").
+# If you wish to use only a dark or light theme, disable the `theme_switcher` above and set this variable.
+# If `theme_switcher` is enabled, this will be the theme that is visible to users who have JavaScript disabled.
+# Defaults to "light", if unset.
+default_theme = "light"
+
 # Add a "copy" button to codeblocks (loads ~700 bytes of JavaScript).
 copy_button = true