CSS Only Dark/Light Theme

...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.