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

fix: theme selectors

Browse source
This commit is contained in:
EnixCoda 2022-06-16 22:36:36 +08:00
parent ef481d7d7e
commit 6092d65b00
1 changed files with 29 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

50
src/styles/themes.scss
View file

@ -8,22 +8,30 @@
@import '@primer/primitives/dist/scss/colors/_light.scss';
@import '@primer/primitives/dist/scss/colors/_light_tritanopia.scss';
@mixin theme($themeName) {
&[data-color-mode='light'][data-light-theme='#{$themeName}'],
&[data-color-mode='dark'][data-dark-theme='#{$themeName}'] {
@content;
}
&[data-color-mode='auto'] {
&[data-light-theme='#{$themeName}'] {
@media (prefers-color-scheme: light) {
@mixin theme($selector, $themeName) {
@at-root {
:root[data-color-mode='light'][data-light-theme='#{$themeName}'],
:root[data-color-mode='dark'][data-dark-theme='#{$themeName}'] {
#{$selector} {
@content;
}
}
&[data-dark-theme='#{$themeName}'] {
@media (prefers-color-scheme: dark) {
@content;
:root[data-color-mode='auto'] {
&[data-light-theme='#{$themeName}'] {
@media (prefers-color-scheme: light) {
#{$selector} {
@content;
}
}
}
&[data-dark-theme='#{$themeName}'] {
@media (prefers-color-scheme: dark) {
#{$selector} {
@content;
}
}
}
}
}
@ -40,31 +48,31 @@
--color-bg-overlay: var(--color-canvas-overlay);
--color-bg-subtle: var(--color-canvas-subtle);
@include theme('dark') {
@include theme(&, 'dark') {
@include primer-colors-dark;
}
@include theme('dark_high_contrast') {
@include theme(&, 'dark_high_contrast') {
@include primer-colors-dark_high_contrast;
}
@include theme('light_colorblind') {
@include theme(&, 'light_colorblind') {
@include primer-colors-light_colorblind;
}
@include theme('dark_colorblind') {
@include theme(&, 'dark_colorblind') {
@include primer-colors-dark_colorblind;
}
@include theme('dark_tritanopia') {
@include theme(&, 'dark_tritanopia') {
@include primer-colors-dark_tritanopia;
}
@include theme('light_high_contrast') {
@include theme(&, 'light_high_contrast') {
@include primer-colors-light_high_contrast;
}
@include theme('dark_dimmed') {
@include theme(&, 'dark_dimmed') {
@include primer-colors-dark_dimmed;
}
@include theme('light') {
@include theme(&, 'light') {
@include primer-colors-light;
}
@include theme('light_tritanopia') {
@include theme(&, 'light_tritanopia') {
@include primer-colors-light_tritanopia;
}
}