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 https://github.com/sass/libsass/issues/2621#issuecomment-438096238

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

[yiendos]

@ercanozkaya question about fonts. Mason attempts to copy the fonts folder:

from: ~/Projects/kodekit-ui/dist/fonts

to: ~/Projects/joomlatools-framework/code/libraries/joomlatools/library/resources/assets/fonts

Yet when you symlink joomlatools-framework into a site:

joomla site:create testing --symlink=joomlatools-framework

[12:51 PM]-[vagrant@joomlatools]-[/var/www/testing/media/koowa] 

$ ls -la | grep "com_koowa"

5:lrwxrwxrwx  1 501 dialout  104 Jul  8 12:37 com_koowa -> /home/vagrant/Projects/joomlatools-framework/code/libraries/joomlatools/component/koowa/resources/assets/

You can see the symlink is in fact made to:

~/Projects/joomlatools-framework/code/libraries/joomlatools/component/koowa/resources/assets/

So subsequent calls to the font folder fail:

http://testing.test/media/koowa/com_koowa/fonts/k-icons/k-icons.ttf

What is the proper location for our fonts? Or is the way folders symlinked into the joomla console incorrect?

[ercanozkaya]

@yiendos Fonts have been moved into libraries/joomlatools/library/resources/assets/fonts

The fonts should then come from media/koowa/framework and CSS files should refer to that location. Where does the error come from, which CSS file?

[yiendos]

@ercanozkaya mind giving this a spin please?

Testing instructions

1. Check out the following branches:

   • joomlatools-framework:feature/313-darkMode
   • kodekit-ui:feature/73-darkVariables

2. Run mason css over the framework

3. Create a new docman site joomla site:create docman --symlink=joomlatools-framework,docman

4. Install DOCman db tables

5. Access the admin UX

Let there be dark!

[ercanozkaya]

@yiendos This is super super nice :) I think it looks better than it does on Wordpress since there is no sidebar either.

Happy to incorporate this into core once we clean it up. We have a refactored loader in Foliokit for dark mode loader. Would you be willing to bring that over and also clean up the extra font files etc?

Btw sorry for the late response this came right in between my holiday business so couldn't test earlier