Search code examples
htmlsassstyling

Overwrite SASS colors, e.g with data-attributes

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?

Solution

  • 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.