storybook 允许用户对选定的背景特性(浅色和深色主题)拥有更多的控制权,

qoefvg9y 于 6个月前发布在其他

关注(0)|答案(1)|浏览(50)

你的功能请求是否与问题相关？请描述

在Discord上关注此请求的Caalyx,我认为将选定的Storybook主题(故事书背景)连接到DOM将带来很大的优势，使用户能够更多地控制主题功能。

描述你希望的解决方案

在切换主题(例如从深色切换到浅色)时，应将与选定主题相关的类应用于body。这将允许用户将组件样式连接到更强大的功能，如设计系统。例如：
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);
}

简而言之，我正在使用Angular Material API加载由一组调色板定义的我们自己的主题，并且在封装为.light-theme或.dark-theme时应用它。目前我正在覆盖preview-body.html,因此默认情况下应用程序采用light-theme: