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