V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
banxi1988
V2EX  ›  Android

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

  •  
  •   banxi1988 · 2015-10-27 12:34:37 +08:00 · 4294 次点击
    这是一个创建于 3075 天前的主题,其中的信息可能已经有所发展或是发生改变。

    我是不会用色的人,干脆直接将 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 条回复    2015-11-16 11:54:20 +08:00
    little_cup
        1
    little_cup  
       2015-11-16 11:54:20 +08:00
    感谢,非常好用!
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   2226 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 24ms · UTC 16:13 · PVG 00:13 · LAX 09:13 · JFK 12:13
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.