Estoy desarrollando una biblioteca de componentes de reacción e hice una pregunta importante. Cómo cambiar correctamente los estilos (css) al cambiar el tema de la aplicación.
Apela a los que ya tienen experiencia en esto y que puedan aconsejar su planteamiento o solución.
Ahora te cuento como me funciona a mi:

Tengo mi propio proveedor de temas envuelto en un Contexto con la capacidad de cambiar el tema. Cuando el tema cambia en el proveedor, se llama al método changeCssVariables.

 export const changeCssVariables = (theme) => { const root = document.querySelector(':root'); // root.style.setProperty('--default-color', 'orange'); const cssVariables = [ 'color', 'background', 'color-uibutton', 'background-uibutton', 'box-shadow-uibutton', 'color-disabled-uibutton', 'background-disabled-uibutton', 'background-uiradiobutton', 'color-uiinputext', 'color-notes-uiinputext', 'color-subsection', 'background-subsection', 'box-shadow-subsection', 'alt-subsection', 'on-subsection', 'off-subsection', ]; cssVariables.forEach(element => { root.style.setProperty( `--default-${element}`, `var(--theme-${theme}-${element})` ); }) }

Lo que pasa en general: tiene un CSS global con variables por defecto, temas claros y oscuros. Al cambiar el tema, se llama a un método que cambia la variable predeterminada a la variable del tema seleccionado.
Ejemplo CSS:

 --default-color: var(--theme-light-color); /* Themes */ --theme-light-color: #000; --theme-dark-color: #fff;

No me gusta que tengas que extraer todo el CSS y cambiarlo de esta manera. ¿Cuál es la solución? ¡Gracias por la ayuda!