Themes
We are use less language, we define some global variables.
You can change the style requirements by modifying these variables.
hey-cli scaffold (recommended)
Refer to the var.less file of Heyui in the var.less file you defined, and redefine the replacement theme according to your needs. Then set the global reference file in the hey.js scaffolding configuration file.
var.less, example link
@import (less) "~/heyui/themes/var.less";
//重新定义主题
@primary-color: #FDA729;
@red-color: #D64244;
@green-color: #3cb357;
@yellow-color: #EAC12C;
@blue-color: #77A2DC;
hey-cli configuration file hey.js, example link
globalVars: './src/css/var.less',
Note: With this reference, these variables can also be used in the vue file.
vue-cli / webpack
There are some differences in the references here, mainly in style references.
For the definition of the less variable, we do not write the common.less file, so we need to define a less file for reference.
@import (less) "~heyui/themes/var.less";
//重新定义主题
@primary-color: #FDA729;
@red-color: #D64244;
@green-color: #3cb357;
@yellow-color: #EAC12C;
@blue-color: #77A2DC;
@import (less) "~heyui/themes/common.less";
//Using this method, you can use the variables defined by var.less in your own less file.
@import (less) "自己的less文件";
Note: In this way of reference, variables in var.less files cannot be used in vue files.
Global variable
Our original global variable file can be viewed on github上查看。
The parameters in the following code, you can modify according to your own design, achieve the purpose of setting the system theme.
// Color
@primary-color : #3399ff;
@link-color : @primary-color;
@blue-color : #3B91FF; //info
@green-color : #13CE66; //success
@yellow-color : #FFAE00; //warn
@red-color : #E11617; //error
@white-color : #ffffff;
//Gray 1-4 more shallow
@dark-color: #333333;
@gray-color: #808080;
@gray1-color: #d3d3d3;
@gray2-color: #eeeeee;
@gray3-color: #f3f3f3;
@gray4-color: #f9f9f9;
//hover
@hover-background-color: lighten(@primary-color, 37%);
//tag
@tag-background-color: lighten(@primary-color, 37%);
@tag-color: @primary-color;
//font-size
@font-size : 14px;
@font-size-mini : 13px;
@font-size-input : @font-size-mini;
@font-size-input-tag : 12px;
@font-size-badge : 12px;
@font-family : "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;
@line-height : 1.5;
@line-height-computed : floor((@font-size * @line-height));
// Input
@input-height : 30px;
//border
@border-color: @gray2-color;
@border: 1px solid @gray2-color;
//disabled
@disabled-cursor: not-allowed;
@disabled-color: @gray-color;
@disabled-border-color: @gray1-color;
@disabled-background-color: @gray4-color;
//radius
@border-radius : 4px;
@btn-border-radius: 4px;
//box-shadow
@box-shadow-button: 0 1px 1px 0 @gray2-color;
@box-shadow-notify: 0 5px 10px rgba(0, 0, 0, 0.1);
@box-shadow-dropdown : 0 5px 10px rgba(0, 0, 0, 0.1);
@box-shadow-select-dropdown: 0 1px 6px rgba(0, 0, 0, .2);
//switch
@switch-hight: 26px;
@min-switch-height: 18px;
Example
heyui-admin is a complete example, We modified the main color and adjusted some parameters. example code。
If you still need some more detailed adjustments, we suggest that you can newly overwrite.less overwrite existing classes.