0

I'm trying to implement dark mode and want to use CSS variables so that I can change colors easily depending on whether light/dark mode is enabled. I'm using the prefers-color-scheme media query in order to display the css variable color changes.

The problem I'm facing is that the project I'm working on contains lots of sass variables that appear in thousands of properties and inside dozens of files, inside of a base bootstrap template.

I tried updating the sass variables to have the CSS variable values. e.g $primary = var(--color-primary), but this doesn't work.

Is there a way that I can redirect these SASS variables to the CSS ones so they are inherited?

I don't really want to start messing with the base bootstrap template as it's so confusing and difficult to maintain. Ideally, I would just want to edit my variables.scss file.

Thanks so much!

Dedot
  • 1
  • 3
  • 1
    I don’t think that’s possible: remember that SCSS/SASS variables are set at build time but CSS variables are dynamic at runtime. So you can’t assign a SCSS/SASS variable to have the value of a CSS variable because at build time it’s not possible to know the latter’s value. – Terry Mar 12 '21 at 21:44
  • Okay thanks for your reply. I was fearing this would be the answer and it looks like Im going to have to start tearing apart the bootstrap theme files – Dedot Mar 12 '21 at 22:40

1 Answers1

0
// _variables.scss


// colors
$gin:#EDF5EE;
$linen:#FCF4EC;
$white:#FFFFFF;
$zircon:#EBF3FE;
$goblin:#00803C;
$cinnabar:#DC0700;

$colors: () !default;

$colors: map-merge(
  (
    "gin": $gin,
    "white": $white,
    "linen": $linen,
    "goblin": $goblin,
    "zircon": $zircon,
    "cinnabar": $cinnabar,
  ),
  $colors);

:root {
  --gin: #{$gin};
  --white: #{$white};
  --linen: #{$linen};
  --goblin: #{$goblin};
  --zircon: #{$zircon};
  --cinnabar: #{$cinnabar};
}



// Credit: https://github.com/lawrenceadu
King David
  • 11
  • 1