Skip to content

Fix timeline content dark mode rendering

Scott de Jonge requested to merge sdejonge-fix-timeline-dark-mode into master

What does this MR do and why?

Raised in #is-this-known Slack thread timeline content rendered light mode colors in dark mode for targeted links and internal notes.

This is due to changes in !165568 (merged) moving _timeline.scss to a page bundle without updating color usage to use CSS custom properties.

Because page bundle stylesheets do not get generated for all modes (default and dark mode) they require CSS custom properties so that dark mode values are set correctly, see: https://docs.gitlab.com/ee/development/fe_guide/dark_mode.html#scss-variables-vs-css-custom-properties

MR acceptance checklist

Screenshots or screen recordings

Before After
gdk.test_3443_flightjs_Flight_-issues_33__2 gdk.test_3443_flightjs_Flight_-issues_33__1
gdk.test_3443_flightjs_Flight_-issues_33__4 gdk.test_3443_flightjs_Flight_-issues_33__3

How to set up and validate locally

  1. View issuable content which contains notes e.g. Issue comments https://gdk.test:3443/flightjs/Flight/-/issues/33#note_1446
  2. Link to a specific comment, it should be blue
  3. Add an internal note, it should be orange
  4. It should work correctly in light and dark mode

Merge request reports