Skip to content

Instantly share code, notes, and snippets.

@joeyfigaro
Created December 15, 2017 21:15
Show Gist options
  • Save joeyfigaro/af6227fb96dbb72ff0690acfbc1cc378 to your computer and use it in GitHub Desktop.
Save joeyfigaro/af6227fb96dbb72ff0690acfbc1cc378 to your computer and use it in GitHub Desktop.
Personal approach for supporting multiple themes and organizing required colors
$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;
}
$CURRENT_THEME: 'dark';
body {
background-color: color('background', $CURRENT_THEME)
}
@function map-deep-get($map, $keys...) {
$value: $map;
@each $key in $keys {
$value: map-get($value, $key);
}
@return $value;
}
@import 'utils/functions';
@import 'utils/colors';
@import 'themes/default';
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment