Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

'Dark Mode' support in Hive admin theme #1383

Closed
philwareham opened this Issue Jan 9, 2019 · 13 comments

Comments

Projects
None yet
3 participants
@philwareham
Copy link
Member

philwareham commented Jan 9, 2019

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.

@philwareham philwareham added this to the v4.8 milestone Jan 9, 2019

@philwareham philwareham self-assigned this Jan 9, 2019

@Bloke

This comment has been minimized.

Copy link
Member

Bloke commented Jan 9, 2019

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

This comment has been minimized.

Copy link
Member Author

philwareham commented Jan 9, 2019

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 added a commit that referenced this issue Feb 26, 2019

Alpha support for Dark Mode in Hive admin theme
Just a work-in-progress/proof of concept for now. Testing primarily restricted to Safari Tech Preview 71 or newer where `prefers-color-scheme` CSS media query is enabled.

There are known issues - especially with Hive Neutral theme (please refrain from reporting issues related to this commit until it is more stable).

We still need to debate how users will select Dark Mode - See #1383 and #1389 for history.
@philwareham

This comment has been minimized.

Copy link
Member Author

philwareham commented Feb 26, 2019

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

This comment has been minimized.

Copy link

phiw13 commented Feb 27, 2019

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

This comment has been minimized.

Copy link
Member Author

philwareham commented Feb 27, 2019

@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

This comment has been minimized.

Copy link
Member Author

philwareham commented Feb 27, 2019

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

@philwareham

This comment has been minimized.

Copy link
Member Author

philwareham commented Feb 27, 2019

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

This comment has been minimized.

Copy link
Member Author

philwareham commented Mar 13, 2019

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

This comment has been minimized.

Copy link
Member Author

philwareham commented Mar 26, 2019

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

@philwareham

This comment has been minimized.

Copy link
Member Author

philwareham commented Apr 2, 2019

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

This comment has been minimized.

Copy link
Member Author

philwareham commented Apr 4, 2019

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

This comment has been minimized.

Copy link
Member Author

philwareham commented Apr 5, 2019

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

@philwareham

This comment has been minimized.

Copy link
Member Author

philwareham commented Apr 5, 2019

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.