Skip to content

Instantly share code, notes, and snippets.

@greggman
Last active May 25, 2024 02:06
Show Gist options
  • Save greggman/c0db656fdeb5dabe826d2a14860e3c18 to your computer and use it in GitHub Desktop.
Save greggman/c0db656fdeb5dabe826d2a14860e3c18 to your computer and use it in GitHub Desktop.
Bikeshed dark var colors
:root {
color-scheme: light dark;
}
body {
line-height: 1.8;
}
[data-algorithm] var { cursor: pointer; }
var[data-var-color="0"] { background-color: #F4D200; box-shadow: 0 0 0 2px #F4D200; }
var[data-var-color="1"] { background-color: #FF87A2; box-shadow: 0 0 0 2px #FF87A2; }
var[data-var-color="2"] { background-color: #96E885; box-shadow: 0 0 0 2px #96E885; }
var[data-var-color="3"] { background-color: #3EEED2; box-shadow: 0 0 0 2px #3EEED2; }
var[data-var-color="4"] { background-color: #EACFB6; box-shadow: 0 0 0 2px #EACFB6; }
var[data-var-color="5"] { background-color: #82DDFF; box-shadow: 0 0 0 2px #82DDFF; }
var[data-var-color="6"] { background-color: #FFBCF2; box-shadow: 0 0 0 2px #FFBCF2; }
@media (prefers-color-scheme: dark) {
var[data-var-color="0"] { background-color: oklab(50% 0% 108%); box-shadow: 0 0 0 2px oklab(50% 0% 108%); }
var[data-var-color="1"] { background-color: oklab(50% 102% 38%); box-shadow: 0 0 0 2px oklab(50% 102% 38%); }
var[data-var-color="2"] { background-color: oklab(50% -51% 51%); box-shadow: 0 0 0 2px oklab(50% -51% 51%); }
var[data-var-color="3"] { background-color: oklab(50% -64% -20%); box-shadow: 0 0 0 2px oklab(50% -64% -20%); }
var[data-var-color="4"] { background-color: oklab(50% 6% 19%); box-shadow: 0 0 0 2px oklab(50% 6% 19%); }
var[data-var-color="5"] { background-color: oklab(50% -12% -64%); box-shadow: 0 0 0 2px oklab(50% -12% -64%); }
var[data-var-color="6"] { background-color: oklab(50% 44% -19%); box-shadow: 0 0 0 2px oklab(50% 44% -19%); }
}
<div>test of a <var data-var-color="0">highlighted</var> word</div>
<div>test of a <var data-var-color="1">highlighted</var> word</div>
<div>test of a <var data-var-color="2">highlighted</var> word</div>
<div>test of a <var data-var-color="3">highlighted</var> word</div>
<div>test of a <var data-var-color="4">highlighted</var> word</div>
<div>test of a <var data-var-color="5">highlighted</var> word</div>
<div>test of a <var data-var-color="6">highlighted</var> word</div>
/*bug-in-github-api-content-can-not-be-empty*/
{"name":"Bikeshed dark var colors","settings":{},"filenames":["index.html","index.css","index.js"]}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment