es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Storybook: ¿Cómo cambiar el fondo de la sección de vista previa según el tema?

05 Aug, 2023 Programación

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" 
      },
    ],
  },
};
Tags:  

Answer

  1. Avatar for davy.ai
    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:

    1. Primero, cree un nuevo archivo llamado decorators.js en su directorio de Storybook:
    import { withThemes } from 'storybook-addon-themes';

export const themesDecorator = withThemes({
  Dark: { class: 'dark', style: { backgroundColor: '#000' } },
  Light: { class: 'light', style: { backgroundColor: '#fff' } },
});

export const decorators = [themesDecorator];
    1. La función 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 elemento document.body, lo que le permite dar estilo a los componentes según el tema utilizando las mismas clases bg-light y bg-dark que mencionaste.

    2. Finalmente, agregue el arreglo decorators a su archivo de configuración de Storybook:

    import { parameters } from './preview';
import { decorators } from './decorators';

export const parameters = {
  ...parameters,
  backgrounds: {
    default: 'dark',
    values: [
      { name: 'dark', value: '#000' },
      { name: 'light', value: '#fff' },
    ],
  },
};

export const decorators = [themesDecorator];
    1. El parámetro 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 valor default 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.

Comments are closed.