From 89d96b9d7f1f2956609f326127753b05d1614309 Mon Sep 17 00:00:00 2001 From: Lukas Stabe Date: Fri, 2 Oct 2020 02:22:08 +0200 Subject: address feedback --- build.rs | 9 ++++----- data/style.scss | 21 ++++++++++++++++----- src/renderer.rs | 13 +++++++++++-- 3 files changed, 31 insertions(+), 12 deletions(-) diff --git a/build.rs b/build.rs index 3ac300a..a386b41 100644 --- a/build.rs +++ b/build.rs @@ -3,16 +3,15 @@ use std::fs; use std::path::Path; fn main() { - let out_dir = env::var_os("OUT_DIR").unwrap(); + let out_dir = env::var_os("OUT_DIR").expect("out dir env var missing"); let dest_path = Path::new(&out_dir).join("style.css"); fs::write( &dest_path, grass::from_string( include_str!("data/style.scss").to_string(), &grass::Options::default(), - ) - .unwrap(), - ) - .unwrap(); + ).expect("scss failed to compile"), + ).expect("failed to write css file"); + println!("cargo:rerun-if-changed=data/style.scss"); } 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}; } diff --git a/src/renderer.rs b/src/renderer.rs index 61e382e..8b3f922 100644 --- a/src/renderer.rs +++ b/src/renderer.rs @@ -39,7 +39,12 @@ pub fn page( (DOCTYPE) html { (page_header(&title_path, file_upload, favicon_route, css_route)) - body#drop-container.(format!("default_theme_{}", default_color_scheme)).(format!("default_theme_dark_{}", default_color_scheme_dark)) { + + body#drop-container + // Add classes to body selecting default light and dark theme + .(format!("default_theme_{}", default_color_scheme)) + .(format!("default_theme_dark_{}", default_color_scheme_dark)) { + (PreEscaped(r#"