一段提取 Material Design 的颜色表为 Android 的 Color 资源列表的 JS
banxi1988 · 2015-10-27 12:34:37 +08:00 · 9167 次点击这是一个创建于 3333 天前的主题，其中的信息可能已经有所发展或是发生改变。
我是不会用色的人，干脆直接将 MD color 提取出来拿来用。
https://www.google.com/design/spec/style/color.html#color-color-palette
var colorGroups = document.querySelectorAll('section.color-group');
var forEach = Array.prototype.forEach;
var md_color_items = [];
forEach.call(colorGroups, function(group) {
var colors = group.querySelectorAll("li.color");
if(colors.length < 5){
return;// black white color ignore
}
var colorName = colors[0].querySelector("span.name").textContent.toLowerCase().replace(/\s+/,'_');
forEach.call(colors,function(color,index){
var shade = color.querySelector("span.shade").textContent;
if(index === 0){
shade += '_main';
}
var hex = color.querySelector("span.hex").textContent;
var color_item = '<color name="'+colorName+'_'+shade+'">'+hex+'</color>';
md_color_items.push(color_item);
});
});
console.log(md_color_items.join('\n'));
放到 Chrome 控制台下一跑就可以提取得到如下格式的 color 资源列表
<color name="red_500_main">#f44336</color>
<color name="red_50">#ffebee</color>
<color name="red_100">#ffcdd2</color>
 |
1
little_cup 2015-11-16 11:54:20 +08:00
感谢，非常好用！
|
Select Language