Skip to content

Decouple dark color mode from navigation themes

Scott de Jonge requested to merge 430061-super-sidebar-dark-themes into master

What does this MR do and why?

Requires !142772 (merged) to save color mode into color_mode_id field in database. Also to migrate existing dark mode users with theme_id: 11 to color_mode_id: 2.

Decouple dark color mode from navigation themes

  • Add color_mode_id property to user preferences
  • Add user preferences section
  • Add dark mode theme styles

Why this is important

  1. Add flexibility to dark mode: Users need flexibility to designate theme to visually distinguish GitLab, but dark mode was limiting the sidebar color possibilities.
  2. Abstract color modes towards design tokens: Initialise color modes as a modifier for design token modes in preparation of possible future high-contrast/dimmed etc. possible modes.
  3. Advancing dark mode: Assist in moving dark mode from alpha into a beta stage by introducing color modes.

MR acceptance checklist

Please evaluate this MR against the MR acceptance checklist. It helps you analyze changes to reduce risks in quality, performance, reliability, security, and maintainability.

Screenshots or screen recordings

CleanShot_2024-02-28_at_15.59.23

Indigo

gdk.test_3000_-_profile_preferences

Light Indigo

gdk.test_3000_-profile_preferences__1

Blue

gdk.test_3000_-profile_preferences__2

Light Blue

gdk.test_3000_-profile_preferences__3

Green

gdk.test_3000_-profile_preferences__4

Light Green

gdk.test_3000_-profile_preferences__5

Red

gdk.test_3000_-profile_preferences__6

Light Red

gdk.test_3000_-profile_preferences__7

Gray

gdk.test_3000_-profile_preferences__8

Neutral

gdk.test_3000_-profile_preferences__9

How to set up and validate locally

On master

  1. View user preferences e.g. http://gdk.test:3000/-/profile/preferences
  2. Set theme to "Dark mode (Experiment)"
  3. This should set the theme_id to 11 and verify when switching over to the updated branch that we automatically set:
    1. the color_mode_id to 2 for "Dark (Experimental)" and
    2. the theme_id to 3 for "Neutral"

On MR branch

  1. View user preferences e.g. http://gdk.test:3000/-/profile/preferences
  2. Toggle "Appearance" between light and dark mode
  3. Toggle themes between modes

Related to #430061 (closed)

Edited by Jeremy Elder

Merge request reports