Skip to content

WIP: Add dark application theme

Simon Knox requested to merge dark-theme into master

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 !defaults 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

gitlab-dark

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 and darken 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
Edited by Simon Knox

Merge request reports