How to quickly spin up a dark theme

December 31, 2019 , I learned...

It’s easier than I thought it would be. Use CSS custom properties to define a color palette on the :root element, then use the prefers-color-scheme media query to swap those colors for others when the media query is set to dark.

Here’s how my variables file looks:

[[code]]czoxMDM5OlwiOnJvb3QgewogIC0tcmVkOiAjZmQxZTFlOwogIC0tb3JhbmdlOiAjZmQ1YTFlOwogIC0tZ3JheS1saWdodGVzdDogI2Z7WyYqJl19N2YyZjE7CiAgLS1ncmF5LWxpZ2h0ZXI6ICNlOGUzZTE7CiAgLS1ncmF5LWxpZ2h0OiAjY2FiZGI5OwogIC0tZ3JheTogI2IwYTNhMHtbJiomXX07CiAgLS1ncmF5LW1lZGl1bTogIzdkNzQ3MjsKICAtLWdyYXktZGFyazogIzYxNWE1ODsKICAtLWdyYXktZGFya2VyOiAjNDYzZTNie1smKiZdfTsKICAtLWdyYXktZGFya2VzdDogIzIyMWQxYjsKICAtLXdoaXRlOiAjZmZmOwogIC0tYmxhY2s6ICMwMDA7CgoKICAtLXByaW1hcnl7WyYqJl19LWNvbG9yOiB2YXIoLS1vcmFuZ2UpOwogIC0tdGV4dC1jb2xvcjogdmFyKC0tZ3JheS1kYXJrZXN0KTsKICAtLWJhY2tncm91bmQ6IHtbJiomXX12YXIoLS1ncmF5LWxpZ2h0ZXN0KTsKICAtLXNpdGUtdGl0bGU6IHZhcigtLWdyYXktZGFyayk7CiAgLS1ib3JkZXItY29sb3I6IHZhe1smKiZdfXIoLS1ncmF5KTsKICAtLWxpbmstYm9yZGVyOiB2YXIoLS1wcmltYXJ5LWNvbG9yKTsKICAtLWxpbmstY29sb3I6IHZhcigtLXRleHR7WyYqJl19LWNvbG9yKTsKICAtLWxpbmstaG92ZXI6IHZhcigtLXdoaXRlKTsKICAtLWxpbmstY3VycmVudDogdmFyKC0tZ3JheS1kYXJrZXN0KXtbJiomXX07CiAgLS1jb2RlLWJsb2NrczogdmFyKC0td2hpdGUpOwogIC0tZXJyb3ItY29sb3I6IHZhcigtLXJlZCk7CiAgLS10YWJsZS1iYWNre1smKiZdfWdyb3VuZDogdmFyKC0tZ3JheS1saWdodGVzdCk7CgogIEBtZWRpYSAocHJlZmVycy1jb2xvci1zY2hlbWU6IGRhcmspIHsKICAgIC17WyYqJl19LXRleHQtY29sb3I6IHZhcigtLXdoaXRlKTsKICAgIC0tYmFja2dyb3VuZDogdmFyKC0tZ3JheS1kYXJrZXN0KTsKICAgIC0tc2l0ZXtbJiomXX0tdGl0bGU6IHZhcigtLWdyYXkpOwogICAgLS1ib3JkZXItY29sb3I6IHZhcigtLWdyYXktbGlnaHRlc3QpOwogICAgLS1saW5rLWNve1smKiZdfWxvcjogdmFyKC0td2hpdGUpOwogICAgLS1saW5rLWN1cnJlbnQ6IHZhcigtLXdoaXRlKTsKICAgIC0tY29kZS1ibG9ja3M6IHZhcih7WyYqJl19LS1ibGFjayk7CiAgICAtLXRhYmxlLWJhY2tncm91bmQ6IHZhcigtLWdyYXktZGFya2VyKTsKICB9Cn1cIjt7WyYqJl19[[/code]]