WIP: Add dark application theme
What does this MR do?
Blunt instrument MVC at a dark theme. Currently serves dark theme if logged in, or light theme if logged out.
- Add some
!default
s to allow overriding our color vars. I've kept changes it to a minimum set to get things not looking terrible. This is a good way to help identify colors/vars we should get rid of (looking at you,$almost-black
) - Generate
application-dark.css
Kitchen-sink screenshot showing as many things as I could fit on one page
Todo
- clean up useless and similar-colored color vars (separate issue)
- move CSS out of vue components (mainly
file_row.vue
) - variable overrides for all uses
lighten
anddarken
functions - lot of hover states left to confirm/verify (starting with MR page)
- make Navbar colors support dark mode
- Remove/replace all colors from
variables.scss
that aren't on a numbered scale - web_ide content area is super broken
- strategy to keep this from becoming unmaintainable. This may be as simple as better code review enforcement of color vars, and/or an outright ban on adding new colors.
What are the relevant issue numbers?
https://gitlab.com/gitlab-org/gitlab-ce/issues/18596
Does this MR meet the acceptance criteria?
not yet
-
Changelog entry added, if necessary -
Documentation created/updated via this MR -
Documentation reviewed by technical writer or follow-up review issue created -
Tests added for this feature/bug -
Tested in all supported browsers -
Conforms to the code review guidelines -
Conforms to the merge request performance guidelines -
Conforms to the style guides -
Conforms to the database guides -
Link to e2e tests MR added if this MR has Requires e2e tests label. See the Test Planning Process. -
Security reports checked/validated by reviewer
Edited by Simon Knox