Generated by SassMeister.com.

input.scss

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

@mixin theme($theme, $rgb: ui-background) {
    @each $key, $value in $theme {
        --#{$key}: #{$value};
        @if list.index($rgb, $key) != null {
            --#{$key}-rgb: #{color.red($value)}, #{color.green($value)}, #{color.blue($value)};
        }
    }
}

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

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

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

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

.full {
    @include theme($light, $rgb: (ui-background, text-color));
}

output.css

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

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

.full {
  --ui-background: #f3f3f3;
  --ui-background-rgb: 243, 243, 243;
  --text-color: black;
  --text-color-rgb: 0, 0, 0;
}

settings.json

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