prehistoric-systems/Gitako
1
1
Fork 0
mirror of https://github.com/EnixCoda/Gitako.git synced 2026-03-11 08:54:44 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

refactor: reduce output CSS size

Browse source
This commit is contained in:
EnixCoda 2021-04-03 10:16:19 +08:00
parent a1394d9e10
commit 56c9ed579c
No known key found for this signature in database
GPG key ID: 0C1A07377913A1DD
1 changed files with 33 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

48
src/styles/themes.scss
View file

@ -8,35 +8,53 @@
}
}
@mixin bindTheme($name) {
&[data-#{$name}-theme='light'] {
// Following rules are organized according to common variables to reduce output CSS size
:root, // default
:root {
&[data-color-mode='light'][data-light-theme='light'],
&[data-color-mode='dark'][data-dark-theme='light'] {
@include setVariables(light.$variables);
}
&[data-#{$name}-theme='dark'] {
&[data-color-mode='light'][data-light-theme='dark'],
&[data-color-mode='dark'][data-dark-theme='dark'] {
@include setVariables(dark.$variables);
}
&[data-#{$name}-theme='dark_dimmed'] {
&[data-color-mode='light'][data-light-theme='dark_dimmed'],
&[data-color-mode='dark'][data-dark-theme='dark_dimmed'] {
@include setVariables(darkDimmed.$variables);
}
}
:root, // default
:root[data-color-mode='light'] {
@include bindTheme('light');
}
:root[data-color-mode='dark'] {
@include bindTheme('dark');
}
@media (prefers-color-scheme: light) {
:root[data-color-mode='auto'] {
@include bindTheme('light');
&[data-light-theme='light'] {
@include setVariables(light.$variables);
}
&[data-light-theme='dark'] {
@include setVariables(dark.$variables);
}
&[data-light-theme='dark_dimmed'] {
@include setVariables(darkDimmed.$variables);
}
}
}
@media (prefers-color-scheme: dark) {
:root[data-color-mode='auto'] {
@include bindTheme('dark');
&[data-dark-theme='light'] {
@include setVariables(light.$variables);
}
&[data-dark-theme='dark'] {
@include setVariables(dark.$variables);
}
&[data-dark-theme='dark_dimmed'] {
@include setVariables(darkDimmed.$variables);
}
}
}