@media prefers-color-scheme

.day   { background: #eee; color: black; }
.night { background: #333; color: white; }

@media (prefers-color-scheme: dark) {
  .day.dark-scheme   { background:  #333; color: white; }
  .night.dark-scheme { background: black; color:  #ddd; }
}

@media (prefers-color-scheme: light) {
  .day.light-scheme   { background: white; color:  #555; }
  .night.light-scheme { background:  #eee; color: black; }
}

.day, .night {
  display: inline-block;
  padding: 1em;
  width: 7em;
  height: 2em;
  vertical-align: middle;
}

Source: developer.mozilla.org

Similar codes

0 vote362 views1 answer
Css click through after
CSS
1 vote353 views2 answers
Min css
CSS
2 votes357 views2 answers
Aspect ratio css
CSS
0 vote345 views1 answer
Ssh into docker container ddev
CSS
168 votes426 views4 answers
Css link tag
CSS
1 vote395 views1 answer
Ul remove dots
CSS
37 votes350 views3 answers
Inline svg css
CSS
0 vote384 views1 answer
Mvc dynamic css
CSS
7 votes380 views2 answers
Transition css hover
CSS
57 votes371 views2 answers
Hegith specific css in media query
CSS