Estoy usando el preprocesador sass en mi proyecto laravel.
en todas mis hojas de estilo, he usado variables css para todos los colores. todas las variables se almacenan en 'resource/sass/_variables.scss' y se importan al principio de todos los archivos de hojas de estilo.
el interior del archivo '_variables.scss' es algo como esto:
$primary-background:#1b203d; $primary-box-color:#2a2b4a; $primary-border-color: #7277c422; $secoundary-box-color: #393a66; $primary-box-shadow: #1a1b2f; ......y también en mi hoja de estilo he usado variables como esta:
@import 'variables'; #sidebar{ background-color: $secoundary-box-color; border:1px solid $primary-border-color; // ..... }ahora estoy tratando de implementar el cambio de modo oscuro usando variables css.
No tengo idea de cómo cambiar las variables css, considere que todas mis hojas de estilo (con variables) se compilarán y ya no tengo acceso a la variable css en la interfaz.
puede usar propiedades personalizadas css para asignar colores
//_variables.scss $lightTheme: #fff; $darkTheme: #000; //style.css @import 'variables'; :root { --theme: #{$lightTheme}; } body { background-color: var(--theme); } body.dark { --theme: #{$darkTheme}; }