Anforderung: Ändern Sie die ursprüngliche Designfarbe im Projekt von Weiß zu Dunkel (nur Ideen bereitgestellt)
Aktueller Hauterneuerungsplan
- Aus Zeitgründen besteht der in dieser Phase angenommene Skin-Änderungsplan darin, zwei Sätze thematischer Farb-Skins zu schreiben und dabei den einfachsten Plan mit starker Abdeckung zu verwenden.
/**
* 蓝色 主题样式
*/
@themeColor: blue;
.au-bu-theme {
// 引入的样式文件已经经过 样式变量的抽取
@import '../less/com.less';
...
@import '../less/bottom-button.less';
}- Das größte Problem: Der Code ist super schwer zu pflegen!!!
Entdecken Sie einfachere Lösungen zur Hauterneuerung
Lösung: var() Kombiniert mit :root einer Pseudo-Element-Hautveränderungslösung
:root Diese CSS-Pseudoklasse entspricht dem Stammelement des Dokumentbaums. Für HTML stellt :root ein Element dar, das mit dem HTML-Selektor identisch ist, außer dass es eine höhere Priorität hat. ---mdn: Link Developer.mozilla.org/zh-CN/docs/…
-
Diese Lösung ist die einfachste und am leichtesten zu verstehen
-
Implementierungscode:
// 直接在 .less 文件中编写。:root 始终会变成 <html> 标签 的伪元素
:root {
'--primary-color': #1DA57A;
}
// 兼容之前的变量写法
@themeColor: var(--primary-color);
// 修改变量 --primary-color 以实现换肤
let docEle = document.documentElement
const auTheme = {
'--primary-color': 'bule';
'--hello-color': 'red';
}
// 批量覆盖样式
for (const key in auTheme) {
if (auTheme.hasOwnProperty(key)) {
const value = auTheme[key];
// 关键
docEle.style.setProperty(key, value)
}
}
// 释放内存，避免内存溢出
docEle = null
- Problem: IE unterstützt keinen Shim-Plug-In- Müll mit CSS3-Variablen.
var()。Nach der Suche nach Online-Informationen wurde schließlich festgestellt, dass sie gespeichert wurden.npmcss-vars-ponyfill！！！ie