Commit 925278ed authored by Deimos's avatar Deimos

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.
parent cbf77c1d
......@@ -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");
.nav-item a,
.tab-item {
color: map-get($theme, "link");
// "&" represents the <body> element itself
#site-header *,
.comment-header * {
background-color: map-get($theme, "background-secondary");
.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 <span> 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")};
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment