一段提取 Material Design 的颜色表为 Android 的 Color 资源列表的 JS

[banxi1988]

我是不会用色的人，干脆直接将 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>

[little_cup]

感谢，非常好用！