文章目录
前言
开发环境:Ant Design Pro: 2.0
官方文档:定制主题
Ant Design Pro官方提供了黑色主题和阿里云控制台主题,可以参考文档直接使用。
项目需求:
- 前端主题根据应用场景灵活匹配,在一个主题文件里能修改所有属性。
- 背景图片可以在主题文件中定制。
分析
2.0版本的Ant Design Pro默认主题路径是:
@import '~antd/lib/style/themes/default.less';
新增主题文件就需要覆盖掉原始主题文件default.less中同名的变量,默认主题里面部分样式如下:
// Background color for `<body>`
@body-background: #ff6120;
// Base background color for most components
@component-background: #fff;
如上所示,可以在新的主题文件里更改body背景色和component背景色。
修改和引入主题文件
推荐使用Ant Design Pro主题生成网站浏览主题效果,确认后点击保存,生成对应的index.js和index.less文件。
由于采用umi配置主题,所以选择index.js文件,更改文件名为myTheme.js,在src目录下创建theme文件夹并放入,src路径如下:
|-- madrid // 项目名
|-- app.js
|-- appConfig.js
|-- defaultSettings.js
|-- global.js
|-- global.less
|-- manifest.json
|-- service-worker.js
|-- assets
| |-- loginBgPng.jpg // 登录页背景图片
| |-- logo.svg
| |-- test.png
|-- components
|-- e2e
|-- layouts
|-- locales
|-- models
|-- pages
|-- services
|-- theme // 主题目录
| |-- myTheme.js // 主题名
|-- utils
主题文件myTheme.js如下(注意上面网站生成的index.js和项目引入的myTheme.js有少许不同):
/**
* 自定义主题
*/
Object.defineProperty(exports, '__esModule', {
value: true });
// All antd theme variables: https://github.com/ant-design/ant-design/blob/master/components/style/themes/default.less
exports.default = {
'@light': '#fff',
'@dark': '#000',
'@heading-color': 'fade(@light, 85)',
'@text-color': 'fade(@light, 65)',
'@text-color-secondary': 'fade(@light, 45)',
'@disabled-color': 'fade(@light, 25)',
'@primary-5': '#40a9ff',
'@primary-color': '#1890ff',
'@outline-color': '@primary-color',
'@icon-color': 'fade(@light, 65)',
'@icon-color-hover': 'fade(@light, 85)',
'@primary-6': '#096dd9',
'@border-color-base': '@border-color-split',
'@btn-default-color': '@heading-color',
'@btn-default-bg': '#444457',
'@btn-default-border': '#444457',
'@btn-ghost-color': 'fade(@light, 45)',
'@btn-ghost-border': 'fade(@light, 45)',
'@input-color': '@text-color',
'@input-bg': '#3b3b4d',
'@input-disabled-bg': '#4c4c61',
'@input-placeholder-color': '@text-color-secondary',
'@input-hover-border-color': 'fade(@light, 10)',
'@checkbox-check-color': '#3b3b4d',
'@checkbox-color': '@primary-color',
'@select-border-color': '#3b3b4d',
'@item-active-bg': '#272733',
'@border-color-split': '#17171f',
'@menu-dark-bg': '#001529',
'@body-background': '#30303d',
'@component-background': '#23232e',
// '@body-background': '#44a4ff',
// '@component-background': '#a7ff24',
'@layout-body-background': '@body-background',
'@tooltip-bg': '#191922',
'@tooltip-arrow-color': '#191922',
'@popover-bg': '#2d2d3b',
'@success-color': '#00a854',
'@info-color': '@primary-color',
'@warning-color': '#ffbf00',
'@error-color': '#f04134',
'@menu-bg': '#30303d',
'@menu-item-active-bg': 'fade(@light, 5)',
'@menu-highlight-color': '@light',
'@card-background': '@component-background',
'@card-hover-border': '#383847',
'@card-actions-background': '#30303d',
'@tail-color': 'fade(@light, 10)',
'@radio-button-bg': 'transparent',
'@radio-button-checked-bg': 'transparent',
'@radio-dot-color': '@primary-color',
'@table-row-hover-bg': '#383847',
'@item-hover-bg': '#383847',
'@alert-text-color': 'fade(@dark, 65%)',
'@tabs-horizontal-padding': '12px 0',
// zIndex': 'notification > popover > tooltip
'@zindex-notification': '1063',
'@zindex-popover': '1061',
'@zindex-tooltip': '1060',
// width
'@anchor-border-width': '1px',
// margin
'@form-item-margin-bottom': '24px',
'@menu-item-vertical-margin': '0px',
'@menu-item-boundary-margin': '0px',
// size
'@font-size-base': '14px',
'@font-size-lg': '16px',
'@screen-xl': '1208px',
'@screen-lg': '1024px',
'@screen-md': '768px',
// 移动
'@screen-sm': '767.9px',
// 超小屏
'@screen-xs': '375px',
'@alert-message-color': '@popover-bg',
'@background-color-light': '@popover-bg',
'@layout-header-background': '@menu-dark-bg',
// 官网
'@site-text-color': '@text-color',
'@site-border-color-split': 'fade(@light, 5)',
'@site-heading-color': '@heading-color',
'@site-header-box-shadow': '0 0.3px 0.9px rgba(0, 0, 0, 0.12), 0 1.6px 3.6px rgba(0, 0, 0, 0.12)',
'@home-text-color': '@text-color',
// 自定义需要找设计师
'@gray-8': '@text-color',
'@background-color-base': '#555',
'@skeleton-color': 'rgba(0,0,0,0.8)',
// pro
'@pro-header-box-shadow': '@site-header-box-shadow',
// 背景图片,新增
'@login-bg': `url('../assets/loginBgPng.jpg')`,
// '@login-bg': `url('')`, // 没有必须为空,js文件里引入
};
在src/config/config.js中引入新主题
import myTheme from '../src/theme/myTheme';
……
export default {
……
theme: myTheme,
}
至此新主题增加完成,在myTheme.js中更改@body-background为橘色,启动后效果如下:
其它相应的变量在新的主题文件myTheme.js中修改覆盖掉原始主题文件default.less中同名变量即可。
在主题文件中配置背景图片
有时候需要在前端项目中匹配不同的背景图片,比如给医药公司开发的项目配置医院的背景图片,给厂矿企业开发的项目配置工业图片,既然已经实现了自定义主题,那么在主题文件中配置更加方便。
首先在src/assets中存放背景图片,格式可以为png或者jpg,图片分辨率根据项目要求自行定义。
|-- assets
| |-- loginBgPng.jpg // 登录页背景图片
| |-- logo.svg
| |-- test.png
在myTheme.js中引入背景图片,采用ES6语法,如下新增了@login-bg变量
// 背景图片,新增
'@login-bg': `url('../assets/loginBgPng.jpg')`,
在登录页面UserLayout.less中使用这个新增变量
@media (min-width: @screen-md-min) {
.container {
background-image: @login-bg; // 新增背景图片
background-repeat: no-repeat;
background-position: center 110px;
background-size: 100%;
}
.content {
padding: 32px 0 24px 0;
}
}
最后需要特别注意,在原来的default.less中增加@login-bg变量,否则报错,可以设置为空,所有在新主题文件中增加的变量都必须在原始主题文件中定义
// 背景图片
@login-bg: url(''); // 在自定义主题文件里新增项必须在default.less中定义默认值
至此主题文件中添加背景图片功能完成,效果如下: