Skip to content

Commit f9af2f2

Browse files
mpavelkampavelka
committed
Adding visibility classes for light and dark theme.
1 parent 797e368 commit f9af2f2

1 file changed

Lines changed: 50 additions & 5 deletions

File tree

‎assets/css/_dark/dark-main.scss‎

Lines changed: 50 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -57,14 +57,59 @@
5757
--timeline-node-bg: rgb(150, 152, 156);
5858
}
5959

60-
@media (prefers-color-scheme: dark) {
61-
body:not(.color-scheme-light) {
62-
@include darkScheme();
60+
61+
/* Light scheme prefered (= dark scheme not prefered)
62+
* -> dark scheme triggered with <body class="color-scheme-dark">
63+
*/
64+
body.color-scheme-dark{
65+
/* Dark scheme */
66+
@include darkScheme();
67+
// Hide element in dark color scheme
68+
// (visible in light scheme)
69+
.color-scheme-dark-hidden {
70+
display: none;
71+
}
72+
.color-scheme-light-hidden {
73+
display: initial;
74+
}
75+
}
76+
body:not(.color-scheme-dark) {
77+
/* Light scheme */
78+
// Hide element in dark color scheme
79+
// (visible in light scheme)
80+
.color-scheme-light-hidden {
81+
display: none;
82+
}
83+
.color-scheme-dark-hidden {
84+
display: initial;
6385
}
6486
}
6587

66-
@media not (prefers-color-scheme: dark) {
67-
body.color-scheme-dark {
88+
@media (prefers-color-scheme: dark) {
89+
/* Dark scheme prefered
90+
* -> light scheme triggered with <body class="color-scheme-light">
91+
*/
92+
body:not(.color-scheme-light) {
93+
/* Dark scheme */
6894
@include darkScheme();
95+
// Hide element in dark color scheme
96+
// (visible in light scheme)
97+
.color-scheme-dark-hidden {
98+
display: none;
99+
}
100+
.color-scheme-light-hidden {
101+
display: initial;
102+
}
103+
}
104+
body.color-scheme-light {
105+
/* Light scheme */
106+
// Hide element in dark color scheme
107+
// (visible in light scheme)
108+
.color-scheme-light-hidden {
109+
display: none;
110+
}
111+
.color-scheme-dark-hidden {
112+
display: initial;
113+
}
69114
}
70115
}

0 commit comments

Comments
 (0)