关于前端:主题风格

简介

为了应答不同的展现用户需要和展现，制订高效的格调替换设计机制

入口

如以后选中的是浅蓝格调，会给根目录下的次根目录绑定相干的类名:lightBlue

色彩分类

文字

1. 次要文字（题目 ) : 红色
2. 惯例文字（内文）：蓝色
3. 主要文字（表格表头，表单题目，表单 icon）: 绿色
4. 占位文字（未选中，占位文字，不可选）：橙色

图标 & 图片

援用

在组件援用 css 变量

style 内

<style lang="scss">
@import "@/assets/scss/color.scss";

.box{color: $font-color-primary;}
</style>

script 内

先在 color.scss 内导出，再在 script 内引入，如下:

src\assets\scss\color.scss

$lightBlue-primary: #2F81DF; 
$darkBlue-primary: #185BD7;

:export {
  lightBlueTheme:$lightBlue-primary;
  darkBlueTheme:$darkBlue-primary;
}

组件

<script>
import themeColor from "@/assets/scss/color.scss";

//...
// to use
</script>