Last active
August 29, 2017 04:22
-
-
Save JeansBolong/0172d047d538b80f26333419e59670de to your computer and use it in GitHub Desktop.
SASS + two different color themes
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// Defining colors =========================================== | |
$color-names : ''; | |
$light-colors : ''; | |
$dark-colors : ''; | |
@mixin define-theme-color( $color-name, $light-color, $dark-color ) { | |
@if ($color-names != "") and (index($color-names, $color-name) != false) { | |
@warn "Theme color $color-name is already defined"; | |
} @else { | |
$color-names: append($color-names, $color-name, comma); | |
$light-colors: append($light-colors, $light-color, comma); | |
$dark-colors: append($dark-colors, $dark-color, comma); | |
} | |
} | |
// Outer mixin, in which the content is duplicated with correct | |
// theme colors =============================================== | |
$current-color-schema: ''; | |
@mixin theme-colors() { | |
$current-color-schema: 'light'; | |
.light-theme & { | |
@content; | |
} | |
$current-color-schema: 'dark'; | |
.dark-theme & { | |
@content; | |
} | |
} | |
// Function for retrieving correct color. Remember to use this | |
// inside the mixin defined above. | |
// FYI: This is actually just a lookup function ============== | |
@function theme-color( $color-name ){ | |
@if ($color-names == "") or (index($color-names, $color-name)) == false { | |
@warn "Theme color \"" + $color-name + "\" is not defined"; | |
@return ""; | |
} @else { | |
$color-index: index($color-names, $color-name); | |
@if ($current-color-schema == "light") { | |
@return nth( $light-colors, $color-index); | |
} @else { | |
@return nth( $dark-colors, $color-index); | |
} | |
} | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
@import "color-mixins"; | |
// name light-theme color dark-theme color | |
@include define-theme-color("component-background", white, black ); | |
@include define-theme-color("component-text", black, green ); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<html> | |
<head> | |
<link rel="stylesheet" href="main.css"> | |
</head> | |
<body class="light-theme"> | |
<!-- or class="dark-theme"; to make collor theme being black --> | |
<div class="some-component"> | |
I'd like to change my colors easily. | |
</div> | |
</body> | |
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
@import "colors"; | |
body { | |
background-color: silver; | |
font-size: 2em; | |
text-align: center; | |
} | |
.some-component { | |
width: 80%; | |
height: 80%; | |
margin-left: 10%; | |
border: 1px dashed silver; | |
@include theme-colors { | |
background-color: theme-color("component-background"); | |
color: theme-color("component-text"); | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment