122 lines
3.0 KiB
HTML
122 lines
3.0 KiB
HTML
|
<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>
|