UI设计规范-前端 ​

• 层级设计（nav、header、footer...)
• 组件设计（layout、button、list、switch）
• typography与font（特殊字符替换）
• shadow
• color（red、gray、yellow、white、black、text、divider）

可通过js函数来切换主题 ​

document.documentElement.classList.add('dark')

• 采用原生css变量作为基础
• 使用custom二次封装变量输出主题，可实现多个主题色任意变换

:root {
  --vh-c-white: #fff;
  --vh-c-black: #000;
  --vh-c-bg:var(--vh-c-white);
}

.dark{
  --vh-c-bg:var(--vh-c-black);
}

z-index 层级变量 ​

• z-index-local-nav: 10;
• z-index-nav: 20;
• z-index-backdrop: 30;
• z-index-sidebar: 40;
• z-index-footer: 50;