修改主题色

[ycshill]

第一步 下载vue-stone

从 https://github.com/jd-smart-fe/vue-stone 地址下载最新的 vue-stone;

第二步 找到修改主题色的样式文件

• 找到 themes.css 和 variables.css 文件，位置如下：

├── src  
     ├── styles   
        ├── default-theme
            ├── themes.css
            └── variables.css

第三步 修改主题色

• 在 themes.css 文件中，加入用到的主题色并提交，例如：

/* 智能灯主题色 */
$theme-9777fa: #9777fa;

tips:

• 命名格式为 $theme-{16位色值}

• 在 variable.css 文件中，确保已经引入 theme.css 文件，并修改用到主题色的地方，如下：

/* 主题色-用于 vue-stone 组件： */
$main-color: $theme-9777fa;  // vue-stone 组件中用到的颜色
$c-primary: $theme-9777fa； // vue-stone 组件中一部分组件用到的颜色
$c-primary-on: $theme-9777fa // 按钮等按住的时候颜色

/* 模板中使用主题色 */
.c-theme-color {
  color: $theme-9777fa;
}

第四步 打包文件

执行命令 npm run build 将文件打包

第五步 在项目中引入打包后的css 文件

• 拷贝 dist 目录中的 vue-stone.css 文件，所在位置如下：

├── dist  
     ├── vue-stone.css

• 将该文件拷贝到自己开发的项目中：
  • 在 src 下新建一个 styles 文件夹；
  • 将 vue-stone.css文件放入 styles 文件夹中；
• 修改 main.js 文件：

// 注释以前一如的文件
// import 'vue-stone/dist/vue-stone.css';
// 加入本地文件
import '@/styles/style.css';

启动项目就可以了~