Simply change the variable $theme in the SCSS code (line 43). Choose $zenburn or $monokai.
A Pen by Gregor Adams on CodePen.
Created
October 19, 2014 20:38
-
-
Save cythux/1337fd691a9e7415c05e to your computer and use it in GitHub Desktop.
A Pen by Gregor Adams.
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
| h1 Easy color-schemes with Sass (SCSS) | |
| p Simply change the variable | |
| code.hl | |
| span.var $theme | |
| | in the SCSS code (line 43). Choose | |
| code.hl | |
| span.var $zenburn | |
| | or | |
| code.hl | |
| span.var $monokai | |
| |. | |
| br | |
| br | |
| | This demo shows syntax highlighting (obvious usecase) but this can be used for any kind of theme. | |
| br | |
| | This makes it very easy to switch an entire color-scheme by simply adding a new "theme-map" and setting the variable | |
| code.hl | |
| span.var $theme | |
| h2 Example usecase | |
| p This shows how a syntax-highlighting theme can easily be switched. | |
| pre.hl | |
| span.sel .selector | |
| span.par { | |
| br | |
| span.indent._4 | |
| span.prop background | |
| span.punct : | |
| span.color #f0a | |
| span.punct ; | |
| br | |
| br | |
| span.indent._4 | |
| span.oper & | |
| span.sel :before | |
| span.par { | |
| br | |
| span.indent._8 | |
| span.prop content | |
| span.punct : | |
| span.str "hello" | |
| span.punct ; | |
| br | |
| span.indent._4 | |
| span.par } | |
| br | |
| br | |
| span.indent._4 | |
| span.oper & | |
| span.sel :after | |
| span.par { | |
| br | |
| span.indent._8 | |
| span.prop content | |
| span.punct : | |
| span.str "world" | |
| span.punct ; | |
| br | |
| span.indent._4 | |
| span.par } | |
| br | |
| span.par } | |
| h2 Example theme-map | |
| p Simply create a map similar to this one to add a new theme. | |
| pre.hl | |
| span.var $zenburn | |
| span.punct : | |
| span.par ( | |
| br | |
| span.indent._4 | |
| span.key bg | |
| span.punct : | |
| span.color #434443 | |
| span.punct , | |
| br | |
| span.indent._4 | |
| span.key fg | |
| span.punct : | |
| span.color #dcdccc | |
| span.punct , | |
| br | |
| span.indent._4 | |
| span.key key | |
| span.punct : | |
| span.color #dcdccc | |
| span.punct , | |
| br | |
| span.indent._4 | |
| span.key com | |
| span.punct : | |
| span.color #7f9f7f | |
| span.punct , | |
| br | |
| span.indent._4 | |
| span.key prop | |
| span.punct : | |
| span.color #dcdccc | |
| span.punct , | |
| br | |
| span.indent._4 | |
| span.key punct | |
| span.punct : | |
| span.color #dcdccc | |
| span.punct , | |
| br | |
| span.indent._4 | |
| span.key func | |
| span.punct : | |
| span.color #ffcfaf | |
| span.punct , | |
| br | |
| span.indent._4 | |
| span.key par | |
| span.punct : | |
| span.color #dcdccc | |
| span.punct , | |
| br | |
| span.indent._4 | |
| span.key color | |
| span.punct : | |
| span.color #ffcfaf | |
| span.punct , | |
| br | |
| span.indent._4 | |
| span.key sel | |
| span.punct : | |
| span.color #efdcbc | |
| span.punct , | |
| br | |
| span.indent._4 | |
| span.key oper | |
| span.punct : | |
| span.color #f0efd0 | |
| span.punct , | |
| br | |
| span.indent._4 | |
| span.key bool | |
| span.punct : | |
| span.color #dca3a3 | |
| span.punct , | |
| br | |
| span.indent._4 | |
| span.key float | |
| span.punct : | |
| span.color #c0bed1 | |
| span.punct , | |
| br | |
| span.indent._4 | |
| span.key int | |
| span.punct : | |
| span.color #8cd0d3 | |
| span.punct , | |
| br | |
| span.indent._4 | |
| span.key str | |
| span.punct : | |
| span.color #cc9393 | |
| br | |
| span.indent._4 | |
| span.key var | |
| span.punct : | |
| span.color #dca3a3 | |
| br | |
| span.par ) | |
| span.punct ; | |
| h2 Set the theme | |
| p Simply change the variable | |
| code.hl | |
| span.var $theme | |
| | . | |
| pre.hl | |
| span.var $theme | |
| span.punct : | |
| span.var $zenburn | |
| span.punct ; | |
| h2 Helper function | |
| p Setting colors is easy with a little help. | |
| pre.hl | |
| span.key @function | |
| span.func themeColor | |
| span.par ( | |
| span.var $key | |
| span.par ) | |
| span.par { | |
| br | |
| span.indent._4 | |
| span.var $val | |
| span.punct : | |
| span.func map-get | |
| span.par ( | |
| span.var $theme | |
| span.punc , | |
| span.var $key | |
| span.par ) | |
| span.punct ; | |
| br | |
| span.indent._4 | |
| span.key @return | |
| span.var $val | |
| span.punct ; | |
| br | |
| span.par } | |
| br | |
| br | |
| span.com // Usage | |
| br | |
| span.sel .hl | |
| span.par { | |
| br | |
| span.indent._4 | |
| span.prop background | |
| span.punct : | |
| span.func themeColor | |
| span.par ( | |
| span bg | |
| span.par ) | |
| span.punct ; | |
| br | |
| span.indent._4 | |
| span.prop color | |
| span.punct : | |
| span.func themeColor | |
| span.par ( | |
| span fg | |
| span.par ) | |
| span.punct ; | |
| br | |
| span.par } | |
| h2 Looping through the map | |
| p if the keys match the selectors you can simply loop through the map. | |
| br | |
| | Feel free to namespace this loop. | |
| pre.hl | |
| span.key @each | |
| span.var $pair | |
| span.key in | |
| span.var $theme | |
| span.par { | |
| br | |
| span.indent._4 | |
| span.var $key | |
| span.punct : | |
| span.func nth | |
| span.par ( | |
| span.var $pair | |
| span.punct , | |
| span.int 1 | |
| span.par ) | |
| span.punc ; | |
| br | |
| span.indent._4 | |
| span.var $val | |
| span.punct : | |
| span.func nth | |
| span.par ( | |
| span.var $pair | |
| span.punc , | |
| span.int 2 | |
| span.par ) | |
| span.punct ; | |
| br | |
| span.indent._4 | |
| span.punct .# | |
| span.par { | |
| span.var $key | |
| span.par } | |
| span.par { | |
| br | |
| span.indent._8 | |
| span.prop color | |
| span.punct : | |
| span.var $val | |
| span.punc ; | |
| br | |
| span.indent._4 | |
| span.par } | |
| br | |
| span.par } |
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
| //theme zenburn | |
| $zenburn: ( | |
| bg: #434443, | |
| fg: #dcdccc, | |
| key: #dcdccc, | |
| com: #7f9f7f, | |
| prop: #dcdccc, | |
| punct: #dcdccc, | |
| func: #ffcfaf, | |
| par: #dcdccc, | |
| color: #ffcfaf, | |
| sel: #efdcbc, | |
| oper: #f0efd0, | |
| bool: #dca3a3, | |
| float: #c0bed1, | |
| int: #8cd0d3, | |
| str: #cc9393, | |
| var: #dca3a3 | |
| ); | |
| //theme monokai | |
| $monokai: ( | |
| bg: #514c49, | |
| fg: #fff7fb, | |
| key: #f8ac35, | |
| com: #abaa98, | |
| prop: #f8ac35, | |
| punct: #fff7fb, | |
| func: #fa90a5, | |
| par: #fdf5a9, | |
| color: #82CDB9, | |
| sel: #ff3d73, | |
| oper: #00b9d7, | |
| bool: #faf686, | |
| float: #a2edee, | |
| int: #9ad74c, | |
| str: #ffe86a, | |
| var: #ffceb9 | |
| ); | |
| // set theme here | |
| $theme: $monokai; | |
| $font-size: 16px; | |
| $font-family: Menlo, monospace; | |
| // provide a simple way to set colors from theme-map | |
| @function themeColor($key) { | |
| $val: map-get($theme, $key); | |
| @return $val; | |
| } | |
| // basic styles | |
| .hl { | |
| padding: 0.2em; | |
| font-size: $font-size; | |
| font-family: $font-family; | |
| } | |
| .com { | |
| font-style: italic; | |
| } | |
| // define indent depth | |
| .indent { | |
| display: inline-block; | |
| @for $i from 1 through 2 { | |
| &._#{$i*4} { | |
| width: 0.5em*$i*4; | |
| } | |
| } | |
| } | |
| // set base colors | |
| .hl { | |
| background: themeColor(bg); | |
| color: themeColor(fg); | |
| } | |
| // loop through the rest of the colors | |
| @each $pair in $theme { | |
| $key: nth($pair,1); | |
| $val: nth($pair,2); | |
| .#{$key} { | |
| color: $val; | |
| } | |
| } | |
| // basic styles for this pen | |
| @import url(http://fonts.googleapis.com/css?family=Open+Sans:400italic,400,300,600); | |
| body { | |
| margin: 0; | |
| padding: 2em; | |
| font-family: 'Open sans', sans-serif; | |
| font-weight: 300; | |
| font-size: 16px; | |
| } | |
| p { | |
| line-height: 1.4; | |
| margin: 1em 0; | |
| } | |
| h1 { | |
| font-size: 2em; | |
| font-weight: 400; | |
| } | |
| h2 { | |
| font-size: 1.6em; | |
| font-weight: 300; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment