prefers-color-scheme Media Query

TL;DR

"Automatic" theme switching coming to Safari.

With Safari Technology Preview 68, there is a new media query, prefers-color-scheme. I've used it on this site like the following:

@media (prefers-color-scheme: dark) {
  background-color: #000000;
}

Digging around in the WebKit release notes, it looks like it supports dark and light at the moment. I tested both, and the do appear to work.

Anyways, kind of cool! I'm sure my dark mode looks bad, so I'll work on it. But I hope other browsers implement this media query soon as well.

Update 24 Jan 2019

Here is a Tailwind CSS plugin to add a dark and light variants. Just add this to the plugins array in your Tailwind config file.

// You need to make sure you have postcss imported in your config file:
// const postcss = require("postcss");

({ addVariant }) => {
  addVariant("dark", ({ container, separator }) => {
    const mediaRule = postcss.atRule({
      name: "media",
      params: "(prefers-color-scheme: dark)"
    });
    mediaRule.nodes = container.nodes;
    container.nodes = [mediaRule];
    mediaRule.walkRules(rule => {
      rule.selector = `.dark${separator}${rule.selector.slice(1)}`;
    });
  });
  addVariant("light", ({ container, separator }) => {
    const mediaRule = postcss.atRule({
      name: "media",
      params: "(prefers-color-scheme: light)"
    });
    mediaRule.nodes = container.nodes;
    container.nodes = [mediaRule];
    mediaRule.walkRules(rule => {
      rule.selector = `.light${separator}${rule.selector.slice(1)}`;
    });
  });
};

More information on adding Tailwind variants can be found here.