From a2ea06d513a5802964f8f0ef5795cec7e548ed7b Mon Sep 17 00:00:00 2001 From: Alejandro Soto Date: Sat, 13 Sep 2025 14:55:15 -0600 Subject: Squashed 'themes/tabi-lean/' content from commit 95c8796 git-subtree-dir: themes/tabi-lean git-subtree-split: 95c879696445ede40daa7a30a88dae5dd74d5c0c --- sass/skins/teal.scss | 33 +++++++++++++++++++++++++++++++++ 1 file changed, 33 insertions(+) create mode 100644 sass/skins/teal.scss (limited to 'sass/skins/teal.scss') diff --git a/sass/skins/teal.scss b/sass/skins/teal.scss new file mode 100644 index 0000000..3a1fbcd --- /dev/null +++ b/sass/skins/teal.scss @@ -0,0 +1,33 @@ +// When creating your own skin, you can use https://webaim.org/resources/contrastchecker/ +// to verify the accessibility and readability of your colourscheme. +// 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 { + @include theme-variables('light'); +} + +// Apply dark theme variables when dark theme is explicitly set. +[data-theme='dark'] { + @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'); + } +} -- cgit v1.2.3