Add manual theme switcher (fixes #5)

config.toml

@@ -52,6 +52,10 @@ generate_feeds = true
 taxonomies = [{ name = "tags", feed = true }]
 
 [extra]
+# Which theme should be used by default (light/dark).
+# Strongly recommended to use this only with the manual theme switcher enabled,
+# it's important for a11y.
+# default_theme = "dark"
 # Sets theme and browser theme color.
 # See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta/name/theme-color
 primary_color = "#ff7800"
@@ -96,6 +100,8 @@ show_read_time = true
 [extra.nav]
 # Whether to show Atom/RSS feed button in the nav
 show_feed = true
+# Whether to show manual theme switcher in the nav
+show_theme_switcher = true
 # Links used in the nav.
 # For local files use same link format as in Markdown,
 # i.e "@/blog/_index.md".

i18n/ar.toml

@@ -58,6 +58,10 @@ source = "مصدر الموقع الإلكتروني"
 table_of_contents = "جدول المحتويات"
 tags = "العلامات"
 tags_title = "العلامات"
+theme = "السمة"
+theme_dark = "التبديل إلى السمة الداكنة"
+theme_light = "التبديل إلى السمة الفاتحة"
+theme_system = "استخدام سمة النظام"
 tip = "نصيحة"
 trigger_warning = "تحذير الزناد"
 updated = "تحديث"

i18n/en.toml

@@ -62,6 +62,10 @@ source = "Website source"
 table_of_contents = "Table of Contents"
 tags = "tags"
 tags_title = "Tags"
+theme = "Theme"
+theme_dark = "Switch to dark theme"
+theme_light = "Switch to light theme"
+theme_system = "Use system theme"
 tip = "Tip"
 trigger_warning = "Trigger Warning"
 updated = "Updated on"

i18n/ru.toml

@@ -66,6 +66,10 @@ source = "Исходный код веб-сайта"
 table_of_contents = "Оглавление"
 tags = "$NUMBER тегов"
 tags_title = "Теги"
+theme = "Тема"
+theme_dark = "Переключить на темную тему"
+theme_light = "Переключить на светлую тему"
+theme_system = "Использовать системную тему"
 tip = "Совет"
 trigger_warning = "Предупреждение о Тревоге"
 updated = "Обновлено"

sass/_nav.scss

@@ -56,7 +56,7 @@
 				list-style: none;
 
 				@media only screen and (max-width: 480px) {
-					&:not(#search, #language-switcher, #feed) {
+					&:not(#search, #language-switcher, #theme-switcher, #feed) {
 						width: 100%;
 					}
 				}
@@ -84,15 +84,7 @@
 						}
 
 						@media only screen and (max-width: 480px) {
-							position: absolute;
+							display: none;
-							top: unset;
-							right: unset;
-							bottom: -0.125rem;
-							left: -0.125rem;
-							background-color: var(--fg-muted-2);
-							width: calc(100% + 0.25rem);
-							height: max(1px, 0.0625em);
-							content: "";
 						}
 					}
 
@@ -150,7 +142,9 @@
 
 				a,
 				&#search button,
-				&#language-switcher summary {
+				&#language-switcher summary,
+				&#theme-switcher summary,
+				&#theme-switcher button {
 					&:hover {
 						box-shadow: var(--edge-highlight);
 						background-color: var(--fg-muted-1);
@@ -240,7 +234,9 @@
 
 				&#search button,
 				&#language-switcher summary,
-				&#feed a {
+				&#feed a,
+				&#theme-switcher summary,
+				&#theme-switcher button {
 					padding: 0.5rem 0.625rem;
 
 					&:hover .icon {
@@ -256,7 +252,7 @@
 					}
 				}
 
-				&#search button {
+				button {
 					-webkit-appearance: none;
 					appearance: none;
 					transition: var(--transition);
@@ -266,8 +262,9 @@
 					background-color: transparent;
 					font-weight: bold;
 					font-size: 1rem;
+				}
 
-					.icon {
+				&#search button .icon {
 					$icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M6.57.063c-3.578 0-6.5 2.921-6.5 6.5 0 3.578 2.922 6.5 6.5 6.5a6.46 6.46 0 0 0 3.83-1.256l2.975 2.974c.957.938 2.363-.5 1.406-1.437l-2.96-2.961a6.46 6.46 0 0 0 1.25-3.82c0-3.579-2.923-6.5-6.5-6.5m0 2c2.5 0 4.5 2.003 4.5 4.5 0 2.5-2 4.5-4.5 4.5-2.496 0-4.5-2-4.5-4.5 0-2.497 2.004-4.5 4.5-4.5'/%3E%3C/svg%3E");
 					-webkit-mask-image: $icon;
 					mask-image: $icon;
@@ -276,7 +273,6 @@
 						transform: scaleX(-100%);
 					}
 				}
