I decided I wanted to have a dark mode on this site. It’s a nice feature, and with some CSS can be made to auto change based on the user preferences—meaning you will only see it if your computer / phone is in dark mode.
The theme I use is Twenty Sixteen, which I have previously modified for some changes to typography.
The task, similar to to the typography change, started by searching through the CSS file to find any reference to color. I then took those references and organized them by what color they were using.
The pallet turned out to be 5 primary colors, two accent ones (which were used as inverses of each other). I hunted for colors to use and put together a dark theme that looks like this:
I used a simple media query to allow the site to change with the user preferences:
@media screen and (prefers-color-scheme: dark)
There was one issue I found. Twenty Sixteen has color customizations that load stylesheets at the bottom of the header. I tried a few things to get the dark mode css to load after that, which would mean both were working, but couldn’t get it to work.
I used the functions.php file to remove both the loaded CSS and the options from the customizer to prevent any issues. I plan to figure this one out so modifications to ‘light’ mode will work with ‘dark’ mode.
I did make an option pane to let you switch which dark pallet you’d like to use. Alpenglow is a theme for Firefox with a rich purple pallet, and I wanted to see if I could make something similar for this and have the option to change back and forth if I need to (spoiler, it worked).
Continue reading “Dark Mode Twenty Sixteen”