Dark Mode 🎉

[karaggeorge]

Closes #478

Support dark mode and switching between live/dark while the windows are open 😄

[karaggeorge]

This should wait for #643 since some styles introduced in that PR will need the dark/light css vars

[sindresorhus]

It looks beautiful! ❤️

[sindresorhus]

The blue link color is not readable enough:

[sindresorhus]

This should be dark:

[skllcrn]

I've been experimenting with making all blue elements white when in dark mode @sindresorhus, I think it's a decent solution since we rarely if ever rely on colour alone to indicate states. Thoughts?

[sindresorhus]

@skllcrn I think that would make it look very bland. I like the blue, it just need to be slightly more legible.

[karaggeorge]

I agree that I like the blue. But yeah the one we are using is a bit too much for dark mode. I already added some variables for that as well, so it should be pretty easy to switch it

[karaggeorge]

@skllcrn @sindresorhus Gave the editor slider a dark mode version and switched the blue with the "kap-light" color from the Abstract palette for dark mode:

let me know if that makes it more legible or if we need to go a bit lighter than that

[sindresorhus]

I feel like the blue links could still be a bit more legible.

[sindresorhus]

You also need to set https://electronjs.org/docs/api/system-preferences#systempreferencessetapplevelappearanceappearance-macos when changing to/from dark mode.

Example: https://github.com/sindresorhus/caprine/blob/ac689dec73e1e24b847971484dab484077629fb0/source/index.ts#L441

[sindresorhus]

The toggle component in light mode is broken:

[sindresorhus]

The tab here are broken and moves when you click them:

[sindresorhus]

No visible text on the button here:

[sindresorhus]

The links here are no longer colored, which makes it hard to see that they are links:

[karaggeorge]

@skllcrn anything else left for this one?

[skllcrn]

We've got some styling issues left @karaggeorge:

• The blue isn't legible enough on the dark background, especially for small regular fonts, we can either go monochrome or tweak our palette to pass accessibility tests.
• The plugin configuration window spawns 2 scrollbars
• Window backgrounds globally seem to be 10-20% darker that they are intended to be and feels inconsistent with other apps, are you seeing that?

[karaggeorge]

@skllcrn

The blue isn't legible enough on the dark background, especially for small regular fonts, we can either go monochrome or tweak our palette to pass accessibility tests.

I'm thinking pick a different blue? Can we try some hexcodes?

The plugin configuration window spawns 2 scrollbars

I'm not seeing this locally. I'll try to download the built version and see if there's something there

Window backgrounds globally seem to be 10-20% darker that they are intended to be and feels inconsistent with other apps, are you seeing that?

What should the bg color be? I think we set it together on a call from Abstract

[karaggeorge]

@sindresorhus This is ready for a final review. @skllcrn and I got on a call and fixed almost everything.

There's two things left, but we can handle them in separate PRs:

• About window needs a dark mode title bar
• Changing the main bar transition when going between regular/advanced from a slide animation to a fade in/out

I'll work on those in the next few days

[sindresorhus]

About window needs a dark mode title bar

It already has that when built for production:

[sindresorhus]

It's not obvious that the links in the about window are links. They're just white like the other text. It was clearer when they were blue.

Other than that, this looks very good.