-				}
 
 				&#feed .icon {
 					$icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M1.988 1.988V3c.008.547.453.984 1 .988.004-.004.008-.004.012-.004v.028A8.977 8.977 0 0 1 11.988 13a.991.991 0 0 0 1 .984h1V13h-.004c0-.004 0-.004.004-.008C13.984 7.02 9.184 2.148 3.242 2.02A1.004 1.004 0 0 0 3 1.988v-.004zm0 4V7c.008.547.453.984 1 .988.004-.004.008-.004.012-.004V8a4.985 4.985 0 0 1 4.996 4.844 1.002 1.002 0 0 0 .988 1.145c.008-.005.012-.005.016-.005v.004h.984V13H10c0-3.793-3.047-6.898-6.82-6.992 0-.004-.004-.004-.004-.004A.892.892 0 0 0 3 5.988v-.004zm2 4a1.999 1.999 0 1 0-.002 3.998 1.999 1.999 0 0 0 .002-3.998m0 0'%3E%3C/path%3E%3C/svg%3E");
@@ -288,7 +284,6 @@
 					}
 				}
 
-				&#language-switcher {
 				details {
 					position: relative;
 					box-shadow: none;
@@ -307,12 +302,6 @@
 						&::-webkit-details-marker {
 							display: none;
 						}
-
-							.icon {
-								$icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M3.98 1v3H1v2h2.947a4.8 4.8 0 0 1-.592 1.871c-.425.758-1.101 1.488-2.062 2.45l1.414 1.413c.92-.92 1.703-1.728 2.283-2.697.38.632.844 1.196 1.377 1.768l.668-2.309a6 6 0 0 1-.41-.625A4.75 4.75 0 0 1 6.033 6h1.53l.511-2H6V1zm5.24 1L6 15h2l.781-3h4.438L14 15h2L12.781 2zm1.562 2h.438l1.5 6H9.28z'/%3E%3C/svg%3E");
-								-webkit-mask-image: $icon;
-								mask-image: $icon;
-							}
 					}
 
 					&[open] ul {
@@ -335,12 +324,10 @@
 						z-index: 1;
 						backdrop-filter: var(--blur);
 						box-shadow: var(--edge-highlight), 0 0.75rem 1.5rem -1rem rgba(0, 0, 0, 0.5);
-							border-radius: calc(var(--rounded-corner) + 0.25rem);
 						background-color: var(--nav-bg);
 						padding: 0.25rem;
 
 						li {
-								display: flex;
 							width: 100%;
 
 							a {
@@ -350,6 +337,73 @@
 						}
 					}
 				}
