Dark Mode - iameven.com

Visiting this site might give a totally different impression if you prefer dark color schemes.

Prefers color scheme

Doesn't matter if you're black or white

The @media (prefers-color-scheme) feature is still in draft, meaning it is a feature suggestion. However, it is already implemented by Safari, Chrome, and Firefox, so…

In short, this lets the user set a preference for light or dark designs, and it is up to each website to create the variations. It is of course not limited to color, allowing you to do anything you can with CSS in a media query. The guideline is to just switch the colors around though. It opens for having 3 color schemes on the page, easily (ideally at least) configured by the users. Default (or no preference), light or dark.

I've opted for 2 though, adding a dark design. To do so I had to use a browser extension to toggle this, because I couldn't figure how to set this with Ubuntu and Firefox ¯\_(ツ)_/¯

I decided to reduce the number of colors to make this easier for me. There was a different color scheme for block quotes with 2 colors. And the contact form had 2 different colors. What I'm left with is 6 colors:

The main color I selected happens to work nicely on dark and light backgrounds.

CSS variables

Since I started adding one advanced CSS feature I might as well use another. And this one is older, so every browser supporting color scheme should work with variables.

They work by defining them in an element, the ":root" pseudo element allows for global access. And then they can be referenced in anything attached to that element using the "var()" syntax, like so: 

:root {
    --variable-name: value;
}

.element {
    use-variable: var(--variable-name);
}

Instead of defining a media query everywhere a color is set, or grouping all of these rules in a final query, we can just change the variable. Which is what they are for, I guess.

Just to make sure we always set a value that any browser can read I define a default value first.

element {
    color: #f00;
    color: var(--variable-name);
}

This is where a CSS preprocessor comes in handy, like less. In less there are something called mixins. It's a way to write a custom function. 

.color(@color; @variable-name) {
    color: @color;
    color: var(@variable-name);
}

element {
    .color(@main-color, --main-color);
}

That way I hopefully won't forget to add the fallback color if I add more elements.

Other tweaks

The logo for the page was an image, which can be altered to dark mode through CSS filters. But I would rather use an SVG for this, which allows for styling.

I updated the favicon with the new SVG, it looks a bit small, but I think it works. The favicon generator I found (and think I used last time) now generates fewer tags for the head section. What used to be 20 links and meta's are now only 8, I love it.

Build tools

I somehow managed to break the watch/rebuild cycle I had setup. To grab some meta data from Metalsmith and replace some values in my posts I wrote my own plugin. 

This is some text with a {{ site.variable }} in it.

My custom script wanted to look at all of those and create some regex function to search and replace my posts. But on rebuilds I ended up running out of memory. I found this to be really confusing for a while, until I realized that Metalsmith adds a lot of data to _metadata on rebuilds. By restricting my search to values in _metadata.site this started working again. Before figuring out that I upgraded all of the dependencies and fixed some nodejs buffer warnings. Not having to restart the server to see changes might motivate me back into writing more stuff. Fingers crossed.

← Crackdown Elsewhere →