Post: picking colors for the new site

[gadenbuie]

The short answer is that I used a neat tool I discovered at https://accessiblepalette.com. Here are the settings for the colors I used in my theme (the URL lets you bookmark your colors).

I'd recommend starting with one or two colors and add new shades until you have enough colors for what you need. You probably don't need as many colors as I picked. I went a little crazy and created a matching syntax highlighting style, so I needed more than a few colors.

Getting the colors out of the tool is a bit complicated. I ended up writing a little javascript to extract the colors from the page as JSON and then a little R to turn it into the CSS variables in assets/garrick-hex.scss. I should add those scripts (if I find them) to the post.

My biggest recommendation would be to pick one accent color and one text shade color. Use those base colors and their shades and tints (darker and lighter versions) throughout. Maaaaaybe add a second accent color.

In terms of implementation, I highly recommend using CSS variables to store the colors rather than SCSS variables. You can pass the CSS variables to the SCSS variables, so I went all the way and created CSS variables that correspond to the SCSS variables created by the Apero theme.

garrickadenbuie-com/assets/garrick-hex.scss

Line 73 in 4db6f93

--slate-00: #0e181e;

garrickadenbuie-com/assets/garrick-hex.scss

Line 76 in 4db6f93

--textColorCustom: var(--slate-00);

garrickadenbuie-com/assets/garrick-hex.scss

Line 95 in 4db6f93

$textColorCustom: var(--textColorCustom);

This makes it possible to reference var(--slate-00) or var(--textColorCustom) anywhere throughout your site if you want to use those variables later. You can't do that with SCSS variables since they're compiled away and aren't available to your individual pages.

The other thing this makes possible is automatic dark and light mode using CSS variables. I need to look up the link where I learned about this and it's probably not the absolute best approach because there isn't a button on the page to toggle dark light. By using @media (prefers-color-scheme: dark) (MDN) you can override the CSS variables for the theme properties so they change on the fly when the user's operating system (or their settings) declare that they want dark or light mode.

I approached this by creating CSS variables for theme properties that are then used to set the theme's SCSS variables. Note that this literally sets the SCSS variable to the CSS variable, so that later I can change the CSS variable values for dark mode.