From 89d96b9d7f1f2956609f326127753b05d1614309 Mon Sep 17 00:00:00 2001 From: Lukas Stabe Date: Fri, 2 Oct 2020 02:22:08 +0200 Subject: address feedback --- data/style.scss | 21 ++++++++++++++++----- 1 file changed, 16 insertions(+), 5 deletions(-) (limited to 'data') diff --git a/data/style.scss b/data/style.scss index 0871632..95bc56f 100644 --- a/data/style.scss +++ b/data/style.scss @@ -1,8 +1,12 @@ @use "sass:selector"; -/* theme colors can be found at the bottom */ +// theme colors can be found at the bottom $themes: squirrel, archlinux, monokai, zenburn; +// This returns a selector that matches body when no theme class is set, +// in which case the default light/dark mode themes should be used. +// The result of this function can be used with #{...} interpolation +// in a selector list. @function body_not_themed() { $s: unquote("body"); @each $t in $themes { @@ -517,6 +521,7 @@ th span.active span { } + @mixin theme_squirrel { --background: #ffffff; --text_color: #323232; @@ -694,6 +699,12 @@ th span.active span { } + +// For each of the themes, define a placeholder selector containing +// the themes variables. Then add selectors for body when the theme: +// - has explicitly been activated by .theme_* +// - is set as default theme by .default_theme_* and no other theme is active +// to the placeholder selector list by means of @extend. @each $theme in $themes { %theme_#{$theme} { @include theme_#{$theme}; } @@ -704,10 +715,10 @@ th span.active span { } } -// this needs to be in a separate loop below the first, -// because dark mode doesn't add to specificity, so -// the dark defaults need to come after the light defaults -// to override them +// Do the same thing again for the dark mode default. +// Since the media query doesn't affect specificity, all dark mode +// defaults need to come after all light mode defaults to override +// them when dark mode is enabled. @each $theme in $themes { @media (prefers-color-scheme: dark) { %theme_dark_#{$theme} { @include theme_#{$theme}; } -- cgit v1.2.3