michaelkuc6/blog_os
1
0
Fork 0
mirror of https://github.com/phil-opp/blog_os.git synced 2025-12-16 22:37:49 +00:00
Code Issues Projects Releases Wiki Activity

Remember chosen theme in localStorage

Browse Source 
This way, the selected theme is kept when changing pages, and for subsequent visits. To prevent flickering, we set the selected theme in a blocking script directly on load. To speed things up further, we now use a `data-theme` attribute instead of classes on the body tag, this way we don't need to wait until the body element is loaded.
This commit is contained in:
Philipp Oppermann
2021-10-17 14:51:00 +02:00
parent 3281df3a41
commit 69917e234c
3 changed files with 44 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
blog/sass/css/edition-2/main.scss
View File

@@ -92,7 +92,7 @@ body {
@include set-colors-light();
}
body.dark {
[data-theme="dark"] body {
@include set-colors-dark();
}
@@ -103,7 +103,7 @@ body.dark {
@include set-colors-dark();
}
/* Override dark mode with light mode styles if the user decides to swap */
body.light {
[data-theme="light"] body {
@include set-colors-light();
}
}
@@ -966,7 +966,7 @@ img {
.dark-mode-note {
display: none;
}
body.dark .dark-mode-note {
[data-theme="dark"] .dark-mode-note {
display: block;
}
@media (prefers-color-scheme: dark) {
@@ -975,7 +975,7 @@ body.dark .dark-mode-note {
display: block;
}
/* Override dark mode with light mode styles if the user decides to swap */
body.light .dark-mode-note {
[data-theme="light"] .dark-mode-note {
display: none;
}
}
@@ -994,7 +994,7 @@ body.dark .dark-mode-note {
@include light-switch-light();
}
body.dark .light-switch {
[data-theme="dark"] .light-switch {
@include light-switch-dark();
}
@@ -1003,7 +1003,7 @@ body.dark .light-switch {
@include light-switch-dark();
}
body.light .light-switch {
[data-theme="light"] .light-switch {
@include light-switch-light();
}
}