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).
Here is the base media query for the dark mode in Twenty Sixteen. I’m planning to post a Github repository for the whole theme on the of chance it is useful to someone.
/* Dark Mode Theme */
@media screen and (prefers-color-scheme: dark)
{
/* Text Colors */
/*
Primary Colors:
1 #e1e1e1 Primary Text Color
2 #111111 Darkest Main Body Area Color
3 #222222 Dark
4 #343434 Med Dark
5 #222222 Inactive
Accent Colors:
1 #8e8e8e
2 #007acc
Binary:
Either white (#FFF) or black (#000)
Accent color 1 and 2 are used as inverse of each other thoughout the theme
*/
/* Primary Color 1 : Text Color */
body,
button,
input,
select,
textarea,
blockquote cite,
.wp-block-quote cite,
blockquote small,
input[type="date"]:focus,
input[type="time"]:focus,
input[type="datetime-local"]:focus,
input[type="week"]:focus,
input[type="month"]:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="number"]:focus,
textarea:focus,
.main-navigation a,
.dropdown-toggle,
.social-navigation a,
.post-navigation a,
.widget-title a,
.site-branding .site-title a,
.menu-toggle,
.entry-title a,
.page-links > .page-links-title,
.pagination a:hover,
.pagination a:focus,
.comment-reply-title small a:hover,
.comment-reply-title small a:focus,
.wp-block-code { color: #e1e1e1; }
/* Accent Color 1 */
blockquote,
input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="week"],
input[type="month"],
input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="number"],
textarea,
.post-password-form label,
a:hover,
a:focus,
a:active,
.post-navigation .meta-nav,
.image-navigation,
.comment-navigation,
.widget_recent_entries .post-date,
.widget_rss .rss-date,
.widget_rss cite,
.site-description,
.author-bio,
.entry-footer,
.entry-footer a,
.sticky-post,
.taxonomy-description,
.entry-caption,
.comment-author,
.comment-metadata,
.pingback .edit-link,
.comment-metadata a,
.pingback .comment-edit-link,
.comment-form label,
.comment-notes,
.comment-awaiting-moderation,
.logged-in-as,
.form-allowed-tags,
.site-info,
.site-info a,
.wp-caption .wp-caption-text,
.gallery-caption,
.widecolumn label,
.widecolumn .mu_register label,
a.page-numbers:hover { color: #8e8e8e; }
/* Accent Color 2 */
a,
.main-navigation a:hover,
.main-navigation a:focus,
.dropdown-toggle:hover,
.dropdown-toggle:focus,
.social-navigation a:hover:before,
.social-navigation a:focus:before,
.post-navigation a:hover .post-title,
.post-navigation a:focus .post-title,
.tagcloud a:hover,
.tagcloud a:focus,
.site-branding .site-title a:hover,
.site-branding .site-title a:focus,
.menu-toggle:hover,
.menu-toggle:focus,
.entry-title a:hover,
.entry-title a:focus,
.entry-footer a:hover,
.entry-footer a:focus,
.comment-metadata a:hover,
.comment-metadata a:focus,
.pingback .comment-edit-link:hover,
.pingback .comment-edit-link:focus,
.comment-reply-link,
.required,
.site-info a:hover,
.site-info a:focus,
.main-navigation li:hover > a,
.main-navigation li.focus > a { color: #007acc; }
/* Binary, White or Black: color: #fff; */
mark,
ins,
button,
button[disabled]:hover,
button[disabled]:focus,
input[type="button"],
input[type="button"][disabled]:hover,
input[type="button"][disabled]:focus,
input[type="reset"],
input[type="reset"][disabled]:hover,
input[type="reset"][disabled]:focus,
input[type="submit"],
input[type="submit"][disabled]:hover,
input[type="submit"][disabled]:focus,
.pagination .nav-links:before,
.pagination .nav-links:after,
.pagination .prev,
.pagination .next,
.pagination .prev:hover,
.pagination .prev:focus,
.pagination .next:hover,
.pagination .next:focus,
.widget_calendar tbody a,
.widget_calendar tbody a:hover,
.widget_calendar tbody a:focus,
.menu-toggle.toggled-on,
.menu-toggle.toggled-on:hover,
.menu-toggle.toggled-on:focus,
.page-links a,
.page-links a:hover,
.page-links a:focus
{
/* color: #000; */
color: #fff;
}
/* Back Ground Colors */
/* Primary Color 2: Darkest */
.main-navigation ul ul li,
input[type="date"]:focus,
input[type="time"]:focus,
input[type="datetime-local"]:focus,
input[type="week"]:focus,
input[type="month"]:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="number"]:focus,
textarea:focus,
.site { background-color: #111111; }
/* Primary Color 3 Dark */
body,
button,
button[disabled]:hover,
button[disabled]:focus,
input[type="button"],
input[type="button"][disabled]:hover,
input[type="button"][disabled]:focus,
input[type="reset"],
input[type="reset"][disabled]:hover,
input[type="reset"][disabled]:focus,
input[type="submit"],
input[type="submit"][disabled]:hover,
input[type="submit"][disabled]:focus,
.pagination:before,
.pagination:after,
.pagination .prev,
.pagination .next,
.menu-toggle.toggled-on,
.menu-toggle.toggled-on:hover,
.menu-toggle.toggled-on:focus,
.page-links a { background: #222222; }
/* Primary color 4 Medium Dark */
code,
hr { background: #343434; }
/* Primary Color 4: Inactive */
input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="week"],
input[type="month"],
input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="number"],
textarea { background: #222222; }
/* Accent Color 1; */
.widget_calendar tbody a:hover,
.widget_calendar tbody a:focus { background-color: #8e8e8e; }
/* Accent Color 2 */
mark,
ins,
.pagination .prev:hover,
.pagination .prev:focus,
.pagination .next:hover,
.pagination .next:focus,
button:hover,
button:focus,
input[type="button"]:hover,
input[type="button"]:focus,
input[type="reset"]:hover,
input[type="reset"]:focus,
input[type="submit"]:hover,
input[type="submit"]:focus,
.widget_calendar tbody a,
.page-links a:hover,
.page-links a:focus { background: #007acc; }
/* Border Colors */
/* Primary color 3 Dark */
.post-navigation,
.post-navigation div + div,
.widget,
.comments-title,
.comment-reply-title { border-color: #222222; }
/* Primary Color 4 */
/* This is separate because of the 'transparent' */
.main-navigation ul ul:before,
.main-navigation ul ul:after { border-color: #343434 transparent; }
/* Primary Color 4 */
.main-navigation ul ul li,
.main-navigation ul ul { border-color: #343434; }
/* Accent Color 1 */
input[type="date"]:focus,
input[type="time"]:focus,
input[type="datetime-local"]:focus,
input[type="week"]:focus,
input[type="month"]:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="number"]:focus,
textarea:focus,
.tagcloud a:hover,
.tagcloud a:focus { border-color: #8e8e8e; }
/* background-color: transparent; */
.menu-toggle,
.menu-toggle:hover,
.menu-toggle:focus { background-color: transparent; }
body:not(.search-results) .entry-summary blockquote { border-color: currentColor; }
}
