asandikci.com/web
1
0
Fork 0
Code Issues 5 Pull requests Projects Releases Packages Wiki Activity Actions

Adding visibility classes for light and dark theme.

Browse source
This commit is contained in:
Miloslav Pavelka 2020-02-09 18:11:58 +01:00
parent 3f11cef46f
commit 7728cc4d3e
1 changed files with 50 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

55
assets/css/_dark/dark-main.scss
View file

@ -57,14 +57,59 @@
--timeline-node-bg: rgb(150, 152, 156); --timeline-node-bg: rgb(150, 152, 156);
} }
@media (prefers-color-scheme: dark) {
body:not(.color-scheme-light) { /* Light scheme prefered (= dark scheme not prefered)
@include darkScheme(); * -> dark scheme triggered with <body class="color-scheme-dark">
*/
body.color-scheme-dark{
/* Dark scheme */
@include darkScheme();
// Hide element in dark color scheme
// (visible in light scheme)
.color-scheme-dark-hidden {
display: none;
}
.color-scheme-light-hidden {
display: initial;
}
}
body:not(.color-scheme-dark) {
/* Light scheme */
// Hide element in dark color scheme
// (visible in light scheme)
.color-scheme-light-hidden {
display: none;
}
.color-scheme-dark-hidden {
display: initial;
} }
} }
@media not (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
body.color-scheme-dark { /* Dark scheme prefered
* -> light scheme triggered with <body class="color-scheme-light">
*/
body:not(.color-scheme-light) {
/* Dark scheme */
@include darkScheme(); @include darkScheme();
// Hide element in dark color scheme
// (visible in light scheme)
.color-scheme-dark-hidden {
display: none;
}
.color-scheme-light-hidden {
display: initial;
}
}
body.color-scheme-light {
/* Light scheme */
// Hide element in dark color scheme
// (visible in light scheme)
.color-scheme-light-hidden {
display: none;
}
.color-scheme-dark-hidden {
display: initial;
}
} }
} }