Dark Mode Twenty Sixteen

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:

screenshot of this website with the dark mode theme active, background is black and dark grey, words are white and blue

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”

WordPress Twenty Sixteen Child Theme

A quick nerdy post that may help someone in the future. I wanted to modify the WordPress Twenty Sixteen Theme for this site to change the fonts and then add some classes to handle some new features.

(like this nifty Amazon preview on the Extrospections page)

The layout of the css file isn’t the easiest to change, so I had to pull out all the classes that had the font-family properties and arrange them together.

Below is a skeleton for your child theme’s css. The first set is to change the two predominate fonts, the serif and san-serif choices. The next are the @media calls, if you’d like to add to (as I did) or alter the behavior as the site transitions from desktop to mobile.

/*
 Theme Name:  
 Theme URI: 
 Description:  Twenty Sixteen Child Theme
 Author:   
 Author URI:   
 Template:     twentysixteen
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Tags:         
 Text Domain:  twenty-sixteen-child
*/

/*Typography*/

/*Serif  */
body,
button,
input,
select,
textarea {

/* change font family here */

}

/*Sans-Serif*/
.tagcloud a,
.site-title,
.entry-title,
.entry-footer,
.sticky-post,
.page-title,
.page-links,
.comments-title,
.comment-reply-title,
.comment-metadata,
.pingback .edit-link,
.comment-reply-link,
.comment-form label,
.no-comments,
.widecolumn label,
.widecolumn .mu_register label  {

/* change font family here */

}

/* Media levels in Twenty Sixteen */

/**
 * 14.1 - >= 710px
 */

@media screen and (min-width: 44.375em) {

} /* media 710px */

/**
 * 14.2 - >= 783px
 */

@media screen and (min-width: 48.9375em) {

} /* media 738px */

/**
 * 14.3 - >= 910px
 */

@media screen and (min-width: 56.875em) {

} /* media 910px */

/**
 * 14.4 - >= 985px
 */

@media screen and (min-width: 61.5625em) {

} /* media 985px */

Moving Day

Well there comes a time in each blog’s life where it is time to move on, to set out on your own. That time for the Jake-of-all-Trades is now moved from here to my own space on my own.

This post will be both the final post on midatlantichorror.org and the first on jacobhaddon.com. Same look, same level of rambling, just a new place to call home. The plan is to start bringing more things online, more creative ventures, and to start this by setting up my site as the hub for whatever strange ideas i come up with.

So if you find yourself at my previous address, think of this as my forwarding address.

http://jacobhaddon.com/blog