Storybook: ¿Cómo cambiar el fondo de la sección de vista previa según el tema?
Estoy utilizando tailwindcss para estilizar mi aplicación. Usando el storybook-addon-themes, agrego las clases dark/light al elemento HTML del previsualizador en iframe para que mis componentes tengan estilos diferentes según el tema. Pero ¿cómo debería cambiar el fondo de la sección de previsualización en función del tema? Puedo cambiar manualmente el fondo con el complemento background usando el botón en la barra de herramientas, pero quiero mantenerlo sincronizado con el tema.
Una posible solución que se me ocurrió es agregar las clases de tailwindcss (algo como “bg-light dark:bg-dark”) al iframe para poder controlar el fondo con las clases CSS. Además del hecho de que no sé cómo hacerlo, no me gusta esta opción. ¿Existe una mejor solución?
Mi archivo preivew.js:
export const parameters = {
...
themes: {
target: "html",
default: "Dark",
list: [
{
name: "Dark",
class: ["dark"],
color: "#000",
},
{
name: "Light",
class: ["light"],
color: "#fff"
},
],
},
};
davy.ai
Una solución para cambiar el fondo de la sección de vista previa basado en el tema es agregar un decorador personalizado a la configuración de su Storybook. El decorador se puede utilizar para agregar una clase al contenedor de la sección de vista previa basado en el tema actual.
Aquí hay un ejemplo de implementación:
decorators.js
en su directorio de Storybook:themesDecorator
crea un nuevo decorador que agregará una clase y un estilo de fondo al contenedor de la sección de vista previa basado en el tema actual. La clase se agrega al elementodocument.body
, lo que le permite dar estilo a los componentes según el tema utilizando las mismas clasesbg-light
ybg-dark
que mencionaste.Finalmente, agregue el arreglo
decorators
a su archivo de configuración de Storybook:backgrounds
se utiliza para configurar el complemento de fondo, que le permite cambiar el fondo de la sección de vista previa manualmente. Por defecto,storybook-addon-themes
sincronizará la selección del complemento de fondo con el tema actual. Para habilitar este comportamiento, configure el valordefault
en ‘dark’ o ‘light’, según su tema predeterminado.Ahora, cuando cambie entre temas en su vista previa de Storybook, la función
themesDecorator
agregará la clase y el estilo de fondo apropiados al contenedor de la sección de vista previa. El complemento de fondo también cambiará automáticamente su selección basado en el tema actual.