@use "sass:map";
@use "sass:string";
@use "sass:list";
@use "settings";
@use "functions" as *;
// Takes a single CSS property and theme key (see abstracts/_themes) and sets
// both body.light and body.dark selectors.
@mixin themed($property, $key, $moreTransitions: "") {
// allow root element (body) theming
$selectors: str-split("#{&}");
// fade colors on theme toggle
$transitions: ();
@each $element in settings.$theme-transition-elements {
$transitions: list.append(
$transitions,
string.unquote(
"#{$element} #{settings.$theme-transition-duration} #{settings.$theme-transition-function}"
)
);
}
@if $moreTransitions != "" {
// HACK: $moreTransitions is passed in and appended here because joining multiple transitions is hard :(
$transitions: list.append($transitions, string.unquote($moreTransitions));
}
@each $selector in $selectors {
@if $selector == "" {
// support root body element
$selector: "body";
}
@at-root #{$selector} {
transition: list.join($transitions, (), $separator: comma);
}
}
// set the actual light/dark properties
@each $theme, $map in $themes {
@each $selector in $selectors {
@at-root body.#{$theme} #{$selector} {
#{$property}: map.get($map, $key);
}
}
}
}
// ----------------
// 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,
),
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,
),
);
// Icons (modified twemojis)
$icon-bulb-on: 'data:image/svg+xml;charset=utf-8,';
$icon-bulb-off: 'data:image/svg+xml;charset=utf-8,';