search

storybookjs / storybook

Storybook is the industry standard workshop for building, documenting, and testing UI components in isolation
https://storybook.js.org
MIT License
84.25k stars 9.26k forks source link

Allow the users to have more control over the selected background feature (light and dark theme) #16234

Open Tim-arts opened 3 years ago

Tim-arts commented 3 years ago

Is your feature request related to a problem? Please describe Following this request on Discord from Caalyx, I believe there would be a great advantage from connecting the Storybook selected theme (storybook backgrounds) to the DOM, allowing users more control over the theming feature.

Describe the solution you'd like While switching theme (between dark and light for example) a class relative to the selected theme would be applied to the body. This would allow the user to connect the components styling to something more powerful like a Design System. For example:

index.scss

@use '~@angular/material' as mat;
@use './typography' as typography;

@include mat.core();

@import './light-theme/theme';
@import './dark-theme/theme';

@include mat.core(typography.$my-custom-typography-config);

themes/light-theme.scss

@use '~@angular/material' as mat;
@use '../components/button/_button-theme' as button;

@use './palettes' as palettes;

.light-theme {
  $light-primary: mat.define-palette(palettes.$primary);
  $light-accent: mat.define-palette(palettes.$accent);
  $light-warn: mat.define-palette(palettes.$warn);

  $light-theme: mat.define-light-theme((
    color: (
      primary: $light-primary,
      accent: $light-accent,
      warn: $light-warn,
      is-dark: false,
    )
  ));

  @include mat.core-theme($light-theme);
  @include mat.all-component-themes($light-theme);
  @include button.theme($light-theme);
}

In short, I'm using the Angular Material API to load our own theme defined by a new set of palettes, and this applies while it's encapsulated with either a .light-theme or a .dark-theme. Currently I'm overriding the preview-body.html so by default the application takes the light-theme:

<body class="light-theme"></body>

But I would prefer to load this theme dynamically (ideally extracted from the localStorage so the user doesn't have to set it up everytime). But so far I haven't been able to load consistently my themes depending on the selected theme (storybook background)

If you need more information, feel free to comment

shilman commented 3 years ago

cc @yannbf