Dark mode
This page is about developing dark mode for GitLab. For more information on how to enable dark mode, see Profile preferences.
How dark mode works
Current approach
- GitLab UI includes light and dark mode design tokens CSS custom properties for colors and components.
- Semantic design tokens provide values for light and dark mode in general usage, for example: background, text, and border colors.
Legacy approach
- SCSS variables for the color palette are reversed using design tokens to provide darker colors for smaller scales.
app/assets/stylesheets/color_modes/_dark.scss
imports dark mode design tokens SCSS variables for colors.- Bootstrap variables overridden in
app/assets/stylesheets/framework/variables_overrides.scss
are given dark mode values in_dark.scss
. _dark.scss
is loaded beforeapplication.scss
to generate separateapplication_dark.css
stylesheet for dark mode users only.
Utility classes
Design tokens for dark mode can be applied with Tailwind classes (gl-text-subtle
) or with @apply
rule (@apply gl-text-subtle
).
CSS custom properties vs SCSS variables
Design tokens generate both CSS custom properties and SCSS variables which are imported into the dark mode stylesheet.
- CSS custom properties: are preferred to update color modes without loading a color mode specific stylesheet, and are required for any colors within the
app/assets/stylesheets/page_bundles
directory. - SCSS variables: override existing color usage for dark mode and are compiled into a color mode specific stylesheet.
Page bundles
To support dark mode CSS custom properties should be used in page_bundle
styles as we do not generate separate
*_dark.css
variants of each page_bundle
file.
Docs
Edit this page to fix an error or add an improvement in a merge request.
Create an issue to suggest an improvement to this page.
Product
Create an issue if there's something you don't like about this feature.
Propose functionality by submitting a feature request.
Feature availability and product trials
View pricing to see all GitLab tiers and features, or to upgrade.
Try GitLab for free with access to all features for 30 days.
Get help
If you didn't find what you were looking for, search the docs.
If you want help with something specific and could use community support, post on the GitLab forum.
For problems setting up or using this feature (depending on your GitLab subscription).
Request support