关于主题色的设计

yang

最近刚使用这个ui，觉得有时候会遇到多种主题色，或者想使用另一种主题色而不是强调色，我有一个想法，如果这样设计是否会更好些：

1.主题色应用于自身,如

.mdui-theme-primary-red.mdui-color-theme{background:red;}

会将红色应用于自身

2.权重设计：自身>父级>祖级>body，如（写的不太严格，大概表达这个意思）：

<html>
    <head>
        <meta charset="utf-8">
        <style>
            /*body*/
            .mdui-theme-primary-red .mdui-color-theme
            {
                background: red;
            }
            /*祖级生效*/
            body .mdui-theme-primary-yellow .mdui-color-theme
            {
                background: yellow;
            }
            /*父级生效*/
            html>body .mdui-theme-primary-blue>.mdui-color-theme
            {
                background: blue;
            }
            /*自身生效*/
            html>head+body .mdui-theme-primary-green.mdui-color-theme
            {
                background: green;
            }
        </style>
    </head>
    <body class="mdui-theme-primary-red">
        <div id="grandpa" class="mdui-theme-primary-yellow" title="祖级">
            <div id="father" class="mdui-theme-primary-blue" title="父级">
                <div id="self" class="mdui-theme-primary-green mdui-color-theme">目标元素</div>
            </div>
        </div>
    </body>
</html>

1.当自身设置有主题色class时，背景颜色为自身设置的绿色

2.去除自身主题色class，背景颜色为父元素设置的蓝色

3.再去除父元素主题色class，背景颜色为祖元素设置的黄色

4.再去除祖元素主题色class，背景颜色为body设置的红色

也可以少一点body、父级、自身3等权重就行

共 2 个回答

yang

试了下，弄完19个主题色大小直接增加了100k……

万恶的ie

zdhxiong

MDUI 作者

这样做的话，主题部分的 CSS 代码量直接翻了 4 倍，现在的 CSS 文件里大部分都是主题的代码，再增加就实在太大了。

以后不需要考虑兼容 IE 浏览器的话，使用 CSS 变量可以考虑这样做。