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: simplify themes generator

Browse source
This commit is contained in:
EnixCoda 2021-11-01 16:38:01 +08:00
parent 1ab96a12de
commit 3904da736a
1 changed files with 22 additions and 81 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

103
src/styles/themes.scss
View file

@ -11,7 +11,6 @@
}
}
// Following rules are organized according to common variables to reduce output CSS size
:root {
// default, e.g. when not login
@include setVariables(light.$variables);
@ -24,90 +23,32 @@
--gitako-bg-subtle: var(--gitako-canvas-subtle);
}
:root {
&[data-color-mode='light'][data-light-theme='light'],
&[data-color-mode='dark'][data-dark-theme='light'] {
@include setVariables(light.$variables);
}
&[data-color-mode='light'][data-light-theme='dark'],
&[data-color-mode='dark'][data-dark-theme='dark'] {
@include setVariables(dark.$variables);
}
&[data-color-mode='light'][data-light-theme='dark_dimmed'],
&[data-color-mode='dark'][data-dark-theme='dark_dimmed'] {
@include setVariables(darkDimmed.$variables);
}
&[data-color-mode='light'][data-light-theme='dark_high_contrast'],
&[data-color-mode='dark'][data-dark-theme='dark_high_contrast'] {
@include setVariables(darkHighContrast.$variables);
}
&[data-color-mode='light'][data-light-theme='dark_colorblind'],
&[data-color-mode='dark'][data-dark-theme='dark_colorblind'] {
@include setVariables(darkColorblind.$variables);
}
&[data-color-mode='light'][data-light-theme='light_colorblind'],
&[data-color-mode='dark'][data-dark-theme='light_colorblind'] {
@include setVariables(lightColorblind.$variables);
}
}
@media (prefers-color-scheme: light) {
:root[data-color-mode='auto'] {
&[data-light-theme='light'] {
@include setVariables(light.$variables);
@mixin theme($themeName, $variables) {
:root {
&[data-color-mode='light'][data-light-theme='#{$themeName}'],
&[data-color-mode='dark'][data-dark-theme='#{$themeName}'] {
@include setVariables($variables);
}
&[data-light-theme='dark'] {
@include setVariables(dark.$variables);
}
&[data-color-mode='auto'] {
&[data-light-theme='#{$themeName}'] {
@media (prefers-color-scheme: light) {
@include setVariables($variables);
}
}
&[data-light-theme='dark_dimmed'] {
@include setVariables(darkDimmed.$variables);
}
&[data-light-theme='dark_high_contrast'] {
@include setVariables(darkHighContrast.$variables);
}
&[data-light-theme='dark_colorblind'] {
@include setVariables(darkColorblind.$variables);
}
&[data-light-theme='light_colorblind'] {
@include setVariables(lightColorblind.$variables);
&[data-dark-theme='#{$themeName}'] {
@media (prefers-color-scheme: dark) {
@include setVariables($variables);
}
}
}
}
}
@media (prefers-color-scheme: dark) {
:root[data-color-mode='auto'] {
&[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);
}
&[data-dark-theme='dark_high_contrast'] {
@include setVariables(darkHighContrast.$variables);
}
&[data-dark-theme='dark_colorblind'] {
@include setVariables(darkColorblind.$variables);
}
&[data-dark-theme='light_colorblind'] {
@include setVariables(lightColorblind.$variables);
}
}
}
@include theme('light', light.$variables);
@include theme('dark', dark.$variables);
@include theme('dark_dimmed', darkDimmed.$variables);
@include theme('dark_high_contrast', darkHighContrast.$variables);
@include theme('light_colorblind', lightColorblind.$variables);
@include theme('dark_colorblind', darkColorblind.$variables);