✨ feat: allow setting default theme

welpo · Aug 7, 2023 · 42293b2 · 42293b2
2 parents 113a7f4 + c78c7f5
commit 42293b2
Show file tree

Hide file tree

Showing 10 changed files with 36 additions and 25 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/content/blog/markdown.ca.md b/content/blog/markdown.ca.md
@@ -1,7 +1,7 @@
 +++
 title = "Exemples de Markdown"
 date = 2023-01-31
-updated = 2023-08-02
+updated = 2023-08-06
 description = "Aquesta publicació mostra alguns exemples de format en Markdown, incloent-hi una taula, blocs de codi i etiquetes, citacions, taules i notes a peu de pàgina."
 
 [taxonomies]
@@ -67,7 +67,7 @@ A Rust, declares una variable mutable amb `let mut x = 5;`, mentre que a Python,
 
 ## Quote
 
-> "La vida, perquè sigui vida, s'ha de viure a poc a poc…"
+> «La vida, perquè sigui vida, s'ha de viure a poc a poc…»
 >
 > — Mercè Rodoreda, La plaça del Diamant
 

diff --git a/content/blog/markdown.es.md b/content/blog/markdown.es.md
@@ -1,7 +1,7 @@
 +++
 title = "Ejemplos de Markdown"
 date = 2023-01-31
-updated = 2023-08-02
+updated = 2023-08-06
 description = "Esta publicación muestra algunos ejemplos de formato Markdown, incluyendo una tabla, bloques de código y etiquetas, citas, tablas y notas al pie de página."
 
 [taxonomies]
@@ -67,7 +67,7 @@ En Rust, declaras una variable mutable con `let mut x = 5;`, mientras que en Pyt
 
 ## Cita
 
-> "A mí me sobra el cuerpo, Orfeo, me sobra el cuerpo porque me falta alma."
+> «A mí me sobra el cuerpo, Orfeo, me sobra el cuerpo porque me falta alma.»
 >
 > — Miguel de Unamuno, Niebla
 

diff --git a/sass/main.scss b/sass/main.scss
@@ -60,11 +60,9 @@
     --bg-3: #d8dcdd;
     --hover-color: white;
     --primary-color: #087E96;
-    --primary-color-dark: #10668b;
     --divider-color: #d7d7d7;
     --text-color: #222226;
     --text-color-high-contrast: #313333;
-    --quote-color: #355f62;
     --border-color: #727272;
     --meta-color: #5b5b65;
     --codeblock-bg: #272430;
@@ -81,11 +79,9 @@
     --bg-3: #535555;
     --hover-color: black;
     --primary-color: #91e0ee;
-    --primary-color-dark: #69bace;
     --divider-color: #4a4a4a;
     --text-color: #D4D4D4;
     --text-color-high-contrast: #eceeef;
-    --quote-color: #a9c5c7;
     --border-color: black;
     --meta-color: #B0B0B0;
     --codeblock-bg: #151515;

diff --git a/sass/parts/_misc.scss b/sass/parts/_misc.scss
@@ -71,8 +71,7 @@ hr {
 }
 
 blockquote {
-    border-left: 0.2rem solid var(--primary-color);
-    color: var(--quote-color);
+    border-left: 0.3rem solid var(--primary-color);
     margin: 0;
     padding-left: 1em;
 }
@@ -149,9 +148,8 @@ hr {
 }
 
 .info-box {
-    border: 1px solid #087E96;
+    border: 1px solid var(--primary-color);
     border-left-width: 0.3rem;
-    background-color: #d1f3f8;
     padding: 1rem;
     margin-top: 1rem;
     margin-bottom: 1rem;

diff --git a/static/isso.css b/static/isso.css
@@ -256,7 +256,7 @@ h4.isso-thread-heading {
 }
 
 .isso-post-action > input:hover {
-    background-color: var(--primary-color-dark);
+    opacity: 0.8;
 }
 
 /* ========================================================================== */

diff --git a/static/isso.min.css b/static/isso.min.css
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/templates/partials/header.html b/templates/partials/header.html
@@ -71,12 +71,12 @@
     <meta http-equiv="Content-Security-Policy"
     content="default-src 'self'
     {%- if config.extra.allowed_domains -%}
-    ; 
-        {# Check if a comment system is enabled to allow the necessary domains and directives #}
-        {% set utterances_enabled = config.extra.utterances.enabled_for_all_posts or page.extra.utterances %}
-        {% set giscus_enabled = config.extra.giscus.enabled_for_all_posts or page.extra.giscus %}
-        {% set hyvortalk_enabled = config.extra.hyvortalk.enabled_for_all_posts or page.extra.hyvortalk %}
-        {% set isso_enabled = config.extra.isso.enabled_for_all_posts or page.extra.isso %}
+    ;
+        {#- Check if a comment system is enabled to allow the necessary domains and directives -#}
+        {%- set utterances_enabled = config.extra.utterances.enabled_for_all_posts or page.extra.utterances -%}
+        {%- set giscus_enabled = config.extra.giscus.enabled_for_all_posts or page.extra.giscus -%}
+        {%- set hyvortalk_enabled = config.extra.hyvortalk.enabled_for_all_posts or page.extra.hyvortalk -%}
+        {%- set isso_enabled = config.extra.isso.enabled_for_all_posts or page.extra.isso -%}
 
         {% if hyvortalk_enabled %}
             connect-src talk.hyvor.com;

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