皮肤自定义 - xinwu-yang/cube-vue GitHub Wiki

安装

yarn add @tievd/cube-skin -D

使用

使用魔方提供的皮肤，目前可供选择的皮肤有以下几种：

亮色皮肤：light.less
暗黑皮肤：dark.less
纯黑皮肤：black.less

// vue.config.js 中修改
...
less: {
  modifyVars: {
    hack: `true; @import (reference) "~@tievd/cube-skin/lib/light.less";` // 或者其他你想使用的皮肤
  },
  javascriptEnabled: true
}
...

自定义皮肤

创建自己的皮肤文件，例如 /src/assets/skin/my-skin.less，并引入魔方皮肤文件，修改less变量。

// my-skin.less
@import "~@tievd/cube-skin/lib/light.less"; // light.less、dark.less 或者其他你想使用的皮肤

@primary-color: red;
...

vue.config.js 中修改less modifyVars配置，改为自定义皮肤文件

...
less: {
  modifyVars: {
    hack: `true; @import (reference) "${path.resolve(`src/assets/skin/my-skin.less`)}";`
  },
  javascriptEnabled: true
}
...

可修改的变量

常用可修改变量，罗列如下，更具体可修改的变量请参考node_modules/@tievd/cube-skin/lib 下的less文件。

@notification-info-color: #1664ff; // notification主色

@notification-info-color-gradient: #168bff; // notification主色渐变开始

@notification-success-color: #52c41a; // notification成功色

@notification-success-color-gradient: #7de54a; // notification成功色渐变开始

@notification-warning-color: #ffbf00; // notification警告色

@notification-warning-color-gradient: #fedd38; // notification警告色渐变开始

@notification-error-color: #ff4c10; // notification错误色

@notification-error-color-gradient: #ff7410; // notification错误色渐变开始

@notification-accent-color: #ff6010; // notification强调色

@notification-accent-color-gradient: #ff7410; // notification强调色渐变开始

@btn-padding-base: 0 15px; // 按钮边距

@modal-mask-bg: rgba(#000, 0.55); // modal 遮罩背景

@ant-dropdown-border-color: @primary-color; // 下拉菜单边框色

@select-item-selected-font-weight: 400; // select 选中项字重

@table-padding-vertical: 12px; // 表格项垂直内边距

@table-padding-horizontal: 8px; // 表格项水平内边距

@input-padding-horizontal: 12px; // input 水平内边距

@input-padding-vertical-base: 6px; // input 垂直内边距

@switch-height: 20px; // switch 高度

@tree-title-height: 20px; // tree 文字高度

@tooltip-bg: #333; // tooltip 背景

@tooltip-color: #fff; // tooltip 文字颜色

@primary-color: #2e5ee2; // 全局主色
@success-color: #52c41a; // 成功色
@warning-color: #ffbf00; // 警告色
@error-color: #ff3b30; // 错误色
@accent-color: #ff6010; // 强调色
@disabled-color: #ccc; // 失效色

@white: #fff;
@black: #000;

// 文本
@text-color: #4c4c4c; // 主文本色
@text-color-secondary: #707070; // 次文本色
@font-size-base: 14px;
@font-size-lg: @font-size-base + 2px;
@font-size-sm: 12px;
@font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';

// 组件
@body-background: #fff; // body背景色
@component-background: #fff; // 组件背景色
@background-color-selected: hsv(0, 0, 98%); // 选中项背景色
@background-color-base: hsv(0, 0, 96%); // 默认灰阶背景色
@item-active-bg: rgba(46, 94, 226, 0.1); // 选中项背景
@item-hover-bg: rgba(46, 94, 226, 0.1); // hover项背景
@disabled-bg: #eee; // 失效背景

// layout
@layout-header-height: 56px; // 头部高
@layout-header-background: @primary-color; // 头部背景
@layout-header-color: #fff; // 头部字色
@layout-body-background: #f0f2f5; // 主背景
@layout-footer-background: transparent; // footer 背景
@layout-sider-background: @component-background; // 左侧背景
@layout-sider-width: 208px; // 左侧宽度
@layout-sider-collapsed-width: 80px; // 左侧折叠宽度
@layout-logo-background: @layout-header-background; // logo背景色
@layout-logo-color: @layout-header-color; // logo文字颜色
@layout-logo-color-hover: fade(@layout-logo-color, 80%); // logo文字hover时的颜色
@layout-tab-background: @component-background; // TabLayout 背景色

// 菜单
@menu-bg: @component-background; // 菜单背景色
@menu-item-active-bg: @item-active-bg; // 菜单选中背景色
@menu-item-color: @text-color; // 菜单字体的颜色
@menu-highlight-color: @primary-color; // 选中或hover的字体颜色

// 链接
@link-color: @primary-color;
@link-hover-color: color(~`colorPalette('@{link-color}', 5) `);
@link-active-color: color(~`colorPalette('@{link-color}', 7) `);

// 阴影
@box-shadow-base: 0 2px 8px rgba(0, 0, 0, 0.15); // 浮层阴影
@shadow-1-down: 0 6px 16px -8px rgba(0, 0, 0, 0.32), 0 9px 28px 0 rgba(0, 0, 0, 0.2), 0 12px 48px 16px rgba(0, 0, 0, 0.12);

// border
@border-radius-base: 4px; // 圆角
@border-color-base: #d9d9d9; // 边框色

// time-picker
@time-picker-selected-bg: @primary-color; // 选中项背景色

// calendar
@primary-2: @primary-color; // 选中项背景色