How do you expect to use the dark theme values with Sass? If I understand correctly, Sass outputs compiled values only, so .dark-theme scope would have the same problem that :root scope had.

With vanilla CSS variables, we provide .dark-theme class name to facilitate automatic theme changes. This way you would put .dark-theme on html or body element to toggle the theme globally.

It seems that in Sass you need to output these variables into global scope too and handle theming manually?

Was just trying out Radix Colors and tried to @import the CSS files into my SCSS setup and I ran into this problem exactly - applying .dark-theme to body has no effect.

Promoting .dark-theme to :global scope in the exported SCSS files solves it for me. It behaves the same way as the CSS version afaict.

It seems that in Sass you need to output these variables into global scope too and handle theming manually?

you can do both, continue to use CSS custom props referencing sass vars for the automatic theming and also use sass vars elsewhere

$root: ":root" !default;
$gray1: hsl(0, 0%, 99.0%) !default;
#{$root} {
  --gray1: #{$gray1};
}

and similar for the dark

$root: ".dark-theme" !default;
$gray1: hsl(0, 0%, 8.5%) !default;
#{$root} {
  --gray1: #{$gray1};
}