Skip to content

Use neutral color for links in nav sidebar

Michael Le requested to merge mle/neutral-active-sidebar into master

What does this MR do and why?

We want to mute the usage of theme colors in the UI to limit it only to the header.

Change the active link color in the sidebar to be $gray-900. Related discussion #330467 (comment 698442118)

For dark mode, extra liberties were taking to help make the current active state stand out from the other links in the sidebar

  • Inactive text color: inverted $gray-600 = #bfbfbf
  • Active text color: inverted $gray-900 = #fafafa
  • Contrast ratio: 7.14:1 (#bfbfbf on #303030)

Screenshots

Indigo

Current Update
indigo-before indigo-after

Light Indigo

Current Update
light-indigo-before light-indigo-after

Blue

Current Update
blue-before blue-after

Light Blue

Current Update
light-blue-before light-blue-after

Green

Current Update
green-before green-after

Light Green

Current Update
light-green-before light-green-after

Red

Current Update
red-before red-after

Light Red

Current Update
light-red-before light-red-after

Dark

Current Update
dark-before dark-after

Light

Current Update
light-before light-after

Dark Mode

Current Update
darkmode-before darkmode-after

How to set up and validate locally

Numbered steps to set up and validate the change are strongly suggested.

MR acceptance checklist

This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.

Merge request reports