scss 支持多个主题和组织所需颜色的个人方法

Posted 2021-05-17

@import 'utils/functions';
@import 'utils/colors';
@import 'themes/default';

@function map-deep-get($map, $keys...) {
  $value: $map;
  @each $key in $keys {
    $value: map-get($value, $key);
  }
  @return $value;
}

$CURRENT_THEME: 'dark';

body {
  background-color: color('background', $CURRENT_THEME)
}

$shared: (
	yellow: #fec52e,
	purple: #ca4392,
	blue: #2259e4,
	sky_blue: #22ade1,
	green: #1bdddb
);

$themes: (
	dark: map-merge(
		$shared_colors,
		(
      text: #887f8c, 
      background: #1c1a1d
    )
	),
	light: map-merge(
		$shared_colors,
		(
      text: #1c1a1d, 
      background: #f5f7f8
    )
	)
);

@function color($key, $theme: 'dark') {
	@return map-deep-get($themes, $theme, $key);

	@return $color;
}