Skip to content

Move application theme classes to html root element from body

Scott de Jonge requested to merge 430052-move-gl-dark-class-to-root-element into master

What does this MR do and why?

gitlab-ui!3724 (merged) introduces automated :root.gl-dark selector for generated CSS custom properties from design tokens. In order to consume CSS custom properties from gitlab-ui design tokens we need to move the .gl-dark class from <body> to <html>.

This change updates all user_application_theme to move form <body> to <html>. This should allow future CSS custom properties for user preference themes to be attached to the :root element.

There should be no visual changes.

Screenshots or screen recordings

CleanShot_2023-11-02_at_11.59.38

How to set up and validate locally

  1. Toggle themes in user preferences
  2. Themes should apply as expected

MR acceptance checklist

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

Related to #430052 (closed)

Edited by Scott de Jonge

Merge request reports