diff options
| -rw-r--r-- | data/style.scss | 21 | ||||
| -rw-r--r-- | src/renderer.rs | 64 |
2 files changed, 41 insertions, 44 deletions
diff --git a/data/style.scss b/data/style.scss index 909dc6f..6c0d284 100644 --- a/data/style.scss +++ b/data/style.scss @@ -199,15 +199,6 @@ nav .theme li a:hover { color: var(--change_theme_link_color_hover); } -%active_theme_link { - font-weight: bold; - color: var(--switch_theme_active); -} - -body:not([data-theme]) nav .theme li[data-theme="default"] a { - @extend %active_theme_link; -} - p { margin: 0; padding: 0; @@ -572,9 +563,21 @@ th span.active span { } } +%active_theme_link { + font-weight: bold; + color: var(--switch_theme_active); +} + +// when no specific theme is applied, highlight the `default` theme button in +// the theme menu +body:not([data-theme]) nav .theme li[data-theme="default"] a { + @extend %active_theme_link; +} + @each $theme in $themes { body[data-theme="#{$theme}"] { @include theme($theme); + // highlight the currently active theme in the theme selection menu nav .theme li[data-theme="#{$theme}"] a { @extend %active_theme_link; } diff --git a/src/renderer.rs b/src/renderer.rs index 946089d..699a01f 100644 --- a/src/renderer.rs +++ b/src/renderer.rs @@ -57,28 +57,6 @@ pub fn page( body #drop-container { - - (PreEscaped(r#" - <script> - // read theme from local storage and apply it to body - const body = document.body; - var theme = localStorage.getItem('theme'); - updateColorScheme(theme) - - // updates the color scheme by replacing the appropriate class - // on body and saving the new theme to local storage - function updateColorScheme(name) { - if (name && name != "default") { - body.setAttribute("data-theme", name) - } else { - body.removeAttribute("data-theme") - } - - localStorage.setItem('theme', name); - } - </script> - "#)) - div.toolbar_box_group { @if conf.file_upload { div.form { @@ -604,6 +582,33 @@ fn page_header(title: &str, file_upload: bool, favicon_route: &str, css_route: & title { (title) } + (PreEscaped(r#" + <script> + // updates the color scheme by setting the theme data attribute + // on body and saving the new theme to local storage + function updateColorScheme(name) { + if (name && name != "default") { + localStorage.setItem('theme', name); + document.body.setAttribute("data-theme", name) + } else { + localStorage.removeItem('theme'); + document.body.removeAttribute("data-theme") + } + } + + // read theme from local storage and apply it to body + function loadColorScheme() { + var name = localStorage.getItem('theme'); + updateColorScheme(name); + } + + // load saved theme on page load + addEventListener("load", loadColorScheme); + // load saved theme when local storage is changed (synchronize between tabs) + addEventListener("storage", loadColorScheme); + </script> + "#)) + @if file_upload { (PreEscaped(r#" <script> @@ -672,19 +677,8 @@ pub fn render_error( html { (page_header(&error_code.to_string(), false, &conf.favicon_route, &conf.css_route)) - body.(format!("default_theme_{}", conf.default_color_scheme)) - .(format!("default_theme_dark_{}", conf.default_color_scheme_dark)) { - - (PreEscaped(r#" - <script> - // read theme from local storage and apply it to body - var theme = localStorage.getItem('theme'); - if (theme && theme != "default") { - body.setAttribute("data-theme", name) - } - </script> - "#)) - + body + { div.error { p { (error_code.to_string()) } @for error in error_description.lines() { |