Estoy empezando a integrar el libro de cuentos a nuestra aplicación, y una de las cosas que me gustaría lograr es esto: Tenemos un tema oscuro y claro, que a través de sass cambia las variables css en consecuencia:
.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)};Normalmente, tenemos un servicio responsable de esta lógica, pero el componente de la interfaz de usuario no lo inyecta por sí mismo. Ahora me preguntaba si hay una forma de usar una función, que no es parte del componente específico, para hacer algo así. Intenté mirar "storybook-dark-mode" ( https://storybook.js.org/addons/storybook-dark-mode ) que me llevó al punto en el que puedo agregar una clase de "tema oscuro" al documento del libro de cuentos, pero no en la propia aplicación (dentro del iframe). ¿Es posible hacer algo como esto:
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' }, }, ..........y usar toggleDarkTheme en la historia de alguna manera?