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

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
-:root {
-    --primary-color: #087e96;
+// 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;
+    @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');
+    }
 }
 ```