Skip to content

Instantly share code, notes, and snippets.

@itsmnthn
Last active May 9, 2020 18:21
Show Gist options
  • Save itsmnthn/176d360f4c4e81247cae463289d89f55 to your computer and use it in GitHub Desktop.
Save itsmnthn/176d360f4c4e81247cae463289d89f55 to your computer and use it in GitHub Desktop.
How to use default variable if same variable is not there for dark theme
$themes: (
default: (
logo: url("../images/brand/logo_vertical.svg"),
bg: $bg--light,
text: $text--light,
),
dark: (
logo: url("../images/brand/logo_vertical--invert.svg"),
text: $text--dark,
),
);
@mixin themed() {
@each $theme, $map in $themes {
.theme--#{$theme} & {
$theme-map: () !global;
@each $key, $submap in $map {
$value: map-get(map-get($themes, $theme), '#{$key}');
$theme-map: map-merge($theme-map, ($key: $value)) !global;
}
@content;
$theme-map: null !global;
}
}
}
@function t($key) {
@return map-get($theme-map, $key);
}
.base {
@include themed() {
color: t($text);
background: t($bg);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment