|
|
|
|
@ -126,43 +126,41 @@ Features
|
|
|
|
|
(scss) snippet that inverts solarized based on the class of the html tag |
|
|
|
|
(e.g. `<html class="dark red">` to give a dark background with red accent): |
|
|
|
|
|
|
|
|
|
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ {.scss .numberLines} |
|
|
|
|
$base03: #002b36; |
|
|
|
|
$base02: #073642; |
|
|
|
|
$base01: #586e75; |
|
|
|
|
$base00: #657b83; |
|
|
|
|
$base0: #839496; |
|
|
|
|
$base1: #93a1a1; |
|
|
|
|
$base2: #eee8d5; |
|
|
|
|
$base3: #fdf6e3; |
|
|
|
|
$yellow: #b58900; |
|
|
|
|
$orange: #cb4b16; |
|
|
|
|
$red: #d30102; |
|
|
|
|
$magenta: #d33682; |
|
|
|
|
$violet: #6c71c4; |
|
|
|
|
$blue: #268bd2; |
|
|
|
|
$cyan: #2aa198; |
|
|
|
|
$green: #859900; |
|
|
|
|
@mixin rebase($rebase03,$rebase02,$rebase01,$rebase00,$rebase0,$rebase1,$rebase2,$rebase3) |
|
|
|
|
{ |
|
|
|
|
background-color:$rebase03; |
|
|
|
|
color:$rebase0; |
|
|
|
|
* { color:$rebase0; } |
|
|
|
|
h1,h2,h3,h4,h5,h6 { color:$rebase1; border-color: $rebase0; } |
|
|
|
|
a, a:active, a:visited { color: $rebase1; } |
|
|
|
|
} |
|
|
|
|
@mixin accentize($accent) { |
|
|
|
|
a, a:active, a:visited, code.url { color: $accent; } |
|
|
|
|
h1,h2,h3,h4,h5,h6 {color:$accent} |
|
|
|
|
} |
|
|
|
|
/* light is default mode, so pair with general html definition */ |
|
|
|
|
html, .light { @include rebase($base3,$base2,$base1,$base0,$base00,$base01,$base02,$base03)} |
|
|
|
|
.dark { @include rebase($base03,$base02,$base01,$base00,$base0,$base1,$base2,$base3)} |
|
|
|
|
html * { |
|
|
|
|
color-profile: sRGB; |
|
|
|
|
rendering-intent: auto; |
|
|
|
|
} |
|
|
|
|
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ |
|
|
|
|
$base03: #002b36; |
|
|
|
|
$base02: #073642; |
|
|
|
|
$base01: #586e75; |
|
|
|
|
$base00: #657b83; |
|
|
|
|
$base0: #839496; |
|
|
|
|
$base1: #93a1a1; |
|
|
|
|
$base2: #eee8d5; |
|
|
|
|
$base3: #fdf6e3; |
|
|
|
|
$yellow: #b58900; |
|
|
|
|
$orange: #cb4b16; |
|
|
|
|
$red: #d30102; |
|
|
|
|
$magenta: #d33682; |
|
|
|
|
$violet: #6c71c4; |
|
|
|
|
$blue: #268bd2; |
|
|
|
|
$cyan: #2aa198; |
|
|
|
|
$green: #859900; |
|
|
|
|
@mixin rebase($rebase03,$rebase02,$rebase01,$rebase00,$rebase0,$rebase1,$rebase2,$rebase3) |
|
|
|
|
{ |
|
|
|
|
background-color:$rebase03; |
|
|
|
|
color:$rebase0; |
|
|
|
|
* { color:$rebase0; } |
|
|
|
|
h1,h2,h3,h4,h5,h6 { color:$rebase1; border-color: $rebase0; } |
|
|
|
|
a, a:active, a:visited { color: $rebase1; } |
|
|
|
|
} |
|
|
|
|
@mixin accentize($accent) { |
|
|
|
|
a, a:active, a:visited, code.url { color: $accent; } |
|
|
|
|
h1,h2,h3,h4,h5,h6 {color:$accent} |
|
|
|
|
} |
|
|
|
|
/* light is default mode, so pair with general html definition */ |
|
|
|
|
html, .light { @include rebase($base3,$base2,$base1,$base0,$base00,$base01,$base02,$base03)} |
|
|
|
|
.dark { @include rebase($base03,$base02,$base01,$base00,$base0,$base1,$base2,$base3)} |
|
|
|
|
html * { |
|
|
|
|
color-profile: sRGB; |
|
|
|
|
rendering-intent: auto; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
Installation |
|
|
|
|
------------ |
|
|
|
|
|