0

我开始将故事书集成到我们的应用程序中，我想要实现的目标之一是：我们有一个深色和浅色主题，通过 sass 相应地更改 css 变量：

.dark-theme {
  @include theme-colors(true);
}

and: 
@mixin theme-colors($dark-theme) {
  --wc-black-to-white-alpha-7: #{if($dark-theme, $white-alpha-7, $black)};

通常，我们有一个服务负责这个逻辑，但是 UI 组件不会自己注入它。现在我想知道是否有一种方法可以使用不属于特定组件的函数来执行类似的操作。我试过查看“storybook-dark-mode”（https://storybook.js.org/addons/storybook-dark-mode），这让我可以添加一个“dark-theme”类到故事书的文档，但不在应用程序本身中（在 iframe 内）。是否有可能做这样的事情：

import { CommonModule } from '@angular/common';
import { componentWrapperDecorator, Meta, moduleMetadata, Story } from '@storybook/angular';
import { chipStyles } from '@wc/wc-models/src/lib/enums/general';
import { WcChipComponent } from './wc-chip.component';

const styleValues = Object.values(chipStyles);

function toggleDarkTheme() {
 add the .dark-theme class here.
}

export default {
  title: 'wc-chip',
  component: WcChipComponent,
  argTypes: {
    style: {
      options: styleValues,
      control: { type: 'select' },
    },
    _chipClicked: { action: 'clicked' },
  },
 ..........

并以某种方式在故事中使用toggleDarkTheme？

4

0 回答 0