Bikeshed dark var colors

README.md

Bikeshed dark var colors

view on jsgist

index.css

: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%); }  
}







  

index.html

<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>

index.js

/*bug-in-github-api-content-can-not-be-empty*/

jsGist.json

{"name":"Bikeshed dark var colors","settings":{},"filenames":["index.html","index.css","index.js"]}