2022-02-12

Dark mode your webpage with CSS

A really simple way to apply dark mode on your webpage is including a CSS media query. The browser checks the users system display settings and sets accordingly. ☺︎

@media (prefers-color-scheme: dark) {
  body { background: black; color: white; }
  h1, h2, h3 { @apply text-yellow-500 }
  a { @apply text-yellow-500 hover:text-yellow-600 }
}