'Dark Mode' support in Hive admin theme

[philwareham]

Is your feature request related to a problem?

No - just an enhancement.

What is the feature?

Upcoming Safari (macOS) and Chrome (macOS) will support Dark Mode via CSS queries, I believe there is work ongoing to bring this to Windows browser versions too. I'd imagine future iOS will have a Dark Mode and Android already has.

So we should support Dark Mode in our primary admin theme, since this is a web app.

Note, I'm not too interested in bloating our default public theme with Dark Mode support - since it's subjective as to whether users want their websites to display that way (as opposed to a web app).

Safari Tech Preview v72 already has feature enabled for testing and I've been modifying my framework to bring in Dark Mode UI.

[Bloke]

Good stuff. Are you intending to make all the admin themes switchable between light and dark sides, or create a dedicated Dark Hive theme? Or only offer it in default Hive?

[philwareham]

I've not decided as yet. Choices are:

1. Create a standalone dark version of Hive admin theme.
2. Use CSS @media (prefers-color-scheme: dark / light) and honour users' preference in OS settings.
3. Toggle light and dark modes directly in the theme via a discrete button (similar to how Twitter app works on iOS).

I'm in favour of option 2. However we could in theory have an amalgamation of options 2 and 3 whereby it respects the OS setting but can be overridden via a button (and some minor JavaScript). Therefore someone with their OS set to Dark Mode could still use the light theme and vice versa if they so wish and not be locked into OS-wide settings.

If you go to my framework in Safari Technology Preview 72 or higher on macOS Mojave you'll see how option 2 works. Make sure 'Dark Mode CSS Support' is enabled in Develop - Experimental Features and you'll see the dark version (work in progress).

[philwareham]

Dark Mode in Hive admin theme is in dev branch. It's got issues but gives an idea of how this can be implemented. To test it you'll currently need macOS 10.14 Mojave - set to Dark Mode - and use Safari Technology Preview 71 or newer (possibly Chrome Canary with feature flag on might work too but I haven't tested that browser yet - I know the feature is coming to that browser).

[phiw13]

Fwiw - Firefox 67 ?. According to the comment it is not yet “live”, you need to restart the browser for it to detect the OS theme.

[philwareham]

@phiw13 great, thanks for the heads-up. I'm currently on the Firefox 66 beta cycle so I'll test when the versions bump.

[philwareham]

Ah, caniuse has now got reporting for this feature too: https://caniuse.com/#feat=prefers-color-scheme

[philwareham]

Potential reference for user selectable way of setting light/dark theme directly in admin panel:

https://petermolnar.net/os-theme-switcher-css-with-fallback/
https://gist.github.com/petermolnar/d7ccaffadb92bf6c3d3615ed92832669

[philwareham]

FYI Firefox Dev Edition 67, released today, now supports @media (prefers-color-scheme: dark / light) so you can test Dark Mode in that browser now on macOS Mojave.

[philwareham]

FYI Safari 12.1, released yesterday, now supports @media (prefers-color-scheme: dark / light) too.

[philwareham]

I've written a purely JavaScript solution to allow users to override Dark/Light Mode directly in the webpage, or to toggle Dark/Light Mode even if they don't have a browser or OS that supports it. You can see the toggle in use in my framework: https://hive-framework.philwareham.co.uk

So, if I use that method, we don't need to rely on theme-specific Textpattern preferences for this feature (it uses localStorage to store you preference per device/browser).

[philwareham]

Latest dev has user selectable dark/light modes for Hive admin theme now. Some style glitches still to be fixed and Hive Neutral hasn't been tidied up for dark mode yet - but feel free to test. It's the lightbulb icon near the logout button.

Please don't report any style issues for now. Just test the toggle concept and see if you are happy with it.

Basic usage is:

1. If user hasn't toggled dark/light mode it respects the OS-level Dark/Light Mode pref in supported browsers and OSes.
2. If user hasn't toggled dark/light mode it and no supported OS-level Dark/Light Mode pref and/or unsupported browsers - defaults to light mode.
3. If user has toggled toggled dark/light mode it respects that regardless of any OS-level pref (all modern browsers supported including IE11). Uses localStorage to store the pref per device.

[philwareham]

Dark Mode support finished - any styling tweaks I'll deal with as a non-issue.

[philwareham]

I've also back-ported this into the Textpattern 4.7.4 branch, if that gets an official release.