Estoy trabajando en un proyecto de Sass y soy bastante nuevo en esto.
Tengo un archivo _variables.scss que contiene las variables para la interfaz de usuario. Quiero cambiar los valores de esas variables dinámicamente ( sin crear nuevas ), con el uso de React. ¿Como lo puedo hacer?
El resultado esperado es algo así como: en el archivo scss, verifique si el modo oscuro está activo o no y defina un conjunto de variables.
En el archivo js, cambie el estado del modo claro y oscuro mediante programación.
Cree la carpeta SCSS y coloque todos los archivos .scss de la aplicación allí.
$themes: ( light: ( colorBackground: white, colorBackgroundBody: #f2f4f7, colorHeaderDataPicker:#6db0ff, colorText: #646777, colorTextAdditional: #646777, logoImg: url(../../shared/img/logo/oiclogo.png), colorHover: #fafbfe, colorFolderHover: #f0eeee, colorBorder: #eff1f5, colorIcon: #dddddd, imgInvert: invert(0%), colorFieldsBorder: #f2f4f7, colorBubble: rgba(242, 244, 247, 0.65), colorBubbleActive: rgba(234, 238, 255, 0.6), colorScrollbar: #B4BFD0, colorFitness: #646777, colorEmoji: #232329, ), dark: ( colorBackground: #232329, colorBackgroundBody: #2a2a31, colorHeaderDataPicker:#063263, colorText: #dddddd, colorTextAdditional: #999999, logoImg: url(../../shared/img/logo/oiclogo.png), colorHover: #38373f, colorFolderHover: #ffffff1A, colorBorder: #333246, colorIcon: #605f7b, imgInvert: invert(100%), colorFieldsBorder: #33333a, colorBubble: rgba(68, 79, 97, 0.65), colorBubbleActive: rgba(92, 104, 156, 0.6), colorScrollbar: #606071, colorFitness: #ffffff, colorEmoji: #ffffff, ) );Use esta estructura en el archivo _variables.scss y cambie la propiedad en consecuencia
Puedes usar algo como esto:
$dark: #333 $white: #fff @if $theme == 'dark' { color: $dark; } @if $theme == 'light' { color: $light; } Este enfoque se describe en el sitio web de sass lang. Puede configurar la variable $theme como una variable regular como se describe en el ejemplo de la documentación.
Si está utilizando un paquete web como un paquete de módulos y un paquete sass-loader como un generador de sass, puede configurar la variable $theme en la configuración del paquete web:
{ loader: 'sass-loader', options: { additionalData: "$theme: 'dark';", }, } También le recomiendo encarecidamente que lea sobre la consulta de medios prefered-color-scheme si solo tiene temas claros y oscuros. Permite tener en cuenta los valores predeterminados del sistema operativo de los usuarios.