2025-01-15 14:42:01 +02:00
|
|
|
/* Keep class names in sync with ThemeService */
|
2025-02-28 16:16:46 +02:00
|
|
|
$dark-theme-class: 'dark-theme';
|
|
|
|
|
$light-theme-class: 'light-theme';
|
2025-01-15 14:42:01 +02:00
|
|
|
|
|
|
|
|
/* $browser expects 'chrome', 'firefox' or 'safari' */
|
|
|
|
|
@mixin _theme($theme, $browser: '') {
|
|
|
|
|
@if $browser == '' {
|
2025-02-28 16:16:46 +02:00
|
|
|
:host-context(:root.#{$theme}) {
|
2025-01-15 14:42:01 +02:00
|
|
|
@content;
|
|
|
|
|
}
|
|
|
|
|
} @else {
|
|
|
|
|
/* Keep browser class name in sync with BrowserService. */
|
|
|
|
|
$browser-class: $browser + '-ui';
|
2025-02-28 16:16:46 +02:00
|
|
|
:host-context(:root.#{$theme}.#{$browser-class}) {
|
2025-01-15 14:42:01 +02:00
|
|
|
@content;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@mixin dark-theme($browser: '') {
|
2025-02-28 16:16:46 +02:00
|
|
|
@include _theme($dark-theme-class, $browser) {
|
2025-01-15 14:42:01 +02:00
|
|
|
@content;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@mixin light-theme($browser: '') {
|
2025-02-28 16:16:46 +02:00
|
|
|
@include _theme($light-theme-class, $browser) {
|
2025-01-15 14:42:01 +02:00
|
|
|
@content;
|
|
|
|
|
}
|
|
|
|
|
}
|