+
+				&#language-switcher {
+					details {
+						summary {
+							.icon {
+								$icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M3.98 1v3H1v2h2.947a4.8 4.8 0 0 1-.592 1.871c-.425.758-1.101 1.488-2.062 2.45l1.414 1.413c.92-.92 1.703-1.728 2.283-2.697.38.632.844 1.196 1.377 1.768l.668-2.309a6 6 0 0 1-.41-.625A4.75 4.75 0 0 1 6.033 6h1.53l.511-2H6V1zm5.24 1L6 15h2l.781-3h4.438L14 15h2L12.781 2zm1.562 2h.438l1.5 6H9.28z'/%3E%3C/svg%3E");
+								-webkit-mask-image: $icon;
+								mask-image: $icon;
+							}
+						}
+
+						ul {
+							border-radius: calc(var(--rounded-corner) + 0.25rem);
+						}
+					}
+				}
+
+				&#theme-switcher {
+					details {
+						summary {
+							.icon {
+								$icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M8 0C3.594 0 0 3.594 0 8s3.594 8 8 8 8-3.594 8-8-3.594-8-8-8m0 1.941c3.36 0 6.059 2.7 6.059 6.059s-2.7 6.059-6.059 6.059zm0 0'/%3E%3C/svg%3E");
+								-webkit-mask-image: $icon;
+								mask-image: $icon;
+
+								:root[dir*="rtl"] & {
+									transform: scaleX(-100%);
+								}
+							}
+						}
+					}
+
+					ul {
+						flex-wrap: nowrap;
+						border-radius: 999px;
+
+						li {
+							display: flex;
+							width: 100%;
+
+							#theme-light .icon {
+								$icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M8.004-.008a1 1 0 0 0-1 1v1a1 1 0 1 0 2 0v-1c0-.554-.445-1-1-1M3.053 2.035a1 1 0 0 0-.26.035.994.994 0 0 0-.45 1.672l.708.707a1 1 0 1 0 1.414-1.414l-.707-.707a1 1 0 0 0-.705-.293m9.9.012a1 1 0 0 0-.707.293l-.707.707a1 1 0 1 0 1.414 1.414l.707-.707a1 1 0 0 0-.707-1.707M8 4C5.785 4 4 5.785 4 8s1.785 4 4 4 4-1.785 4-4-1.785-4-4-4m0 2c1.098 0 2 .902 2 2s-.902 2-2 2-2-.902-2-2 .902-2 2-2m-7.004.984a1 1 0 1 0 0 2h1a1 1 0 1 0 0-2zM14 7c-.55 0-1 .45-1 1s.45 1 1 1h1c.55 0 1-.45 1-1s-.45-1-1-1zM3.748 11.234a1 1 0 0 0-.705.293l-.711.707a1.007 1.007 0 0 0 0 1.414c.39.391 1.027.391 1.418 0l.707-.707a1 1 0 0 0-.709-1.707m8.49.006q-.131 0-.261.033a1.01 1.01 0 0 0-.707.711 1 1 0 0 0 .261.965l.707.707a.995.995 0 0 0 1.672-.445 1 1 0 0 0-.258-.969l-.707-.707a1 1 0 0 0-.707-.295m-4.246 1.756c-.554 0-1 .445-1 1v1a1 1 0 1 0 2 0v-1a1 1 0 0 0-1-1'/%3E%3C/svg%3E");
+								-webkit-mask-image: $icon;
+								mask-image: $icon;
+							}
+
+							#theme-dark .icon {
+								$icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M.918 8.004a7.072 7.072 0 0 0 14.102.793 1.01 1.01 0 0 0-.457-.957 1 1 0 0 0-1.063-.004 3.9 3.9 0 0 1-2.031.578 3.89 3.89 0 0 1-3.883-3.883c0-.715.203-1.422.578-2.031a1 1 0 0 0-.004-1.062c-.207-.32-.578-.5-.957-.458A7.07 7.07 0 0 0 .918 8.004M5.586 4.53a5.877 5.877 0 0 0 8.965 5.004l-1.52-.96a5.09 5.09 0 0 1-5.035 4.507 5.09 5.09 0 0 1-5.078-5.078 5.09 5.09 0 0 1 4.508-5.035l-.961-1.52a5.9 5.9 0 0 0-.88 3.082m0 0'/%3E%3C/svg%3E");
+								-webkit-mask-image: $icon;
+								mask-image: $icon;
+
+								:root[dir*="rtl"] & {
+									transform: scaleX(-100%);
+								}
+							}
+
+							#theme-system .icon {
+								$icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M8 0C3.594 0 0 3.594 0 8s3.594 8 8 8 8-3.594 8-8-3.594-8-8-8m0 1.941c3.36 0 6.059 2.7 6.059 6.059s-2.7 6.059-6.059 6.059zm0 0'/%3E%3C/svg%3E");
+								-webkit-mask-image: $icon;
+								mask-image: $icon;
+
+								:root[dir*="rtl"] & {
+									transform: scaleX(-100%);
+								}
+							}
+						}
+					}
 				}
 			}
 		}

sass/_variables.scss

