...Is It Even Possible?
My goal with this web project, is to impliment a dark/light theme with as little CSS as possible.
*Browsers now support a default dark and light theme that can be turned on based on the users system theme.
Here is the folder structure:
-- project folder -- index.html -- style.css
Here is the CSS:
@media (prefers-color-scheme: light) {
html {
color-scheme: light;
}
}
@media (prefers-color-scheme: dark) {
html {
color-scheme: dark;
}
}
// For reset and basic styles
* {
box-sizing: border-box;
}
body {
font-family: sans-serif;
margin: 1rem;
}
h1 {
font-weight: 400;
}
h2,
h3 {
font-weight: 300;
}
p {
line-height: 1.5;
font-weight: 400;
}
header,
main {
max-width: 65ch;
margin: 0 auto;
}
footer {
padding: 1rem 0;
background: #171717;
text-align: center;
}
pre {
background: #2d2d2d;
color: #b3b9c5;
overflow-x: auto;
border-radius: 7px;
padding: 1rem;
}
.highlight {
color: lightblue;
}
.dimmed {
color: #d4d4d4;
}
*The CSS that is highlighted lightblue is the main ingredient. These rules,color-scheme: light or color-scheme: dark will change the page theme on their own, but, to honor the users system default setting we can have those rules inside a media query called prefers-color-scheme. So, when the system is set to dark, the color-scheme will be set to dark and the same for light.