diff options
| -rw-r--r-- | build.rs | 9 | ||||
| -rw-r--r-- | data/style.scss | 21 | ||||
| -rw-r--r-- | src/renderer.rs | 13 |
3 files changed, 31 insertions, 12 deletions
@@ -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#" <script> const body = document.body; @@ -469,7 +474,11 @@ pub fn render_error( (DOCTYPE) html { (page_header(&error_code.to_string(), false, favicon_route, css_route)) - body.(format!("default_theme_{}", default_color_scheme)).(format!("default_theme_dark_{}", default_color_scheme_dark)) { + + // Add classes to body selecting default light and dark theme + body.(format!("default_theme_{}", default_color_scheme)) + .(format!("default_theme_dark_{}", default_color_scheme_dark)) { + div.error { p { (error_code.to_string()) } @for error in error_description.lines() { |