$themes: (
    dark: (
        background: #141414,
        background-line: #202324,
        background-fore: #10141f,
        border-color: #819796,
        text: #ebede9,
        link: #a4dddb,
    ),
    light: (
        background: #ffffff,
        background-line: #f0f0f0,
        background-fore: #ffffff,
        border-color: #e0e0e0,
        text: #1e1e1e,
        link: #ff7d74,
    )
);

@mixin theme-vars($theme-map) {
  @each $name, $value in $theme-map {
    --color-#{$name}: #{$value};
  }
}

:root {
  @include theme-vars(map-get($themes, dark));
}

[data-theme="light"] {
  @include theme-vars(map-get($themes, light));
}