48 lines
1.4 KiB
SCSS
48 lines
1.4 KiB
SCSS
@use "sass:list";
|
|
@use "sass:selector";
|
|
$font-main: "Lato", sans-serif;
|
|
|
|
@mixin theme($isDark) {
|
|
$root-selectors: ();
|
|
/* Satisfy both vitepress (docs) and funkwhale (front) convention */
|
|
/* Also note the strong (triple) force which satisfies the CSS gods very much (enough) */
|
|
$root-element: ":is(body.theme-dark, html.dark>body:not(.theme-light)), .force-dark-theme.force-dark-theme.force-dark-theme";
|
|
|
|
@if $isDark == false {
|
|
$root-element: ":is(body.theme-light, html:not(.dark)>body:not(.theme-dark)), .force-light-theme.force-light-theme.force-light-theme";
|
|
}
|
|
|
|
// If we call `@include dark-theme {}` at the root of the file
|
|
@if & == null {
|
|
$root-selectors: list.append($root-selectors, $root-element);
|
|
} @else {
|
|
// For every selector in selector list
|
|
@each $selector in & {
|
|
// If it is `html`, we add a root rule
|
|
@if #{$selector} == ":root" or #{$selector} == "html" {
|
|
$root-selectors: list.append($root-selectors, $root-element, comma);
|
|
// If it's any other rule, we append it to the root rule
|
|
} @else {
|
|
$root-selectors: list.append($root-selectors, "#{selector.nest($root-element, $selector)}", comma);
|
|
}
|
|
}
|
|
|
|
// @debug $root-selectors;
|
|
@at-root #{$root-selectors} {
|
|
@content
|
|
}
|
|
}
|
|
}
|
|
|
|
@mixin light-theme {
|
|
@include theme(false) {
|
|
@content
|
|
}
|
|
}
|
|
|
|
@mixin dark-theme {
|
|
@include theme(true) {
|
|
@content
|
|
}
|
|
}
|