feat: dark mode

[allancorbett]

BREAKING CHANGE: it could all go horribly wrong...

See https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme for more info.

Safari and FF67 support it at the moment with Chrome going to support it.

Things still needing done:

• "What we do" images
• General discussion about if we want to support this or not...

[james-nash]

These changes look fine to me. Nice one!

[james-nash]

Thanks for proposing & implementing this feature!

I think it's a good addition. It's something we were thinking of possibly doing in next via the new color system (see #147), but we never really thought about doing it for the current 1.x version. However, why not? Especially since you've pretty much done it already.

So, I propose:

1. Polish this off and let's get it released
2. We'll update the current Buildit website to use this (and figure out what to do about those "What we do" images* in the process)
3. In next, once the new color system goes in, we'll retrofit an equivalent dark mode (should be pretty easy to implement)

@danbull @dw-buildit : What say ye?

---

*) Off the top of my head we could:

• Inline those SVGs and set their fill to currentColor so they automagically adapt
• Produce white versions of them and use a <picture> element to select the light or dark image based on the prefers-color-scheme media query.

[allancorbett]

Inline those SVGs and set their fill to currentColor so they automagically adapt

That would be my preference.

I'm completely at sea as to how to actually implement it (in njks and json) though.

[allancorbett]

So I've implented the dark mode for certain images using some (probably rather ropey) methods: src/ui-lib/sass/05-components/01-atoms/04-media/_24-image.scss

Thoughts?

[james-nash]

Looks good to me - just watch out with the package.json because it looks like it might overwrite the recent updates to that.

[james-nash]

This is lookin' good to me.

I'm happy for this PR to be un-drafted (is that the right term?) and merged.

I see you've already prepped some associated changes on the website, so let's get this released as soon as we can. :-)

[buildit-dev]

🎉 This PR is included in version 2.0.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