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

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.
 
+// 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; // Contrast ratio: 4.73:1
+    @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');
+    }
 }