404ee080a6
* Detect dark mode in CSS We duplicated css code a bit but instead users won't see white flashes when they navigate around the site. Also as the result might be able to override their system-wide dark mode settings with the theme switcher. * Apply theme attribute as early as possible This change resolves the flashing issue for visitors who used theme switcher.
65 lines
1.1 KiB
CSS
65 lines
1.1 KiB
CSS
html, html[theme="light"] {
|
|
--bg-color: #FFF;
|
|
--opposite-bg-color: #282c35;
|
|
|
|
--text-color: #333;
|
|
--brighter-text-color: #000;
|
|
--opposite-text-color: #DDD;
|
|
|
|
--link-color: #333;
|
|
--visited-link-color: #afafaf;
|
|
}
|
|
|
|
html[theme="dark"] {
|
|
--bg-color: #282c35;
|
|
--opposite-bg-color: #FFF;
|
|
|
|
--text-color: #DDD;
|
|
--brighter-text-color: #FFF;
|
|
--opposite-text-color: #333;
|
|
|
|
--link-color: #DDD;
|
|
--visited-link-color: #737373;
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
html {
|
|
--bg-color: #282c35;
|
|
--opposite-bg-color: #FFF;
|
|
|
|
--text-color: #DDD;
|
|
--brighter-text-color: #FFF;
|
|
--opposite-text-color: #333;
|
|
|
|
--link-color: #DDD;
|
|
--visited-link-color: #737373;
|
|
}
|
|
}
|
|
|
|
body {
|
|
font-family: 'Nunito', sans-serif;
|
|
font-size: 16px;
|
|
line-height: 1.3;
|
|
transition: all linear .2s;
|
|
color: var(--text-color);
|
|
background-color: var(--bg-color);
|
|
}
|
|
|
|
a {
|
|
color: var(--link-color);
|
|
transition: all linear .1s;
|
|
}
|
|
|
|
a:visited {
|
|
color: var(--visited-link-color);
|
|
}
|
|
|
|
a:hover {
|
|
color: #9b9b9b;
|
|
}
|
|
|
|
.article a {
|
|
text-decoration-color: #9e9e9e;
|
|
}
|
|
|