@use "sass:map";
// Takes a map of CSS properties and theme keys (see below) and set both body.light and body.dark selectors.
// ex. @include themes.themed((color: "text", background-color: "background-inner"));
@mixin themed($properties) {
// keep track of the original selector(s) calling this mixin for below
$selectors: #{&};
// add corresponding body.light and body.dark root selectors
@each $theme, $map in $themes {
@at-root body.#{$theme} {
// support theming root body element
@if $selectors == "body" {
@each $property, $color in $properties {
#{$property}: map.get($map, $color);
}
} @else {
#{$selectors} {
@each $property, $color in $properties {
#{$property}: map.get($map, $color);
}
}
}
}
}
}
// ----------------
// Dark & Light Themes
$themes: (
light: (
background-inner: #ffffff,
background-outer: #fcfcfc,
text: #202020,
medium-dark: #515151,
medium: #5e5e5e,
medium-light: #757575,
light: #d2d2d2,
kinda-light: #e3e3e3,
super-light: #f4f4f4,
super-duper-light: #fbfbfb,
links: #0e6dc2,
success: #0b890f,
error: #ff1b1b,
),
dark: (
background-inner: #1e1e1e,
background-outer: #252525,
text: #f1f1f1,
medium-dark: #d7d7d7,
medium: #b1b1b1,
medium-light: #959595,
light: #646464,
kinda-light: #535353,
super-light: #272727,
super-duper-light: #1f1f1f,
links: #88c7ff,
success: #78df55,
error: #ff5151,
),
);
// Icons (modified twemojis)
$icon-bulb-on: '';
$icon-bulb-off: '';