2

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])
Arkellys
  • 5,562
  • 2
  • 16
  • 40
Ajmal
  • 21
  • 5
  • You can't change SASS variables dynamically, once the styles is compiled the variables don't exist anymore. You should use [CSS variables](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties) instead. – Arkellys Mar 26 '21 at 14:41
  • I get error when I use css variables inside Sass functions.. SassError: argument `$color` of `darken($color, $amount)` must be a color on line 39 of F:\Projects\REACT PROJECTS\react\src\Screens\HomeScreen.scss, in function `darken` from line 39 of stdin >> background: darken(var(--primary-color), 3); – Ajmal Mar 27 '21 at 12:53

1 Answers1

1

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.

Ajeet Shah
  • 18,551
  • 8
  • 57
  • 87
  • 1
    Thanks for your feedback. I get error when I use css variables inside Sass functions like darken and inside custom functions too. "SassError: argument `$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); " – Ajmal Mar 27 '21 at 12:55
  • That is tricky. Try this : https://codyhouse.co/blog/post/how-to-combine-sass-color-functions-and-css-variables Let me if it doesn't work, I can try too. – Ajeet Shah Mar 27 '21 at 13:08
  • That blog suggests to define a function in Sass as well as some extra variables for applying lightness to a color makes it complicated and it doesn't work for me too. – Ajmal Mar 28 '21 at 06:57
  • I think using CSS Variables in SASS functions like `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). – Ajeet Shah Mar 28 '21 at 15:20
  • [This answer](https://stackoverflow.com/a/51893071/2873538) is of no use. But [this answer](https://stackoverflow.com/a/56607417/2873538), not sure if it works, looks complex. – Ajeet Shah Mar 28 '21 at 15:26
  • 1
    I tried that one but never worked for me. As you've said, I should look for some other theme options. – Ajmal Mar 31 '21 at 19:08
  • Sure, I need to explore it too. I was looking for an easy way for getting that done. But nothing works as I expected. – Ajmal Apr 01 '21 at 15:53
  • It (CSS vars) worked for me in my project because I didn't write any SASS functions. And the ones that were in some libraries didn't bother me (somehow) because I used Bootstrap SCSS and changed the SASS parent colors as per my need. – Ajeet Shah Apr 01 '21 at 15:57