🐛 fix: improve dark mode and OS theme handling (#380)

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-11-24
+updated = 2024-09-12
 description = "Aprèn a personalitzar tabi fent servir skins i establint un tema per defecte, aconseguint un aspecte únic."
 
 [taxonomies]
@@ -169,12 +169,33 @@ Pots guardar la teva nova skin en qualsevol d'aquests dos directoris:
 Crea un nou arxiu `.scss` (per exemple, `la_teva_skin.scss`) a la ubicació que prefereixis. Aquest arxiu ha de contenir aquestes dues variables (aquesta és la skin predeterminada, "teal"):
 
 ```scss
+// This defines theme-specific variables.
+@mixin theme-variables($theme) {
+    @if $theme =='light' {
+        // Light theme colours.
+        --primary-color: #087e96; // Contrast ratio: 4.73:1
+    }
+    @else if $theme == 'dark' {
+        // Dark theme colours.
+        --primary-color: #91e0ee;  // Contrast ratio: 11.06:1
+    }
+}
+
+// Apply light theme variables by default.
 :root {
-    --primary-color: #087e96;
+    @include theme-variables('light');
 }
 
 [data-theme='dark'] {
-    --primary-color: #91e0ee;
+    @include theme-variables('dark');
+}
+
+// Apply dark theme variables when user's system prefers dark mode
+// and the theme is not explicitly set to light.
+@media (prefers-color-scheme: dark) {
+    :root:not([data-theme='light']) {
+        @include theme-variables('dark');
+    }
 }
 ```
 

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-11-24
+updated = 2024-09-12
 description = "Aprende a personalizar tabi usando skins y estableciendo un tema predeterminado, haciendo que tu sitio sea único."
 
 [taxonomies]
@@ -171,12 +171,34 @@ Puedes guardar tu nueva skin en cualquiera de estos dos directorios:
 Crea un nuevo archivo `.scss` (por ejemplo, `tu_skin.scss`) en la ubicación que prefieras. Este archivo debe contener estas dos variables (esta es la skin predeterminada, "teal"):
 
 ```scss
+// This defines theme-specific variables.
+@mixin theme-variables($theme) {
+    @if $theme =='light' {
+        // Light theme colours.
+        --primary-color: #087e96; // Contrast ratio: 4.73:1
+    }
+    @else if $theme == 'dark' {
+        // Dark theme colours.
+        --primary-color: #91e0ee;  // Contrast ratio: 11.06:1
+    }
+}
+
+// Apply light theme variables by default.
 :root {
-    --primary-color: #087e96;
+    @include theme-variables('light');
 }
 
+// Apply dark theme variables when dark theme is explicitly set.
 [data-theme='dark'] {
-    --primary-color: #91e0ee;
+    @include theme-variables('dark');
+}
+
+// Apply dark theme variables when user's system prefers dark mode
+// and the theme is not explicitly set to light.
+@media (prefers-color-scheme: dark) {
+    :root:not([data-theme='light']) {
+        @include theme-variables('dark');
+    }
 }
 ```
 

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-11-24
+updated = 2024-09-12
 description = "Learn how to customise tabi using skins and setting a default theme, making your site uniquely yours."
 
 [taxonomies]
@@ -180,12 +180,34 @@ You can save your new skin it in either of these two directories:
 Create a new `.scss` file (for example, `your_skin.scss`) in your preferred location. This file needs to have these two variables (this is the default skin, "teal"):
 
 ```scss
+// This defines theme-specific variables.
+@mixin theme-variables($theme) {
+    @if $theme =='light' {
+        // Light theme colours.
+        --primary-color: #087e96; // Contrast ratio: 4.73:1
+    }
+    @else if $theme == 'dark' {
+        // Dark theme colours.
+        --primary-color: #91e0ee;  // Contrast ratio: 11.06:1
+    }
+}
+
+// Apply light theme variables by default.
 :root {
-    --primary-color: #087e96;
+    @include theme-variables('light');
 }
 
+// Apply dark theme variables when dark theme is explicitly set.
 [data-theme='dark'] {
-    --primary-color: #91e0ee;
+    @include theme-variables('dark');
+}
+
+// Apply dark theme variables when user's system prefers dark mode
+// and the theme is not explicitly set to light.
+@media (prefers-color-scheme: dark) {
+    :root:not([data-theme='light']) {
+        @include theme-variables('dark');
+    }
 }
 ```
 

sass/parts/_admonitions.scss

@@ -1,51 +1,26 @@
-.admonition {
+@mixin admonition-type($type) {
-    display: flex;
+    border-color: var(--admonition-#{$type}-border);
-    align-items: flex-start;
+    background-color: var(--admonition-#{$type}-bg);
-    margin: 1em 0;
-    border-left: 6px solid;
-    border-radius: 10px;
-    padding: 0.8rem;
-    color: var(--text-color-high-contrast);
-    font-family: var(--sans-serif-font);
 
-    p {
+    code {
-        margin-bottom: 0;
+        background-color: var(--admonition-#{$type}-code);
-        margin-left: -1.75rem;
-        font-family: inherit;
     }
 
-    a:hover {
+    a {
-        color: var(--hover-color) !important;
+        border-bottom: 1px solid var(--admonition-#{$type}-border);
+        color: var(--admonition-#{$type}-border);
 
-        code {
+        &:hover {
-            color: var(--text-color-high-contrast) !important;
+            background-color: var(--admonition-#{$type}-border);
+            color: var(--hover-color);
         }
     }
-}
 
-.admonition-content {
+    .admonition-icon {
-    flex: 1;
+        background-color: var(--admonition-#{$type}-border);
-    strong {
-        font-weight: 580;
     }
 }
 
-.admonition-icon {
-    display: flex;
-    align-items: center;
-    margin: 0.3rem;
-    background-size: contain;
-    background-repeat: no-repeat;
-    aspect-ratio: 1/1;
-    width: 1.5rem;
-}
-
-.admonition-title {
-    opacity: 0.92;
-    font-weight: bold;
-    font-size: 0.82rem;
-}
-
 :root {
     /* Note */
     --admonition-note-border: #5b6167;
@@ -73,7 +48,7 @@
     --admonition-danger-code: #fcc1c5;
 }
 
-[data-theme='dark'] {
+@mixin dark-theme-variables {
     /* Note */
     --admonition-note-border: #d0d1d4;
     --admonition-note-bg: #3d3e40;
@@ -100,96 +75,63 @@
     --admonition-danger-code: #8c2e00;
 }
 
-.admonition.note {
+[data-theme='dark'] {
-    border-color: var(--admonition-note-border);
+    @include dark-theme-variables;
-    background-color: var(--admonition-note-bg);
-
-    code {
-        background-color: var(--admonition-note-code) !important;
-    }
-
-    a {
-        border-bottom: 1px solid var(--admonition-note-border);
-        color: var(--admonition-note-border);
-
-        &:hover {
-            background-color: var(--admonition-note-border);
-        }
-    }
 }
 
-.admonition.tip {
+@media (prefers-color-scheme: dark) {
-    border-color: var(--admonition-tip-border);
+    :root:not([data-theme='light']) {
-    background-color: var(--admonition-tip-bg);
+        @include dark-theme-variables;
-
-    code {
-        background-color: var(--admonition-tip-code) !important;
-    }
-
-    a {
-        border-bottom: 1px solid var(--admonition-tip-border);
-        color: var(--admonition-tip-border);
-
-        &:hover {
-            background-color: var(--admonition-tip-border);
-        }
     }
 }
 
-.admonition.info {
+.admonition {
-    border-color: var(--admonition-info-border);
+    display: flex;
-    background-color: var(--admonition-info-bg);
+    align-items: flex-start;
+    margin: 1em 0;
+    border-left: 6px solid;
+    border-radius: 10px;
+    padding: 0.8rem;
+    color: var(--text-color-high-contrast);
+    font-family: var(--sans-serif-font);
 
-    code {
+    p {
-        background-color: var(--admonition-info-code) !important;
+        margin-bottom: 0;
+        margin-left: -1.75rem;
+        font-family: inherit;
     }
 
     a {
-        border-bottom: 1px solid var(--admonition-info-border);
-        color: var(--admonition-info-border);
-
-        &:hover {
-            background-color: var(--admonition-info-border);
-        }
-    }
-}
-
-.admonition.warning {
-    border-color: var(--admonition-warning-border);
-    background-color: var(--admonition-warning-bg);
-
         code {
-        background-color: var(--admonition-warning-code) !important;
+            color: inherit;
-    }
-
-    a {
-        border-bottom: 1px solid var(--admonition-warning-border);
-        color: var(--admonition-warning-border);
-
-        &:hover {
-            background-color: var(--admonition-warning-border);
         }
     }
 }
 
-.admonition.danger {
+.admonition-content {
-    border-color: var(--admonition-danger-border);
+    flex: 1;
-    background-color: var(--admonition-danger-bg);
+    strong {
-
+        font-weight: 580;
-    code {
-        background-color: var(--admonition-danger-code) !important;
     }
+}
 
-    a {
+.admonition-icon {
-        border-bottom: 1px solid var(--admonition-danger-border);
+    display: flex;
-        color: var(--admonition-danger-border);
+    align-items: center;
+    margin: 0.3rem;
+    background-size: contain;
+    background-repeat: no-repeat;
+    aspect-ratio: 1/1;
+    width: 1.5rem;
+}
 
-        &:hover {
+.admonition-title {
-            background-color: var(--admonition-danger-border);
+    opacity: 0.92;
-        }
+    font-weight: bold;
-    }
+    font-size: 0.82rem;
 }
 
+
 .admonition-icon-note {
     -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960' %3E%3Cpath d='M440-280h80v-240h-80v240Zm40-320q17 0 28.5-11.5T520-640q0-17-11.5-28.5T480-680q-17 0-28.5 11.5T440-640q0 17 11.5 28.5T480-600Zm0 520q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z'/%3E%3C/svg%3E");
 }
@@ -210,23 +152,8 @@
     -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960' %3E%3Cpath d='M239.256-400q0 58.091 27.975 108.995t76.13 81.237q-5.616-8.513-8.487-18.398-2.872-9.885-2.872-19.167 1.333-26.436 12.153-50.307 10.821-23.872 31.41-43.461L480-443.921l105.819 102.82q18.923 19.311 29.885 43.321 10.961 24.011 12.294 50.447 0 9.282-2.872 19.167-2.871 9.885-7.82 18.398 47.488-30.333 75.796-81.237Q721.41-341.909 721.41-400q0-47.622-19.258-93.169-19.259-45.547-53.998-82.549-19.951 13.41-42.202 19.859Q583.7-549.41 561-549.41q-62.448 0-105.108-38.039-42.661-38.038-51.225-98.628v-9.744q-39.385 31.949-69.898 67.68-30.513 35.73-51.987 74.166t-32.5 77.464Q239.256-437.483 239.256-400ZM480-349.539l-57.436 56.436q-12.154 11.821-17.731 26.029-5.577 14.208-5.577 29.074 0 32.769 23.498 55.757 23.497 22.987 57.246 22.987 33.432 0 57.421-22.906 23.989-22.906 23.989-55.561 0-16.162-6.116-30.162-6.116-13.999-17.454-25.154l-57.84-56.5Zm-11.002-469.022V-708q0 38.637 26.832 64.819 26.831 26.183 65.17 26.183 15.609 0 30.818-5.923 15.208-5.923 28.131-17.718l22.615-24.102q67.564 44.128 106.999 114.917 39.435 70.79 39.435 150.156 0 128.206-89.846 218.103Q609.307-91.668 480-91.668q-129.027 0-218.68-89.652-89.652-89.653-89.652-218.68 0-119.178 79.371-232.447t217.959-186.114Z'/%3E%3C/svg%3E");
 }
 
-/* Admonition type styles */
+.admonition.note { @include admonition-type('note'); }
-.admonition.note .admonition-icon {
+.admonition.tip { @include admonition-type('tip'); }
-    background-color: var(--admonition-note-border);
+.admonition.info { @include admonition-type('info'); }
-}
+.admonition.warning { @include admonition-type('warning'); }
-
+.admonition.danger { @include admonition-type('danger'); }
-.admonition.tip .admonition-icon {
-    background-color: var(--admonition-tip-border);
-}
-
-.admonition.info .admonition-icon {
-    background-color: var(--admonition-info-border);
-}
-
-.admonition.warning .admonition-icon {
-    background-color: var(--admonition-warning-border);
-}
-
-.admonition.danger .admonition-icon {
-    background-color: var(--admonition-danger-border);
-}

sass/parts/_footer.scss

@@ -66,7 +66,7 @@ footer nav {
     }
 }
 
-[data-theme="dark"] {
+@mixin dark-theme-social {
     .social {
         &:hover {
             & > img {
@@ -79,3 +79,13 @@ footer nav {
         }
     }
 }
+
+[data-theme="dark"] {
+    @include dark-theme-social;
+}
+
+@media (prefers-color-scheme: dark) {
+    :root:not([data-theme="light"]) {
+        @include dark-theme-social;
+    }
+}

sass/skins/blue.scss

@@ -1,7 +1,22 @@
-:root {
+@mixin theme-variables($theme) {
+    @if $theme =='light' {
         --primary-color: #3271E7; // Contrast ratio: 4.51:1
+    }
+    @else if $theme == 'dark' {
+        --primary-color: #6cacff; // Contrast ratio: 7.05:1
+    }
+}
+
+:root {
+    @include theme-variables('light');
 }
 
 [data-theme='dark'] {
-    --primary-color: #6cacff; // Contrast ratio: 7.05:1
+    @include theme-variables('dark');
+}
+
+@media (prefers-color-scheme: dark) {
+    :root:not([data-theme='light']) {
+        @include theme-variables('dark');
+    }
 }

sass/skins/evangelion.scss

@@ -1,9 +1,24 @@
-// Evangelion Unit-02.
+@mixin theme-variables($theme) {
-:root {
+    @if $theme =='light' {
+        // Evangelion Unit-02.
         --primary-color: #d12e36;  // Contrast ratio: 5.05:1
+    }
+    @else if $theme == 'dark' {
+        // Evangelion Unit-01.
+        --primary-color: #c09bd9;  // Contrast ratio: 7.01:1
+    }
+}
+
+:root {
+    @include theme-variables('light');
 }
 
-// Evangelion Unit-01.
 [data-theme='dark'] {
-    --primary-color: #c09bd9;  // Contrast
+    @include theme-variables('dark');
+}
+
+@media (prefers-color-scheme: dark) {
+    :root:not([data-theme='light']) {
+        @include theme-variables('dark');
+    }
 }

sass/skins/indigo_ingot.scss

@@ -1,7 +1,22 @@
-:root {
+@mixin theme-variables($theme) {
+    @if $theme =='light' {
         --primary-color: #1460bd; // Contrast ratio: 6.1:1
+    }
+    @else if $theme == 'dark' {
+        --primary-color: #e6c212; // Contrast ratio: 9.48:1
+    }
+}
+
+:root {
+    @include theme-variables('light');
 }
 
 [data-theme='dark'] {
-    --primary-color: #e6c212; // Contrast ratio: 9.48:1
+    @include theme-variables('dark');
+}
+
+@media (prefers-color-scheme: dark) {
+    :root:not([data-theme='light']) {
+        @include theme-variables('dark');
+    }
 }

sass/skins/lavender.scss

@@ -1,7 +1,22 @@
-:root {
+@mixin theme-variables($theme) {
+    @if $theme =='light' {
         --primary-color: #9055d8;  // Contrast ratio: 4.69:1
+    }
+    @else if $theme == 'dark' {
+        --primary-color: #cba2e8;  // Contrast ratio: 7.74:1
+    }
+}
+
+:root {
+    @include theme-variables('light');
 }
 
 [data-theme='dark'] {
-    --primary-color: #cba2e8;  // Contrast ratio: 7.74:1
+    @include theme-variables('dark');
+}
+
+@media (prefers-color-scheme: dark) {
+    :root:not([data-theme='light']) {
+        @include theme-variables('dark');
+    }
 }

sass/skins/lowcontrast_orange.scss

@@ -2,11 +2,25 @@
 // and might not be suitable for users with certain types of visual impairment.
 // Furthermore, low contrast will affect your Google Lighthouse rating.
 // For more information on web accessibility: https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html
+@mixin theme-variables($theme) {
+    @if $theme =='light' {
+        --primary-color: #f56a00; // Contrast ratio: 3.02:1. Not very accessible.
+    }
+    @else if $theme == 'dark' {
+        --primary-color: #ec984f; // Contrast ratio: 7.19:1. Accessible.
+    }
+}
 
 :root {
-    --primary-color: #f56a00; // Contrast ratio: 3.02:1. Not very accessible.
+    @include theme-variables('light');
 }
 
 [data-theme='dark'] {
-    --primary-color: #ec984f; // Contrast ratio: 7.19:1. Accessible.
+    @include theme-variables('dark');
+}
+
+@media (prefers-color-scheme: dark) {
+    :root:not([data-theme='light']) {
+        @include theme-variables('dark');
+    }
 }

sass/skins/lowcontrast_peach.scss

@@ -2,11 +2,25 @@
 // and might not be suitable for users with certain types of visual impairment.
 // Furthermore, low contrast will affect your Google Lighthouse rating.
 // For more information on web accessibility: https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html
+@mixin theme-variables($theme) {
+    @if $theme =='light' {
+        --primary-color: #ffa057; // Contrast ratio: 2.01:1. Not very accessible.
+    }
+    @else if $theme == 'dark' {
+        --primary-color: #ffab7f; // Contrast ratio: 8.93:1. Accessible.
+    }
+}
 
 :root {
-    --primary-color: #ffa057; // Contrast ratio: 2.01:1. Not very accessible.
+    @include theme-variables('light');
 }
 
 [data-theme='dark'] {
-    --primary-color: #ffab7f; // Contrast ratio: 8.93:1. Accessible.
+    @include theme-variables('dark');
+}
+
+@media (prefers-color-scheme: dark) {
+    :root:not([data-theme='light']) {
+        @include theme-variables('dark');
+    }
 }

sass/skins/lowcontrast_pink.scss

@@ -2,11 +2,25 @@
 // and might not be suitable for users with certain types of visual impairment.
 // Furthermore, low contrast will affect your Google Lighthouse rating.
 // For more information on web accessibility: https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html
+@mixin theme-variables($theme) {
+    @if $theme =='light' {
+        --primary-color: #ee59d2; // Contrast ratio: 3:1. Not very accessible.
+    }
+    @else if $theme == 'dark' {
+        --primary-color: #f49ee9; // Contrast ratio: 9.87:1. Accessible.
+    }
+}
 
 :root {
-    --primary-color: #ee59d2; // Contrast ratio: 3:1. Not very accessible.
+    @include theme-variables('light');
 }
 
 [data-theme='dark'] {
-    --primary-color: #f49ee9; // Contrast ratio: 9.87:1. Accessible.
+    @include theme-variables('dark');
+}
+
+@media (prefers-color-scheme: dark) {
+    :root:not([data-theme='light']) {
+        @include theme-variables('dark');
+    }
 }

sass/skins/mint.scss

@@ -1,7 +1,22 @@
-:root {
+@mixin theme-variables($theme) {
+    @if $theme =='light' {
         --primary-color: #00804d;  // Contrast ratio: 5:1
+    }
+    @else if $theme == 'dark' {
+        --primary-color: #00b86e;  // Contrast ratio: 6.34:1
+    }
+}
+
+:root {
+    @include theme-variables('light');
 }
 
 [data-theme='dark'] {
-    --primary-color: #00b86e;  // Contrast ratio: 6.34:1
+    @include theme-variables('dark');
+}
+
+@media (prefers-color-scheme: dark) {
+    :root:not([data-theme='light']) {
+        @include theme-variables('dark');
+    }
 }

sass/skins/monochrome.scss

@@ -1,7 +1,22 @@
-:root {
+@mixin theme-variables($theme) {
+    @if $theme =='light' {
         --primary-color: #727272;  // Contrast ratio: 4.81:1
+    }
+    @else if $theme == 'dark' {
+        --primary-color: #b3b3b3;  // Contrast ratio: 7.86:1
+    }
+}
+
+:root {
+    @include theme-variables('light');
 }
 
 [data-theme='dark'] {
-    --primary-color: #b3b3b3;  // Contrast ratio: 7.86:1
+    @include theme-variables('dark');
+}
+
+@media (prefers-color-scheme: dark) {
+    :root:not([data-theme='light']) {
+        @include theme-variables('dark');
+    }
 }

sass/skins/red.scss

@@ -1,7 +1,22 @@
-:root {
+@mixin theme-variables($theme) {
+    @if $theme =='light' {
         --primary-color: #ca4963; // Contrast ratio: 4.52:1.
+    }
+    @else if $theme == 'dark' {
+        --primary-color: #ea535f; // Contrast ratio: 4.63:1.
+    }
+}
+
+:root {
+    @include theme-variables('light');
 }
 
 [data-theme='dark'] {
-    --primary-color: #ea535f; // Contrast ratio: 4.63:1.
+    @include theme-variables('dark');
+}
+
+@media (prefers-color-scheme: dark) {
+    :root:not([data-theme='light']) {
+        @include theme-variables('dark');
+    }
 }

sass/skins/sakura.scss

@@ -1,7 +1,22 @@
-:root {
+@mixin theme-variables($theme) {
+    @if $theme =='light' {
         --primary-color: #D33C5C;  // Contrast ratio: 4.61:1
+    }
+    @else if $theme == 'dark' {
+        --primary-color: #fabed2;  // Contrast ratio: 10.48:1
+    }
+}
+
+:root {
+    @include theme-variables('light');
 }
 
 [data-theme='dark'] {
-    --primary-color: #fabed2;  // Contrast ratio: 10.48:1
+    @include theme-variables('dark');
+}
+
+@media (prefers-color-scheme: dark) {
+    :root:not([data-theme='light']) {
+        @include theme-variables('dark');
+    }
 }

sass/skins/teal.scss

@@ -1,12 +1,33 @@
-// This file is never loaded; it's serves as reference for the default skin (in main.scss).
 // When creating your own skin, you can use https://webaim.org/resources/contrastchecker/
 // to verify the accessibility and readability of your colourscheme.
-// The light background is #fff and the dark background is #1f1f1f.
+// The default light background is #fff and the dark background is #1f1f1f.
 
-:root {
+// This defines theme-specific variables.
+@mixin theme-variables($theme) {
+    @if $theme =='light' {
+        // Light theme colours.
         --primary-color: #087e96; // Contrast ratio: 4.73:1
+    }
+    @else if $theme == 'dark' {
+        // Dark theme colours.
+        --primary-color: #91e0ee;  // Contrast ratio: 11.06:1
+    }
+}
+
+// Apply light theme variables by default.
+:root {
+    @include theme-variables('light');
 }
 
+// Apply dark theme variables when dark theme is explicitly set.
 [data-theme='dark'] {
-    --primary-color: #91e0ee;  // Contrast ratio: 11.06:1
+    @include theme-variables('dark');
+}
+
+// Apply dark theme variables when user's system prefers dark mode
+// and the theme is not explicitly set to light.
+@media (prefers-color-scheme: dark) {
+    :root:not([data-theme='light']) {
+        @include theme-variables('dark');
+    }
 }