diff options
Diffstat (limited to 'src/components/shared/Basic.module.scss')
| -rw-r--r-- | src/components/shared/Basic.module.scss | 29 |
1 files changed, 24 insertions, 5 deletions
diff --git a/src/components/shared/Basic.module.scss b/src/components/shared/Basic.module.scss index 2cc0d0b..289b694 100644 --- a/src/components/shared/Basic.module.scss +++ b/src/components/shared/Basic.module.scss @@ -36,10 +36,7 @@ h2.sectionNameType { * */ -:root[data-theme='light'] { - /* - * --loading-dot-{dot-index}-{dot-keyframe-phase} - */ +@mixin light { --loading-dot-1-1: rgba(0, 0, 0, 0.1); --loading-dot-1-2: rgba(0, 0, 0, 0.5); --loading-dot-1-3: rgba(0, 0, 0, 0.3); @@ -50,7 +47,8 @@ h2.sectionNameType { --loading-dot-3-2: rgba(0, 0, 0, 0.3); --loading-dot-3-3: rgba(0, 0, 0, 0.1); } -:root[data-theme='dark'] { + +@mixin dark { --loading-dot-1-1: rgba(255, 255, 255, 0.5); --loading-dot-1-2: rgba(255, 255, 255, 0.1); --loading-dot-1-3: rgba(255, 255, 255, 0.3); @@ -62,6 +60,27 @@ h2.sectionNameType { --loading-dot-3-3: rgba(255, 255, 255, 0.5); } +:root[data-theme='auto'] { + @media (prefers-color-scheme: dark) { + @include dark; + color-scheme: dark; + } + @media (prefers-color-scheme: light) { + @include light; + color-scheme: light; + } +} + +:root[data-theme='dark'] { + @include dark; + color-scheme: dark; +} + +:root[data-theme='light'] { + @include light; + color-scheme: light; +} + .loadingDot, .loadingDot:before, .loadingDot:after { |