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

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

已注册用户请登录

这是一个创建于 3720 天前的主题，其中的信息可能已经有所发展或是发生改变。

我是不会用色的人，干脆直接将 MD color 提取出来拿来用。
https://www.oogle.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 条回复 2015-11-16 11:54:20 +08:00

little_cup

2015-11-16 11:54:20 +08:00

感谢，非常好用！