@@ -1,5 +1,28 @@
-:root {
+@mixin theme-variables($theme) {
-	// COLORS
+	@if $theme =="dark" {
+		--bg-color: linear-gradient(rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.9));
+		--fg-color: rgb(255, 255, 255);
+		--fg-muted-1: rgba(255, 255, 255, 0.05);
+		--fg-muted-2: rgba(255, 255, 255, 0.1);
+		--fg-muted-3: rgba(255, 255, 255, 0.2);
+		--fg-muted-4: rgba(255, 255, 255, 0.5);
+		--fg-muted-5: rgba(255, 255, 255, 0.6);
+		--nav-bg: rgba(25, 25, 25, 0.7);
+		--blue-bg: rgba(153, 193, 241, 0.1);
+		--blue-fg: rgb(153, 193, 241);
+		--green-bg: rgba(143, 240, 164, 0.1);
+		--green-fg: rgb(143, 240, 164);
+		--purple-bg: rgba(220, 138, 221, 0.1);
+		--purple-fg: rgb(220, 138, 221);
+		--red-bg: rgba(226, 97, 81, 0.1);
+		--red-fg: rgb(246, 97, 81);
+		--yellow-bg: rgba(248, 228, 92, 0.1);
+		--yellow-fg: rgb(248, 228, 92);
+		--star-featured: rgba(248, 228, 92, 0.05);
+		color-scheme: dark;
+	}
+
+	@else {
 		--bg-color: linear-gradient(rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.8));
 		--fg-color: rgba(0, 0, 0, 0.8);
 		--fg-muted-1: rgba(0, 0, 0, 0.05);
@@ -19,6 +42,11 @@
 		--yellow-bg: rgba(156, 110, 3, 0.1);
 		--yellow-fg: rgb(156, 110, 3);
 		--star-featured: rgba(156, 110, 3, 0.15);
+	}
+}
+
+:root {
+	@include theme-variables("light");
 
 	// VARIABLES
 	--active: 0.9;
@@ -50,27 +78,14 @@
 	--font-didone: Didot, "Bodoni MT", "Noto Serif Display", "URW Palladio L", P052, Sylfaen, serif;
 	--font-handwritten: "Segoe Print", "Bradley Hand", Chilanka, TSCu_Comic, casual, cursive;
 	--font-emoji: "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+}
+
+[data-theme="dark"] {
+	@include theme-variables("dark");
+}
 
 @media (prefers-color-scheme: dark) {
-		// COLORS
+	:root:not([data-theme="light"]) {
-		--bg-color: linear-gradient(rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.9));
+		@include theme-variables("dark");
-		--fg-color: rgb(255, 255, 255);
-		--fg-muted-1: rgba(255, 255, 255, 0.05);
-		--fg-muted-2: rgba(255, 255, 255, 0.1);
-		--fg-muted-3: rgba(255, 255, 255, 0.2);
-		--fg-muted-4: rgba(255, 255, 255, 0.5);
-		--fg-muted-5: rgba(255, 255, 255, 0.6);
-		--nav-bg: rgba(25, 25, 25, 0.7);
-		--blue-bg: rgba(153, 193, 241, 0.1);
-		--blue-fg: rgb(153, 193, 241);
-		--green-bg: rgba(143, 240, 164, 0.1);
-		--green-fg: rgb(143, 240, 164);
-		--purple-bg: rgba(220, 138, 221, 0.1);
-		--purple-fg: rgb(220, 138, 221);
-		--red-bg: rgba(226, 97, 81, 0.1);
-		--red-fg: rgb(246, 97, 81);
-		--yellow-bg: rgba(248, 228, 92, 0.1);
-		--yellow-fg: rgb(248, 228, 92);
-		--star-featured: rgba(248, 228, 92, 0.05);
 	}
 }

static/theme-switcher.js

@@ -0,0 +1,54 @@
+(function () {
+    // Get the default theme from the HTML data-theme attribute.
+    const defaultTheme = document.documentElement.getAttribute("data-theme");
+
+    // Set the data-default-theme attribute only if defaultTheme is not null.
+    if (defaultTheme) {
+        document.documentElement.setAttribute("data-default-theme", defaultTheme);
+    }
+
+    // Attempt to retrieve the current theme from the browser's local storage.
+    const storedTheme = localStorage.getItem("theme");
+
+    if (storedTheme && storedTheme !== "system") {
+        document.documentElement.setAttribute("data-theme", storedTheme);
+    } else if (defaultTheme && storedTheme !== "system") {
+        document.documentElement.setAttribute("data-theme", defaultTheme);
+    } else {
+        // If no theme is found in local storage and no default theme is set, CSS handles the theme.
+        document.documentElement.removeAttribute("data-theme");
+    }
+})();
+
+const defaultTheme = document.documentElement.getAttribute("data-default-theme");
+
+function setTheme(theme, saveToLocalStorage = false) {
+    if (theme === "system") {
+        document.documentElement.removeAttribute("data-theme");
+    } else {
+        document.documentElement.setAttribute("data-theme", theme);
+    }
+
+    if (saveToLocalStorage) {
+        localStorage.setItem("theme", theme);
+    } else {
+        localStorage.removeItem("theme");
+    }
+
+    // Dispatch a custom event for comment systems.
+    window.dispatchEvent(new CustomEvent("themeChanged", { detail: { theme } }));
+}
+
+function resetTheme() {
+    // Reset the theme to the default or system preference if no default is set.
+    setTheme(defaultTheme || "system");
+}
+
+// Functions connected to buttons via `onclick` attributes.
+function switchTheme(theme) {
+    if (theme === "system") {
+        resetTheme();
+    } else {
+        setTheme(theme, true);
+    }
+}

