1.3.0 • Published 8 days ago
postcss-dark-theme-class v1.3.0
PostCSS Dark Theme Class
CSS solution for light/dark/auto theme switcher for websites.
- It doesn’t have FART flash of light theme during JS initialization.
- Pure CSS solution. You need JS only to set HTML class, when user.
- Automatic theme provide better UX for users with theme switching by subset/sunrise (all operating systems now have theme switching schedule).
PostCSS plugin to make switcher to force dark or light theme by copying styles
from media query or light-dark()
to special class.
/* Input CSS */
@media (prefers-color-scheme: dark) {
html {
--text-color: white
}
body {
background: black
}
}
section {
background: light-dark(white, black);
}
/* Output CSS */
@media (prefers-color-scheme: dark) {
html:where(:not(.is-light)) {
--text-color: white
}
:where(html:not(.is-light)) body {
background: black
}
}
html:where(.is-dark) {
--text-color: white
}
:where(html.is-dark) body {
background: black
}
@media (prefers-color-scheme: dark) {
:where(html:not(.is-light)) section {
background: black;
}
}
:where(html.is-dark) section {
background: black;
}
@media (prefers-color-scheme: light) {
:where(html:not(.is-dark)) section {
background: white;
}
}
:where(html.is-light) section {
background: white;
}
By default (without classes on html
), website will use browser dark/light
theme. If user want to use dark theme, you set html.is-dark
class.
If user want to force light theme, you use html.is-light
.
Docs
Read full docs here.
1.3.0
8 days ago
1.2.3
9 days ago
1.2.2
10 days ago
1.2.1
3 months ago
1.2.0
3 months ago
1.1.0
5 months ago
1.0.0
9 months ago
0.8.0
9 months ago
0.7.3
3 years ago
0.7.2
3 years ago
0.7.1
3 years ago
0.7.0
3 years ago
0.6.0
3 years ago
0.5.2
3 years ago
0.5.1
4 years ago
0.5.0
4 years ago
0.4.0
4 years ago
0.3.0
4 years ago
0.2.2
5 years ago
0.2.1
5 years ago
0.2.0
5 years ago
0.1.0
5 years ago