38 lines
1.1 KiB
SCSS
38 lines
1.1 KiB
SCSS
|
@import './light';
|
||
|
|
@import './dark';
|
||
|
|
|
||
|
|
.theme-light {
|
||
|
|
@include theme-light;
|
||
|
|
}
|
||
|
|
|
||
|
|
.theme-dark {
|
||
|
|
@include theme-dark;
|
||
|
|
}
|
||
|
|
|
||
|
|
.theme-auto {
|
||
|
|
@include theme-light;
|
||
|
|
}
|
||
|
|
|
||
|
|
@media (prefers-color-scheme: dark) {
|
||
|
|
.theme-auto {
|
||
|
|
@include theme-dark;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@each $color, $value in $colors {
|
||
|
|
.main-#{$color} {
|
||
|
|
--ui-BG-Main: #{$value};
|
||
|
|
--ui-BG-Main-tag: #{rgba($value, 0.05)};
|
||
|
|
--ui-BG-Main-gradient: #{rgba($value, 0.6)};
|
||
|
|
--ui-BG-Main-light: #{rgba($value, 0.2)};
|
||
|
|
--ui-BG-Main-opacity-1: #{rgba($value, 0.1)};
|
||
|
|
--ui-BG-Main-opacity-4: #{rgba($value, 0.4)};
|
||
|
|
--ui-Main-box-shadow: 0 0.2em 0.5em #{rgba($value, var(--ui-Shadow-opacity))};
|
||
|
|
--ui-BG-Main-1: #{mix(rgba(255, 255, 255, 0.7), desaturate($value, 20%), 10%)};
|
||
|
|
--ui-BG-Main-2: #{mix(rgba(255, 255, 255, 0.6), desaturate($value, 40%), 20%)};
|
||
|
|
--ui-BG-Main-3: #{mix(rgba(119, 119, 119, 0.2), desaturate($value, 40%), 40%)};
|
||
|
|
--ui-BG-Main-4: #{mix(rgba(119, 119, 119, 0.1), desaturate($value, 40%), 60%)};
|
||
|
|
--ui-BG-Main-TC: #ffffff !important;
|
||
|
|
}
|
||
|
|
}
|