UNPKG

1.25 kBSCSSView Raw
1@import 'variables';
2
3// conditional overrides for dark mode for use in storybook.
4// Because we only use application.css from gitlab (and not
5// application_dark), we need to override some base rules so
6// that we can more easily test components in dark mode
7
8// This is because dark mode in gitlab currently depends on
9// overriding SCSS variables, but we want gitlab-ui dark mode
10// to use Custom Properties instead
11
12.gl-dark {
13 --color-body-bg: #1f1f1f;
14
15 // Note that we are assigning variables with different values due to the way GitLab inverts variables in dark mode.
16 // e.g. text color is usually $gray-900, but in dark mode $gray-900 variable gets inverted to $gray-50
17 --gl-text-color: #{$gray-50};
18 --white: #{$gray-900}; // define mapping between the colours in dark mode. I have used the values from GitLab for consistency: https://gitlab.com/gitlab-org/gitlab/-/blob/master/app/assets/stylesheets/themes/_dark.scss
19 --gray-10: #{$gray-950};
20 --gray-600: #{$gray-300};
21
22 color-scheme: dark;
23
24 &,
25 body {
26 // We can delete these once $body-bg and $body-color
27 // variables in variables.scss are updated to use CSS custom properties
28 background-color: var(--color-body-bg);
29 color: var(--gl-text-color);
30 }
31}