How to share value from js object to sass variable in react-js?

Question

I'm trying to change my application theme colors dynamically. I want to get object from the server that has the values of the colors by JavaScript, then pass these values to sass variables.

I found many articles about this but nothing worked for me below some of them:

https://itnext.io/sharing-variables-between-js-and-sass-using-webpack-sass-loader-713f51fa7fa0

https://github.com/pmowrer/node-sass-json-importer#node-sass-json-importer

Is there a way to import variables from javascript to sass or vice versa?

https://frontend-cookbook.ack.ee/pages/implementation/SharingVariables.html

score 3 · Answer 1 · answered Jan 10 '20 at 05:22

I suggest you to use inline styling for that theme color

<SomeComponent className={this.state.themeColor === 'black'? 'classDarkMode' : 'classNormalMode'} />

You might also use lib like styled components that allow you to pass props directly into styles

score 2 · Accepted Answer · answered Jan 10 '20 at 11:14

2

Using javascript you can not change the value of scss files because scss is compiled into css in the server and then sent to the client where the javascript is executed.

However you can achieve that via css variables (more here). You could use css variables with a default value and then change the value of the variable via JS.

answered Jan 10 '20 at 11:14

Andreas Traganidas

497
1
6
13

2

thanks, this was a useful answer, i did it )... i read to articles helped me to figure out how to pass value from js to css : https://vanseodesign.com/css/custom-properties-and-javascript/ https://medium.com/better-programming/theming-react-with-css-variables-bb9efd5f1918 example: https://codesandbox.io/s/css-theming-pn0to – mostafa elbanna Jan 10 '20 at 18:22
@mostafaelbanna you found the better way to achieve what you want (if styled-components, etc are not an option), so it'd be best if you wrote an answer! – Emile Bergeron Jan 10 '20 at 18:51
@mostafaelbanna would be curious to see the solution! – Littlemad Sep 29 '22 at 23:47

score 0 · Answer 3 · answered Feb 27 '22 at 21:31

Another easy way is injecting color variables into your head! :)

Example:

Create utils/addStyle.js and add the addStyle function in it like this:

function addStyle(styleString) {
  const style = document.createElement("style");
  style.textContent = styleString;
  document.head.append(style);
}

export default addStyle;

... and then in your config/colors.js:

import addStyle from "../utils/AddStyle";

const colors = {
  primary: "#0084E7",
  primaryLighter: "#2897ec",
  primaryLightest: "#4db2ff",
  primaryWhitish: "#bbe0fd",
  primaryDarker: "#0076d1",
  primaryDarkest: "#016abb",
  primaryText: "#fff",
  secondary: "#FFE801",
  secondaryLightest: "#fffbd7",
  secondaryText: "#000",
};

addStyle(`
  :root {
    --color-primary: ${colors.primary};
    --color-primaryLighter: ${colors.primaryLighter};
    --color-primaryLightest: ${colors.primaryLightest};
    --color-primaryWhitish: ${colors.primaryWhitish};
    --color-primaryDarker: ${colors.primaryDarker};
    --color-primaryDarkest: ${colors.primaryDarkest};
    --color-secondary: ${colors.secondary};
    --color-secondaryLightest: ${colors.secondaryLightest};
  }
`);

export default colors;

Now you can use these colors both in css/scss and in js files! E.g., to share colors between MUI and sass files. So in MUI, you use these colors by importing the exported colors object:

import colors from "../config/Colors";
// in your theme:
  palette: {
    primary: {
      main: colors.primary,
      lighter: colors.primaryLighter,
//...

and in your scss files like this:

.classname {
  background-color: var(--color-secondaryLightest)
}

_{Credit: This answer was inspired by this article by Santiago Vilar.}

How to share value from js object to sass variable in react-js?

3 Answers3