Ant Design Pro引入自定义主题及在主题文件中配置背景图片

最新推荐文章于 2024-04-16 13:49:26 发布

成续源

最新推荐文章于 2024-04-16 13:49:26 发布

阅读量1w

点赞数 3

分类专栏： Ant Design Pro

本文链接：https://blog.csdn.net/qq_34307801/article/details/103561782

版权

Ant Design Pro 专栏收录该内容

16 篇文章 2 订阅

订阅专栏

文章目录

前言

开发环境：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中定义默认值

至此主题文件中添加背景图片功能完成，效果如下：
在这里插入图片描述

成续源

关注

3
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
Ant Design Pro引入自定义主题及在主题文件中配置背景图片

文章目录前言分析修改和引入主题文件在主题文件中配置背景图片前言开发环境：Ant Design Pro: 2.0官方文档：定制主题Ant Design Pro官方提供了黑色主题和阿里云控制台主题，可以参考文档直接使用。项目需求：前端主题根据应用场景灵活匹配，在一个主题文件里能修改所有属性。背景图片可以在主题文件中定制。分析2.0版本的Ant Design Pro默认主题路...
复制链接

扫一扫