0

I'm trying to achieve something similar like here: How to override css prefers-color-scheme setting, with the difference that I'm using SCSS.

There are some top-level variables defined:

$content-primary: #000000;
$content-secondary: #FFFFFF;

I want to overwrite those values, depending on the information on the client (localStorage, media query). I started by setting the data-attribute to the html element, e.g. document.documentElement.setAttribute("data-theme", "dark");.

// Some SCSS magic here checking data attributes
// When data-theme="dark" is set, the following should be applied:
$content-primary: #F1F1F1;
$content-secondary: #222222;

I've tried to use the same logic as in the related question, but that does not work.

[data-theme="dark"] {
    $content-primary: #F1F1F1;
    $content-secondary: #222222;
}

Is this somehow possible?

omg_me
  • 69
  • 1
  • 6

1 Answers1

1

I have done theming on a project and used !default Click here to read documentation

But seeing what you want to do, I suggest you to use native CSS var(--content-primary)

This Basic CSS variables can be overwritten not only based on attribute/class/parent etc. But also based on Media Query which makes them an incredible versatile tool.

Eugene
  • 606
  • 7
  • 21
  • Thank you. I solved it with `:root { --content-primary: #000000; --content-secondary: #616161; } $content-primary: var(--content-primary); $content-secondary: var(--content-secondary); [data-theme=dark] { --content-primary: #F1F1F1; --content-secondary: #999999; } `. That way I can keep the variables I have at other places in my `.scss` files. Just out of curiosity... Is this an improper solution, i.e. is `!default` cleaner? – omg_me Sep 16 '20 at 19:55
  • `!default` is definitely cleaner, especially if you want to have two separate files for color themes, e.g. default Light theme in base.light.scss with `!default`, and in base.dark.scss you just import there base.light.scss and redefine those colors, simple as that. But then you wont have dynamically switching colors based on a selector. – Eugene Sep 17 '20 at 10:14
  • Ok, thanks for the feedback! I definitely want to give the users the possibility to switch between dark and light theme. – omg_me Sep 17 '20 at 11:53