关于主题色的设计

最近刚使用这个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等权重就行

功能建议