Created
September 3, 2013 14:41
-
-
Save kaplas/6424861 to your computer and use it in GitHub Desktop.
SASS + two different color themes + easy and clean to use + clean CSS output = pure awesomeness!
This file contains hidden or 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 hidden or 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 hidden or 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"; use your JavaScript skills here, young padawan --> | |
| <div class="some-component"> | |
| I'd like to change my colors easily. | |
| </div> | |
| </body> | |
| </html> |
This file contains hidden or 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"); | |
| } | |
| } |
Same as above, this code is logically not correct
null
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
I am compiling your scss files but this is showing in css file
.theme-light .some-component {
background-color: "";
color: ""; }
.dark-theme .some-component {
background-color: "";
color: ""; }