I just want to change the value of the Sass variables shown below from theme.scss inside a react component.
theme.scss
$backgroundColor: #fff;
$secondaryColor: #000;
React Component
useEffect(() => {
// i want to change the Sass variable here inside this hook
// so that when the state changes the color changes
}, [state])
You can use CSS variables to achieve themes in below steps:
Add a custom data-* attribute in body of index.html file:
<body data-theme="light"> <!-- Let's name it data-theme and start with light -->
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>
And, define CSS variables, as many as you need, for all (you can have more than two themes) the data-* attribute values i.e. themes:
body[data-theme='light'] {
--body-bg: white;
--color: black;
}
body[data-theme='dark'] {
--body-bg: black;
--color: white;
}
:root {
--primary-color: green;
// you can also set some CSS vars (that are common to all the themes) on :root
}
And, here is an example how to use these CSS variables for a tag (or class):
body {
color: var(--color) !important; // Here
background-color: var(--body-bg) !important; // And, Here
font-family: 'Segoe UI', 'Roboto'; // Ignore it, just for example
}
// example using in a class
.some-class {
color: var(--color);
background-color: var(--body-bg);
}
You can now create some utility functions that would switch between the themes:
export function setLightTheme() {
document.getElementsByTagName('body')[0].setAttribute('data-theme', 'light')
}
export function setDarkTheme() {
document.getElementsByTagName('body')[0].setAttribute('data-theme', 'dark')
}
You can import the above functions in any component to change the theme as you need.
$color of darken($color, $amount) must be a color on line 39 of F:\Tech Projects\REACT PROJECTS\portfolio_react\src\Screens\HomeScreen.scss, in function darken from line 39 of stdin >> background: darken(var(--primary-color), 3); "
darken is not possible (in simple ways). Because SASS functions like darken gets compiled and calculated to some color value (no variable after getting compiled into CSS). You should think of other theme options, not this (using CSS vars).
$colorofdarken($color, $amount)must be a color on line 39 of F:\Projects\REACT PROJECTS\react\src\Screens\HomeScreen.scss, in functiondarkenfrom line 39 of stdin >> background: darken(var(--primary-color), 3);