@gitlab/ui/src/scss/storybook_dark_mode.scss

@import 'variables';

// conditional overrides for dark mode for use in storybook.
// Because we only use application.css from gitlab (and not
// application_dark), we need to override some base rules so
// that we can more easily test components in dark mode

// This is because dark mode in gitlab currently depends on
// overriding SCSS variables, but we want gitlab-ui dark mode
// to use Custom Properties instead

.gl-dark {
  --color-body-bg: #1f1f1f;

  // Note that we are assigning variables with different values due to the way GitLab inverts variables in dark mode.
  // e.g. text color is usually $gray-900, but in dark mode $gray-900 variable gets inverted to $gray-50
  --gl-text-color: #{$gray-50};
  --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
  --gray-10: #{$gray-950};
  --gray-600: #{$gray-300};

  color-scheme: dark;

  &,
  body {
    // We can delete these once $body-bg and $body-color
    // variables in variables.scss are updated to use CSS custom properties
    background-color: var(--color-body-bg);
    color: var(--gl-text-color);
  }
}