Dark mode

[yiendos]

Seems there is a CSS proposal at present to introduce support for determining whether the user's browser has been configured to support Dark Mode:
https://stuffandnonsense.co.uk/blog/redesigning-your-product-and-website-for-dark-mode

It was agreed that if we could introduce this to the joomlatools-ui as a hidden Easter egg this would be fun for our users.
https://timble.slack.com/archives/C027CR8UF/p1570783467000200

[yiendos]

work in progress

inspiration from the mac calendar app:

[yiendos]

Seems scss variables can't be used with a media prefers dark mode:
https://rowlandekemezie.com/posts/dark-theme-support-for-my-website/
https://jeremenichelli.io/2019/05/a-css-variables-implementation-of-dark-mode/
https://sass-lang.com/documentation/breaking-changes/css-vars
https://codepen.io/jakealbaugh/post/css4-variables-and-sass
sass/libsass#2621 (comment)

Only support for root variables are possible:
https://css-tricks.com/almanac/selectors/r/root/

Take a look at first link and see how easy it would be to convert scss variables to css variables

[yiendos]

It seems that css variable support isn't that good:
https://caniuse.com/#search=css%20variables

So I guess working out two stylesheets (admin.css and admin-dark.css):

    <link href="/dist/css/admin.css" rel="stylesheet">
    <link href="/dist/css/admin.css" rel="stylesheet" media="(prefers-color-scheme: light)">
    <link href="/dist/css/admin-dark.css" rel="stylesheet" media="(prefers-color-scheme: dark)">

At least this way the default admin.css will be picked up by browsers that don't support the prefers-color-scheme attribute