Generated by SassMeister.com.

input.scss

@use 'sass:color';
@use 'sass:map';

@mixin theme($theme) {
    @each $key, $value in $theme {
        --#{$key}: #{$value};
    }
}

$light: (
  ui-background: #f3f3f3,
  text-color: black,
);

$dark: (
  ui-background: black,
  text-color: white,
);

:root {
    @include theme($light);
}

.dark {
    @include theme($dark);
}

@mixin format($theme, $tokens, $format: 'rgb') {
    @each $token in $tokens {
        $value: map.get($theme, $token);
        
        @if $format == 'rgb' {
            --#{$token}-rgb: #{color.red($value)}, #{color.green($value)}, #{color.blue($value)};
        }
    }
}

.my-selector {
    @include format($light, ui-background);
    
    background: rgba(var(--ui-background-rgb), 0.25);
}

output.css

:root {
  --ui-background: #f3f3f3;
  --text-color: black;
}

.dark {
  --ui-background: black;
  --text-color: white;
}

.my-selector {
  --ui-background-rgb: 243, 243, 243;
  background: rgba(var(--ui-background-rgb), 0.25);
}

settings.json

{
  "sass": {
    "compiler": "dart-sass/1.26.11",
    "extensions": {},
    "syntax": "SCSS",
    "outputStyle": "expanded"
  },
  "autoprefixer": false
}