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”

Sometimes, the Beginning is the best place to Continue

I’ve been taking an online course on CSS that starts from the basics.

My original ‘course’ in CSS was on the job training as we converted a site from tables to CSS divs somewhere in the summer of 2000.

A lot has changed in the world of web programming since the dot-com boom when I was doing it professionally (well, as professionally as any of us were, I suppose), and while I still make web things, from WordPress plugins and themes to even dabbling in React.js and Svelte, it’s not my profession anymore. This means that while I’m dipping my toes back in everyone in a while—scraping through Google searches to find the answers to my questions—I’m not active enough in the space to catch up by working.

That was how I learned these things, programming Perl, then PHP, adding JavaScript to have mouse-overs. Tables for layout, and I’m going to admit here, in public, that there are days I wish we went back to tables for layout. I learned CSS ‘real-time’ as we updated the site from tables, hard coded styles and background images to a more fluid CSS layout over the summer.

The thing is this: sometimes the best way to learn is to start from the beginning. Sure, I know everything in the first couple lessons, but it wasn’t long before something new came out. A new term, a new phrase, a new best practice.

I know CSS. But I learned it then and patch-worked myself through updates and improvements throughout these years. I knew CSS, and even though I still use it often, the foundation is based on the lessons learned, right and wrong, all those years ago. At some point… at this point, the best way to continue learning is to start over.

Because it is not just specs and code that has changed over the years, but vocabulary, best practices, formatting and naming conventions (not that we had naming conventions in 1999).

This makes a basic course a refresher and a new foundation to build on from here. Don’t be afraid or prideful to take a step back and go over the basics once again.

What’s in a So?

iA Writer recently had an update where they allowed for custom style check filters in addition to the cliches, fillers and redundancies filters the app possessed.

This coincided with me reading Dreyer’s English. In the opening chapter Dreyer gives a list of words to stop using for a week.

One of which—so—is one that I knew I used too much.

It was straight forward to add in the words to iA Writer’s pattern list—the only catch being that since I wanted words, and not letter combinations, I had to add spaces before and after.

Otherwise, “so” would mark “personal” since it contained “so”.

Has it helped? That’s to be decided. The intent is not to exclude these words from my prose, poetry, or blog ramblings, but to be more conscious of the construction of those writings.

So when I drop a “so”, it feels fluid, not repetitive.