Tengo el siguiente css que se carga en mi proyecto:
// Default theme (light mode) :root { /* Typography */ --col-body-text: #0b0c0c; --col-body-text-light: #505a5f; } // Dark mode theme :root.dark { /* Typography */ --col-body-text: #c5c5c5; --col-body-text-light: #f8f8f8; }En mi aplicación real, esto funciona como se esperaba, sin embargo, en el libro de cuentos, ignora las variables del modo oscuro.
Actualicé mi archivo preview.js para agregar '.dark' al elemento 'HTML cuando se selecciona el modo oscuro, que funciona como se esperaba; de hecho, todos los demás códigos específicos del modo oscuro en los componentes funcionan bien. Son solo esas variables las que se ignoran.
¿Hay algún problema con el uso de :root en el libro de cuentos del que no estoy al tanto o algo así?
si ayuda, aquí está el código que agrega la clase al elemento HTML:
// get an instance to the communication channel for the manager and preview const channel = addons.getChannel() // switch body class for story along with interface theme channel.on('DARK_MODE', isDark => { if (isDark) { document.documentElement.classList.add('dark') } else { document.documentElement.classList.remove('dark') } })Si coloca dicha hoja de estilo en la página HTML (por ejemplo, en el <head> ), el selector :root se refiere a <html> ( https://developer.mozilla.org/en-US/docs/Web/CSS/:root ). Si desea utilizar el selector :root con una clase, debe configurar la clase en el elemento <html> (en lugar de <body> sugerido en otra respuesta), por lo que document.documentElement.classList.add('dark') es correcto.
Hay un patio de recreo que utiliza la sintaxis y las características de Storybook donde creé un ejemplo de trabajo para usted: https://webcomponents.dev/edit/p8TI3583HotsFNWjBMd8/src/index.stories.js
No estoy seguro de si su Storybook está configurado de otra manera, tal vez su hoja de estilo no esté realmente agregada o se sobrescriba en algún lugar más tarde. Verifique también si usa las Propiedades personalizadas de CSS (también conocidas como CSS vars) correctamente, espero que la demostración en funcionamiento también ayude allí.
probar
CSS -> body.dark {
en lugar de :root.dark {
y
channel.on('DARK_MODE', isDark => document.body.classList.toggle('dark', isDark))