Skip to content

Instantly share code, notes, and snippets.

@jbrz0
Created April 25, 2016 06:03
Show Gist options
  • Save jbrz0/9e4e5e4af9effb6987a35d88ec5d750d to your computer and use it in GitHub Desktop.
Save jbrz0/9e4e5e4af9effb6987a35d88ec5d750d to your computer and use it in GitHub Desktop.
Define a multi-colored theme in your Sass stylesheet
//Create the mixin for theme colors
@mixin theme($name, $color) {
// Define colors in your theme
$primary: $color;
$secondary: lighten(adjust-hue($color, 20), 10%);
// Add your classes with css colors added
.#{$name} {
.element {
color: $primary;
}
.other-element {
background: $secondary;
}
}
}
// Using the theme
@include theme(theme-banana, yellow);
// Output
.theme-banana .element {
color: yellow;
}
.theme-banana .other-element {
background: #bbff33;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment