SCSS css-variable app theming

colors.scss

// This gist allows you to setup simple color management through CSS variables.
$colors: (
  //  NewUi / Back_dark `#161620`
    'bgPrimary': '22, 22, 32',
  //  NewUi / Back_blue `#23232F`
    'bgSecondary': '35, 35, 47',
  //  Background / new `#262740`
    'bgCosmic': '38, 39, 64',
  //  NewUI / white `#FFFFFF`
    'textPrimary': '255, 255, 255',
  //  NewUI / text_blue `#727584`
    'textSecondary': '114, 117, 132',
  //  NewUI / text_gray `#A6A7B9`
    'textGray': '166, 167, 185',
  //  NewUI / cell_back `#23232F`
    'uiCellBlack': '35, 35, 47',
  //  NewUI / element_blue `#65697B`
    'uiElementBlue': '101, 105, 123',
  //  UI / button  `#7289D9`
    'uiButton': '114, 137, 217',
  //  NewUI / element_green`#36BF96`
    'uiGreen': '54, 191, 150',
  //  NewUI / element_red `#BF3668`
    'uiRed': '191, 54, 104',
  //  UI / progress `#6EE0ED`
    'uiProgress': '110, 224, 237',
  //  UI / input `#333344`
    'uiInput': '51, 51, 68'
);

@function useColor($cssVar, $opacity: 1) {
  @return rgba(var(#{$cssVar}), $opacity);
}

:root {
  @each $name, $rgb in $colors {
    --#{$name}: #{$rgb};
  }
}