Skip to content

Introduce theme accent custom property

Mark Florian requested to merge 350557-add-css-custom-property-for-theme into master

What does this MR do and why?

  • Introduces theme accent custom property
  • Removes a broken selector/rule
  • Replaces some theme-specific styles out in favour of using the new custom property (so far only affects deprecated tabs using .nav-links, and the emoji picker)

Addresses #350557 (closed).

Screenshots or screen recordings

These screenshots are taken with the Light Red navigation theme applied, and also Dark Mode.

What Before After
(Deprecated) .nav-links tabs
NO VISUAL CHANGE 		before before_style dark_before after after_style after_dark
Emoji picker
NO VISUAL CHANGE 		emoji_before emoji_style_before emoji_dark_before emoji_after emoji_style_after emoji_dark_after

How to set up and validate locally

Deprecated tabs

Usage of the .nav-links class is deprecated, but you can find existing usages by looking at the issues within &3983, or by searching the codebase for nav-links.

  1. Visit a page with .nav-links-styled tabs; at the time of writing, the merge request page itself is one example!

Emoji picker

  1. Visit any issue or merge request with comments, and open a comment's emoji picker.

MR acceptance checklist

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

Edited by Mark Florian

Merge request reports