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.
