2

I am working on a Sass project and I am pretty new to it.

I have a _variables.scss file which contains the variables for UI. I want to change the values of those variables dynamically (not creating new ones), with the use of React. How can I do so?

Expected Outcome is something like: In scss file, Check if dark mode is active or not and define a set of variables.

In js file, Change the state of light and dark mode programmatically.

crosie
  • 45
  • 1
  • 4

2 Answers2

1

Create SCSS folder and put your all the application .scss files inside there.

$themes: (
  light: (
    colorBackground: white,
    colorBackgroundBody: #f2f4f7,
    colorHeaderDataPicker:#6db0ff,
    colorText: #646777,
    colorTextAdditional: #646777,
    logoImg: url(../../shared/img/logo/oiclogo.png),
    colorHover: #fafbfe,
    colorFolderHover: #f0eeee,
    colorBorder: #eff1f5,
    colorIcon: #dddddd,
    imgInvert: invert(0%),
    colorFieldsBorder: #f2f4f7,
    colorBubble: rgba(242, 244, 247, 0.65),
    colorBubbleActive: rgba(234, 238, 255, 0.6),
    colorScrollbar: #B4BFD0,
    colorFitness: #646777,
    colorEmoji: #232329,
  ),
  dark: (
    colorBackground: #232329,
    colorBackgroundBody: #2a2a31,
    colorHeaderDataPicker:#063263,
    colorText: #dddddd,
    colorTextAdditional: #999999,
    logoImg: url(../../shared/img/logo/oiclogo.png),
    colorHover: #38373f,
    colorFolderHover: #ffffff1A,
    colorBorder: #333246,
    colorIcon: #605f7b,
    imgInvert: invert(100%),
    colorFieldsBorder: #33333a,
    colorBubble: rgba(68, 79, 97, 0.65),
    colorBubbleActive: rgba(92, 104, 156, 0.6),
    colorScrollbar: #606071,
    colorFitness: #ffffff,
    colorEmoji: #ffffff,
  )
);

Use this structure in _variables.scss file and change the property accordingly

dinesh oz
  • 342
  • 1
  • 9
1

You can use something like this:

$dark: #333
$white: #fff

@if $theme == 'dark' {
  color: $dark;
}

@if $theme == 'light' {
  color: $light;
}

This approach is described at sass lang website. You can set $theme variable as regular variable as described in example in documentation.

If you are using webpack as a module bundler and sass-loader package as sass builder, you can set $theme variable in the webpack config:

{
  loader: 'sass-loader',
  options: {
    additionalData: "$theme: 'dark';",
  },
}

Also I would highly reccomend you to read about prefered-color-scheme media querie if you will have only light and dark themes. It allows to takes into consideration users operation system defaults.

Mike Kokadii
  • 509
  • 5
  • 17
  • Hi. It looks like preferred-color-scheme is soon going to be deprecated. Mozilla states "Deprecated. Not for use in new websites." at the end. I get that the variables can be changed from the webpack config, but what I want is a dynamic approach. The themes should change on press of a button. Is it not possible? – crosie Mar 10 '22 at 11:59
  • 1
    I think this message about its deprecation is appearing there by accident. There is neither word about it on W3C deprecated media queries page or W3C prefered color sceme rule. Check it: https://www.w3.org/TR/mediaqueries-5/#mf-deprecated https://www.w3.org/TR/css-color-adjust-1/#preferred – Mike Kokadii Mar 10 '22 at 12:18