I'm using sass preprocessor on my laravel project.
on all of my stylesheets, i've used css variables for all colors. all of the variables are stored in 'resource/sass/_variables.scss' and imported in the begining of all stylesheet files.
the inside of '_variables.scss' file is something like this:
$primary-background:#1b203d;
$primary-box-color:#2a2b4a;
$primary-border-color: #7277c422;
$secoundary-box-color: #393a66;
$primary-box-shadow: #1a1b2f;
......
and also in my stylesheet i've used variables like this:
@import 'variables';
#sidebar{
background-color: $secoundary-box-color;
border:1px solid $primary-border-color;
// .....
}
now i'm trying to implement dark mode switch using css variables.
I have no idea how to change css variables, consider it that all my stylesheets (with variables) will be compiled and i have no longer access to css variable on the frontend!
you can use css custom properties to assign colors
//_variables.scss
$lightTheme: #fff;
$darkTheme: #000;
//style.css
@import 'variables';
:root {
--theme: #{$lightTheme};
}
body {
background-color: var(--theme);
}
body.dark {
--theme: #{$darkTheme};
}