WIP: Theming system enhancement and darkgreen theme
Related issue: #1076
I feel like the dark theme isn't very consistant in term of color : the dark green/cyan of the background is not in the same range as the grey from the sidebar.
So I tried to hack around a little to get something that make me feel better.
My small changes weren't in the scope of the theming system which is only global CSS and doesn't affect the scoped CSS of the sidebar for instance.
My color result is probably not to everyone's taste (a bit less groovesharky ;) ).
Per Component Theming
I thought it would have been great to have a theming system that can affect all components in a consistant way. It would allow to :
- make advanced customizations of the front mergeable upstream without breaking everyone's default theme.
- making UI improvements for the community to approve.
- improve the global consistence of the UI incrementally (with scss variables refactoring for exemple) in a safe manner (with kinda release candidates).
This code proposition involve :
- Loading theme scss variables from some global theme file to be usable in vue components styling sections
- A proposition of slight reordering to ease per component per theme styling (distinguishing scoped and unscoped rules)
- A third theme Darkgreen to illustrate the use of per component theming by styling the left sidebar/menu with colors from the dark theme (plus some tweaks).
Everything it's meant to let the previous UI untouched.
To see the changes choose Darkgreen theme in the footer menu :D