You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
121 lines
3.0 KiB
121 lines
3.0 KiB
<html> |
|
<head> |
|
<style type="text/css"> |
|
* { font-family: Helvetica, Arial, sans-serif; } |
|
|
|
table { |
|
display: inline-block; |
|
margin-right: 30px; |
|
} |
|
</style> |
|
</head> |
|
<body> |
|
<table> |
|
<thead> |
|
<th colspan="3">grayscale</th> |
|
</thead> |
|
<thead> |
|
<th>var</th> |
|
<th>color</th> |
|
<th>hex</th> |
|
</thead> |
|
<tbody id="grayscale-colors"> |
|
<tr> |
|
<td>fg1</td> |
|
<td bgcolor="#000000"></td> |
|
<td>#000000</td> |
|
</tr> |
|
</tbody> |
|
</table> |
|
<table> |
|
<thead> |
|
<th colspan="3">original</th> |
|
</thead> |
|
<thead> |
|
<th>var</th> |
|
<th>color</th> |
|
<th>hex</th> |
|
</thead> |
|
<tbody id="original-colors"> |
|
<tr> |
|
<td>fg1</td> |
|
<td bgcolor="#000000"></td> |
|
<td>#000000</td> |
|
</tr> |
|
</tbody> |
|
</table> |
|
|
|
<script type="text/javascript"> |
|
var grayscale = [ |
|
["fg1", "#000000"], |
|
["fg2", "#191919"], |
|
["fg3", "#2a2a2a"], |
|
["fg4", "#3b3b3b"], |
|
["bg1", "#ffffff"], |
|
["bg2", "#e8e8e8"], |
|
["bg3", "#d1d1d1"], |
|
["bg4", "#bbbbbb"], |
|
["key2", "#818181"], |
|
["key3", "#666666"], |
|
["builtin", "#bfbfbf"], |
|
["keyword", "#737373"], |
|
["const", "#737373"], |
|
["comment", "#bfbfbf"], |
|
["func", "#bfbfbf"], |
|
["str", "#bfbfbf"], |
|
["type", "#bfbfbf"], |
|
["var", "#737373"], |
|
["warning", "#bfbfbf"] |
|
]; |
|
|
|
var original = [ |
|
["fg1", "#0F380D"], |
|
["fg2", "#22461e"], |
|
["fg3", "#34552f"], |
|
["fg4", "#466440"], |
|
["bg1", "#9BBC0F"], |
|
["bg2", "#8eab13"], |
|
["bg3", "#819b15"], |
|
["bg4", "#748b17"], |
|
["key2", "#457043"], |
|
["key3", "#2a552a"], |
|
["builtin", "#2E602E"], |
|
["keyword", "#2E602E"], |
|
["const", "#2E602E"], |
|
["comment", "#8BAC0F"], |
|
["func", "#2E602E"], |
|
["str", "#0F380D"], |
|
["type", "#2E602E"], |
|
["var", "#2E602E"], |
|
["warning", "#8BAC0F"] |
|
]; |
|
|
|
var grayscaleColorsBody = document.getElementById('grayscale-colors'); |
|
var originalColorsBody = document.getElementById('original-colors'); |
|
|
|
var printTable = function(scheme, tbody) { |
|
[].forEach.call(scheme, function(item) { |
|
var tr = document.createElement('tr'); |
|
var td1 = document.createElement('td'); |
|
td1.textContent = item[0]; |
|
|
|
var td2 = document.createElement('td'); |
|
td2.style.backgroundColor = item[1]; |
|
|
|
var td3 = document.createElement('td'); |
|
td3.textContent = item[1]; |
|
|
|
tr.appendChild(td1); |
|
tr.appendChild(td2); |
|
tr.appendChild(td3); |
|
|
|
tbody.appendChild(tr); |
|
}); |
|
}; |
|
|
|
printTable(grayscale, grayscaleColorsBody); |
|
printTable(original, originalColorsBody); |
|
|
|
</script> |
|
</body> |
|
</html>
|
|
|