✨ feat(theme-switcher)!: respect theme_default when JS is enabled (#…

…224)

BREAKING CHANGE: changes the behaviour of `theme_default`

config.toml

@@ -44,15 +44,12 @@ taxonomies = [{name = "tags", feed = true}]
 # https://welpo.github.io/tabi/blog/mastering-tabi-settings/
 
 # 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"
+# 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.
+default_theme = ""
 
 # Choose the colourscheme (skin) for the theme. Default is "teal".
 # Skin available: blue, lavender, mint, red, sakura, teal, monochrome, lowcontrast_orange, lowcontrast_peach, lowcontrast_pink, indigo_ingot, evangelion

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

@@ -1,7 +1,7 @@
 +++
 title = "Personalitza el color de tabi i el tema per defecte"
 date = 2023-08-09
-updated = 2023-10-07
+updated = 2023-11-24
 description = "Aprèn a personalitzar tabi fent servir skins i establint un tema per defecte, aconseguint un aspecte únic."
 
 [taxonomies]
@@ -17,6 +17,8 @@ tabi pot ser personalitzat de dues maneres: establint el tema per defecte (fosc
 
 ## Tema per defecte
 
+Utilitza `default_theme = "dark"` per establir el tema fosc com a predeterminat, o `default_theme = "light"` per establir el tema clar com a predeterminat.
+
 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:
@@ -27,8 +29,6 @@ theme_switcher = false
 default_theme = "dark"
 ```
 
-Si el teu interruptor de mode clar/fosc està activat, el `default_theme` només s'utilitzarà com a reserva, en cas que un visitant tingui JavaScript desactivat.
-
 ## Skins
 
 No t'agrada l'aiguamarina? Cap problema! tabi té 12 skins per triar. Si cap d'aquestes t'agrada, pots [crear la teva pròpia skin](#crea-la-teva-propia-skin).

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

@@ -1,7 +1,7 @@
 +++
 title = "Personaliza el color de tabi y el tema predeterminado"
 date = 2023-08-09
-updated = 2023-10-07
+updated = 2023-11-24
 description = "Aprende a personalizar tabi usando skins y estableciendo un tema predeterminado, haciendo que tu sitio sea único."
 
 [taxonomies]
@@ -17,6 +17,8 @@ tabi puede ser personalizado de dos maneras: estableciendo el tema predeterminad
 
 ## Tema predeterminado
 
+Usa `default_theme = "dark"` para establecer el tema oscuro como predeterminado, o `default_theme = "light"` para establecer el tema claro como predeterminado.
+
 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:
@@ -27,8 +29,6 @@ theme_switcher = false
 default_theme = "dark"
 ```
 
-Si tu interruptor de modo claro/oscuro está activado, el `default_theme` sólo se usará como respaldo, en caso de que un visitante tenga JavaScript desactivado.
-
 ## Skins
 
 ¿No te gusta el aguamarina? ¡No hay problema! tabi tiene 12 skins (pieles) para elegir. Si ninguna de estas te convence, puedes [crear tu propia skin](#crea-tu-propia-skin).

content/blog/customise-tabi/index.md

@@ -1,7 +1,7 @@
 +++
 title = "Customise tabi with skins and a default theme"
 date = 2023-08-09
-updated = 2023-10-07
+updated = 2023-11-24
 description = "Learn how to customise tabi using skins and setting a default theme, making your site uniquely yours."
 
 [taxonomies]
@@ -17,6 +17,8 @@ tabi can be customised in two ways: by setting the default theme (dark or light)
 
 ## Default theme
 
+Use `default_theme = "dark"` to set the dark theme as the default, or `default_theme = "light"` to set the light theme as the default.
+
 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:
@@ -27,8 +29,6 @@ theme_switcher = false
 default_theme = "dark"
 ```
 
-If your theme switcher is enabled, the `default_theme` will only be used as fallback, in case a visitor has JavaScript disabled.
-
 ## Skins
 
 Not a fan of teal? No problem! tabi has 12 skins for you to choose from. If none of these work for you, you can [create your own](#create-your-own-skin).

content/blog/mastering-tabi-settings/index.ca.md

@@ -1,7 +1,7 @@
 +++
 title = "Domina la configuració de tabi: guia completa"
 date = 2023-09-18
-updated = 2023-11-05
+updated = 2023-11-24
 description = "Descobreix les múltiples maneres en què pots personalitzar tabi."
 
 [taxonomies]
@@ -102,9 +102,7 @@ El commutador de mode clar i fosc (la icona de lluna/sol a la cantonada superior
 |:------:|:------:|:-------------:|:---------------:|:-------------------:|
 |   ❌   |   ❌    |      ✅       |        ❌        |         ❌          |
 
-El mode predeterminat es pot especificar amb la variable `default_theme`, que accepta `"dark"` o `"light"`. Per defecte és `"light"`.
-
-**Nota**: el mode predeterminat només s'usa quan el commutador de mode està desactivat, ja sigui perquè s'ha configurat com a `false` a `config.toml` o perquè un usuari ha deshabilitat JavaScript.
+El mode predeterminat es pot especificar amb la variable `default_theme`, que accepta `"dark"` o `"light"`. Si no s'especifica, el mode predeterminat és el mode del sistema.
 
 ### Skin personalitzada
 

content/blog/mastering-tabi-settings/index.es.md

@@ -1,7 +1,7 @@
 +++
 title = "Domina la configuración de tabi: guía completa"
 date = 2023-09-18
-updated = 2023-11-05
+updated = 2023-11-24
 description = "Descubre las múltiples maneras en que puedes personalizar tabi."
 
 [taxonomies]
@@ -100,9 +100,7 @@ El interruptor de modo claro y oscuro (el icono de luna/sol en la esquina superi
 |:------:|:-------:|:-------------:|:---------------:|:-------------------:|
 |   ❌   |   ❌    |      ✅       |        ❌        |         ❌          |
 
-El tema predeterminado puede especificarse con la variable `default_theme`, que acepta `"dark"` o `"light"`. Por defecto es `"light"`.
-
-**Nota**: el tema predeterminado solo se usa cuando el interruptor de tema está desactivado, ya sea porque se ha configurado como `false` en el config o porque un usuario ha deshabilitado JavaScript.
+El tema predeterminado puede especificarse con la variable `default_theme`, que acepta `"dark"` o `"light"`. Si no lo especificas, el tema predeterminado será el tema del sistema.
 
 ### Pieles personalizadas
 

content/blog/mastering-tabi-settings/index.md

@@ -1,7 +1,7 @@
 +++
 title = "Mastering tabi Settings: A Comprehensive Guide"
 date = 2023-09-18
-updated = 2023-11-05
+updated = 2023-11-24
 description = "Discover the many ways you can customise your tabi site."
 
 [taxonomies]
@@ -102,9 +102,7 @@ The light and dark mode switcher (the moon/sun icon on the top right) can be ena
 |:----:|:-------:|:-------------:|:-----------------:|:-------------------:|
 |  ❌  |   ❌    |      ✅       |         ❌        |         ❌          |
 
-The default theme can be specified with the `default_theme` variable, which accepts either `"dark"` or `"light"`. Defaults to `"light"`.
-
-**Note**: the default theme is only used when the theme switcher is disabled, either because it's set to `false` in the config or because a user has JavaScript disabled.
+The default theme can be specified with the `default_theme` variable, which accepts either `"dark"` or `"light"`. If you don't set it, the default theme will be the one set in the user's browser.
 
 ### Custom Skins
 

i18n/ca.toml

@@ -27,7 +27,7 @@ language_selection = "Selecció d'idioma"
 toggle_mode = "Canvia el mode $MODE"  # $MODE will be replaced by a value (or both) below.
 dark = "obscur"
 light = "clar"
-reset_mode = "Restableix el mode als valors predeterminats del sistema"
+reset_mode = "Restableix el mode al valor predeterminat"
 
 # Quick navigation buttons.
 toggle_toc = "Mostrar/ocultar la taula de continguts"

i18n/de.toml

@@ -31,7 +31,7 @@ language_selection = "Sprachauswahl"
 toggle_mode = "Wechsle in den $MODE Modus"  # $MODE will be replaced by a value (or both) below.
 dark = "dunkel"
 light = "hell"
-reset_mode = "Modus auf Betriebssystemstandard zurücksetzen"
+reset_mode = "Modus auf Standard zurücksetzen"
 
 # Quick navigation buttons.
 toggle_toc = "Inhaltsverzeichnis ein-/ausblenden"

i18n/en.toml

@@ -27,7 +27,7 @@ language_selection = "Language selection"
 toggle_mode = "Toggle $MODE mode"  # $MODE will be replaced by a value (or both) below.
 dark = "dark"
 light = "light"
-reset_mode = "Reset mode to OS default"
+reset_mode = "Reset mode to default"
 
 # Quick navigation buttons.
 toggle_toc = "Toggle Table of Contents"

i18n/es.toml

@@ -27,7 +27,7 @@ language_selection = "Selección de idioma"
 toggle_mode = "Cambiar a modo $MODE"  # $MODE will be replaced by a value (or both) below.
 dark = "oscuro"
 light = "claro"
-reset_mode = "Restablecer modo a configuración predeterminada del SO"
+reset_mode = "Restablecer modo a configuración predeterminada"
 
 # Quick navigation buttons.
 toggle_toc = "Mostrar/ocultar la tabla de contenidos"

i18n/fr.toml

@@ -31,7 +31,7 @@ language_selection = "Sélection de la langue"
 toggle_mode = "Basculer en mode $MODE"  # $MODE will be replaced by a value (or both) below.
 dark = "sombre"
 light = "clair"
-reset_mode = "Réinitialiser le mode aux paramètres par défaut du système"
+reset_mode = "Réinitialiser le mode aux paramètres par défaut"
 
 # Quick navigation buttons.
 toggle_toc = "Afficher/Masquer la table des matières"

i18n/hi.toml

@@ -29,7 +29,7 @@ language_selection = "भाषा चयन"
 toggle_mode = "$MODE मोड में टॉगल करें"  # $MODE will be replaced by a value (or both) below.
 dark = "अंधेरा"
 light = "रोशनी"
-reset_mode = "मोड को ओएस डिफ़ॉल्ट पर रीसेट करें"
+reset_mode = "मोड को साइट डिफ़ॉल्ट पर रीसेट करें"
 
 # Quick navigation buttons.
 toggle_toc = "विषय-सूची टॉगल करें"

i18n/it.toml

@@ -27,7 +27,7 @@ language_selection = "Selezione della lingua"
 toggle_mode = "Passa alla modalità $MODE"  # $MODE will be replaced by a value (or both) below.
 dark = "scuro"
 light = "chiaro"
-reset_mode = "Reimposta la modalità alle impostazioni predefinite del sistema operativo"
+reset_mode = "Reimposta la modalità alle impostazioni predefinite"
 
 # Quick navigation buttons.
 toggle_toc = "Attiva/Disattiva indice"

i18n/ja.toml

@@ -31,7 +31,7 @@ language_selection = "言語選択"
 toggle_mode = "$MODE モードに切り替え"  # $MODE will be replaced by a value (or both) below.
 dark = "暗い"
 light = "明るい"
-reset_mode = "モードをOSデフォルトにリセット"
+reset_mode = "モードをサイトのデフォルトにリセット"
 
 # Quick navigation buttons.
 toggle_toc = "目次を切り替え"

i18n/ko.toml

@@ -31,7 +31,7 @@ language_selection = "언어 선택"
 toggle_mode = "$MODE 모드로 전환"  # $MODE will be replaced by a value (or both) below.
 dark = "어두운"
 light = "밝은"
-reset_mode = "모드를 OS 기본값으로 재설정"
+reset_mode = "모드를 사이트 기본값으로 재설정"
 
 # Quick navigation buttons.
 toggle_toc = "목차 토글"

i18n/pt-PT.toml

@@ -27,7 +27,7 @@ language_selection = "Seleção de idioma"
 toggle_mode = "Alternar para o modo $MODE"  # $MODE will be replaced by a value (or both) below.
 dark = "escuro"
 light = "claro"
-reset_mode = "Repor o modo para o padrão do SO"
+reset_mode = "Repor o modo para o padrão"
 
 # Quick navigation buttons.
 toggle_toc = "Alternar Índice"

i18n/ru.toml

@@ -27,7 +27,7 @@ language_selection = "Выбор языка"
 toggle_mode = "Переключить на режим $MODE"  # $MODE will be replaced by a value (or both) below.
 dark = "тёмный"
 light = "светлый"
-reset_mode = "Сбросить режим к настройкам ОС по умолчанию"
+reset_mode = "Сбросить режим к стандартным настройкам сайта"
 
 # Quick navigation buttons.
 toggle_toc = "Показать/Скрыть оглавление"

i18n/uk.toml

@@ -31,7 +31,7 @@ language_selection = "Вибір мови"
 toggle_mode = "Перемкнути в режим $MODE"  # $MODE will be replaced by a value (or both) below.
 dark = "темний"
 light = "світлий"
-reset_mode = "Скинути режим до типових параметрів ОС"
+reset_mode = "Скинути режим до типових налаштувань сайту"
 
 # Quick navigation buttons.
 toggle_toc = "Показати/Сховати зміст"

i18n/zh-Hans.toml

@@ -27,7 +27,8 @@ language_selection = "语言选择"  # Machine translated.
 toggle_mode = "切换到$MODE模式"  # $MODE will be replaced by a value (or both) below. Machine translated.
 dark = "暗"  # Machine translated.
 light = "亮"  # Machine translated.
-reset_mode = "重置为操作系统默认模式"  # Machine translated.
+reset_mode = "将模式重置为网站默认值"  # Machine translated.
+
 
 # Quick navigation buttons.
 toggle_toc = "切换目录"  # Machine translated.

i18n/zh-Hant.toml

@@ -27,7 +27,7 @@ language_selection = "語言選擇"  # Machine translated.
 toggle_mode = "切換到$MODE模式"  # $MODE will be replaced by a value (or both) below. Machine translated.
 dark = "暗"  # Machine translated.
 light = "亮"  # Machine translated.
-reset_mode = "重置為操作系統預設模式"  # Machine translated.
+reset_mode = "將模式重置為網站默認值"  # Machine translated.
 
 # Quick navigation buttons.
 toggle_toc = "切換目錄"  # Machine translated.