EnglishSvenska

Enable dark mode on your website with CSS

Dark mode is getting more and more popular. It is easier on the eyes and especially when working late. Both Windows and MacOS support setting the color scheme to a darker tint, but the websites we visit stay the same. But that might be about to change with a new CSS standard.

I added this CSS code on this website:

/* dark mode */
@media (prefers-color-scheme: dark) {
  body
  {
    background: #111;
    color: #fff;
  }

  #header h1#logo a {
    color: #fff;
  }
}

What it means is that if the user prefers dark mode, invert the colors and make the background dark, and the text white. It looks like this if you navigate to the site using using a browser that supports this new feature, and if you have dark mode enabled in your OS:

Support for this feature is at the moment quite low. Only the latest versions of Safari and Firefox supports it, but it looks like it will make the standard so more or less every browser will support it in a while.

Kategori: Blog

Lämna ett svar

E-postadressen publiceras inte. Obligatoriska fält är märkta *

*