You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
73 lines
1.3 KiB
73 lines
1.3 KiB
// config/_sx_themes.scss |
|
// steuert das Umschalten zwischen sx-default- und Customer-Design |
|
|
|
@use "sass:map"; |
|
@use "sx_variables"; |
|
@use "cust_variables"; |
|
|
|
$use-customer-theme: false; |
|
|
|
// ================== |
|
// -- Light-Theme -- |
|
// ================== |
|
|
|
$light-theme: sx_variables.$defaults-light; |
|
|
|
@if $use-customer-theme { |
|
$light-theme: map.merge( |
|
$light-theme, |
|
cust_variables.$customer-light |
|
); |
|
} |
|
|
|
// ================= |
|
// -- Dark-Theme -- |
|
// ================= |
|
|
|
$dark-theme: sx_variables.$defaults-dark; |
|
|
|
@if $use-customer-theme { |
|
$dark-theme: map.merge( |
|
$dark-theme, |
|
cust_variables.$customer-dark |
|
); |
|
} |
|
|
|
// ============================ |
|
// -- CSS-Custom-Properties -- |
|
// ============================ |
|
|
|
@mixin css-variables($theme) { |
|
@each $key, $value in $theme { |
|
--sx-#{$key}: #{$value}; |
|
} |
|
} |
|
|
|
// ================= |
|
// -- Light-Mode -- |
|
// ================= |
|
|
|
:root { |
|
color-scheme: light; |
|
|
|
@include css-variables($light-theme); |
|
} |
|
|
|
// ================= |
|
// -- Dark-Mode -- |
|
// ================= |
|
|
|
@media (prefers-color-scheme: dark) { |
|
:root { |
|
color-scheme: dark; |
|
@include css-variables($dark-theme); |
|
} |
|
} |
|
|
|
// =============================== |
|
// -- Zugriff auf Theme-Werte -- |
|
// =============================== |
|
|
|
@function theme($key) { |
|
@return var(--sx-#{$key}); |
|
} |