templates/base.html

@@ -8,7 +8,7 @@
 {%- set rtl_languages = ["ar", "arc", "az", "dv", "ff", "he", "ku", "nqo", "fa", "rhg", "syc", "ur"] -%}
 
 <!DOCTYPE html>
-<html xmlns="http://www.w3.org/1999/xhtml" {% if lang in rtl_languages %}dir="rtl"{% endif %} lang="{{ lang }}">
+<html xmlns="http://www.w3.org/1999/xhtml" {% if lang in rtl_languages %}dir="rtl"{% endif %} lang="{{ lang }}" {% if config.extra.default_theme %}data-theme="{{config.extra.default_theme}}"{% endif %}>
 {% include "partials/head.html" %}
 <body>
 	{%- if config.extra.nav.links %}

templates/partials/head.html

@@ -46,8 +46,14 @@
 		}
 
 		{%- if config.extra.primary_color_dark %}
+			[data-theme="dark"] {
+				--primary-color: {{ config.extra.primary_color_dark }};
+				--primary-color-alpha: {{ config.extra.primary_color_dark_alpha }};
+				--contrast-color: {% if config.extra.fix_contrast_dark %}rgba(0, 0, 0, 0.8){% else %}#fff{% endif %};
+			}
+
 			@media (prefers-color-scheme: dark) {
-				:root {
+				:root:not([data-theme="light"]) {
 					--primary-color: {{ config.extra.primary_color_dark }};
 					--primary-color-alpha: {{ config.extra.primary_color_dark_alpha }};
 					--contrast-color: {% if config.extra.fix_contrast_dark %}rgba(0, 0, 0, 0.8){% else %}#fff{% endif %};
@@ -83,15 +89,19 @@
 		{%- include "partials/copy_button.html" %}
 	{%- endif %}
 
+	{%- set scripts = [] %}
+
 	{%- if config.build_search_index %}
 		{%- include "partials/search.html" %}
-		{%- set scripts = ["elasticlunr.min.js"] %}
+		{%- set scripts = scripts | concat(with=["elasticlunr.min.js"]) %}
-	{%- else %}
+	{%- endif %}
-		{%- set scripts = [""] %}
+
+	{%- if config.extra.nav.show_theme_switcher %}
+		{%- set scripts = scripts | concat(with=["theme-switcher.js"]) %}
 	{%- endif %}
 
 	{%- if config.extra.scripts %}
-		{%- set scripts = config.extra.scripts %}
+		{%- set scripts = scripts | concat(with=config.extra.scripts) %}
 	{%- endif %}
 
 	{%- if page.extra.scripts %}

templates/partials/nav.html

@@ -46,6 +46,32 @@
 			{%- if config.languages | length > 0 %}
 				{%- include "partials/language_switcher.html" %}
 			{%- endif -%}
+			{%- if config.extra.nav.show_theme_switcher  %}
+				<li id="theme-switcher">
+					<details>
+						<summary title="{{ macros_translate::translate(key='theme', default='Theme', language_strings=language_strings) }}">
+							<i class="icon"></i>
+						</summary>
+						<ul>
+							<li>
+								<button id="theme-light" onclick="switchTheme('light')" title="{{ macros_translate::translate(key='theme_light', default='Switch to light theme', language_strings=language_strings) }}">
+									<i class="icon"></i>
+								</button>
+							</li>
+							<li>
+								<button id="theme-dark" onclick="switchTheme('dark')" title="{{ macros_translate::translate(key='theme_dark', default='Switch to dark theme', language_strings=language_strings) }}">
+									<i class="icon"></i>
+								</button>
+							</li>
+							<li>
+								<button id="theme-system" onclick="switchTheme('system')" title="{{ macros_translate::translate(key='theme_system', default='Use system theme', language_strings=language_strings) }}">
+									<i class="icon"></i>
+								</button>
+							</li>
+						</ul>
+					</details>
+				</li>
+			{%- endif %}
 			{%- if config.generate_feeds and config.extra.nav.show_feed %}
 				<li id="feed">
 					<a href="{{ get_url(path=config.feed_filenames[0]) }}" title="{{ macros_translate::translate(key='feed', default='Feed', language_strings=language_strings) }}">