From 925278ed7cc0f90da16be3e2cf451dee26e84f4f Mon Sep 17 00:00:00 2001 From: Deimos Date: Mon, 14 Sep 2020 20:28:41 -0600 Subject: [PATCH] Add minimal theme support for old browsers This should allow users with browsers that don't support CSS custom properties to still have some minimal theme support. There will be various issues with the themes (and that's fine), but it will at least set the main colors for their chosen theme. --- tildes/scss/themes/_theme_mixins.scss | 55 +++++++++++++++++++++++++++ 1 file changed, 55 insertions(+) diff --git a/tildes/scss/themes/_theme_mixins.scss b/tildes/scss/themes/_theme_mixins.scss index 7940ebb..2f882e8 100644 --- a/tildes/scss/themes/_theme_mixins.scss +++ b/tildes/scss/themes/_theme_mixins.scss @@ -137,10 +137,65 @@ @return map-merge($default-theme, $new-theme); } +@mixin minimal-hardcoded-theme($theme) { + // Outputs rules with "hardcoded" colors for old browsers with no support for custom + // properties. These rules will be repeated for every theme and will only be used by + // a tiny percentage of users, so something should only be added in here to fix major + // issues - the goal is only to make the themes *usable*, not perfect. + @supports not (--test: green) { + * { + background-color: map-get($theme, "background-primary"); + border-color: map-get($theme, "border"); + color: map-get($theme, "foreground-primary"); + } + + a, + a:hover, + a:visited, + .btn-link, + .nav-item a, + .tab-item { + color: map-get($theme, "link"); + } + + // "&" represents the element itself + &, + #site-header, + #site-header *, + .comment-header, + .comment-header * { + background-color: map-get($theme, "background-secondary"); + } + + input, + input[readonly], + textarea, + textarea[readonly], + .form-select:not([multiple]):not([size]) { + background-color: map-get($theme, "background-input"); + } + + .btn.btn-primary { + color: $light-color; + } + + .text-secondary { + color: map-get($theme, "foreground-secondary"); + } + + // Prevents the * rule from causing a to override its parent + span { + color: inherit; + } + } +} + @mixin use-theme($selected-theme) { $theme: init-theme($selected-theme); $is-light: is-color-bright(map-get($theme, "background-primary")); + @include minimal-hardcoded-theme($theme); + // When creating CSS custom properties and using any of Sass' capabilities // you'll have to interpolate it with the Sass syntax `#{...}` as seen below. --alert: #{map-get($theme, "alert")};