$base03: #002b36; $base03: #002b36; $base02: #073642; $base01: #586e75; $base00: #657b83; $base0: #839496; $base1: #93a1a1; $base2: #eee8d5; $base3: #fefbdc; $yellow: #b58900; $orange: #cb4b16; $red: #dc322f; $magenta: #d33682; $violet: #6c71c4; $blue: #268bd2; $cyan: #2aa198; $green: #859900; @mixin rebase($rebase03,$rebase02,$rebase01, $rebase00,$rebase0,$rebase1,$rebase2,$rebase3) { * { color:$rebase0; } body { background-color:$rebase03; } h1,h2,h3,h4,h5,h6 { color:$rebase1; border-color: $rebase0; } h1#pagetitle, h1:first-of-type { color: $rebase1; } h2#pagesubtitle, h2:first-of-type { color: $rebase01; } a, a:active, a:visited { color: $rebase1; } //a:hover { background-color: $rebase02 } header { background-color: $rebase01; color: $rebase1; a.navlink, a:active.navlink, a:visited.navlink { color: $rebase1; text-shadow: 1px 1px 1px #ADBAC0; &:hover{ background-color: $rebase1; color: $rebase02; } } #sitelink { color:$rebase03; span { color: $rebase03; } &:hover { color: $rebase1; } span { color: $rebase03 } } #sitelink span:hover { color: inherit; } } footer { background-color: $rebase02; color: $rebase01; } pre { color: $rebase1; background-color: $rebase02; } tr:nth-child(odd) { background-color:$rebase02 } th { color:$rebase1; background-color:$rebase03; } h1 a:hover { -webkit-text-stroke: 3px $rebase02; } } @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; }