react-ant-admin

Appearance

Return to top
On this page

主题色配置

主题色功能是通过antd@5自带的主题色功能来实现动态切换。

TIP

注意：使用主题色，在项目启动的预设环境变量process.env.REACT_APP_COLOR必须为"1"，否则主题色功能会未被开启。使用antd-style自定义less变量。

使用antd自带的less Token 变量 

// main.js
import { ConfigProvider } from 'antd';
import { theme } from 'antd';
import Router from "./router"
const defaultToken = theme.defaultAlgorithm(theme.defaultSeed)
export default function App(){
  return <ConfigProvider theme={defaultToken}>
    <Router /> {/* 你需要用到的组件 */}
  </ConfigProvider >
}

// router.js
import { createStyles } from 'antd-style';
import { theme } from 'antd';
const themeToken = theme.defaultAlgorithm(theme.defaultSeed)

const createStyle = createStyles((({ css }, token) => ({
  // 这里的 colorBgContainer colorSplit 是来自 antd 
  info: css`
    margin-top    : 20px;
    padding-bottom: 20px;
    border-bottom : 1px dashed ${token.colorSplit};
    text-align    : center;
  `,
  tabs: css`
    padding         : 0 20px;
    background-color: ${token.colorBgContainer};
  `,
})))

export default function Router(){
  // 这里展示 是 静态的 themeToken  在项目中 是存在store里动态的。
  const { styles } =  createStyle(themeToken)
  return <div className={styles.info}>
    <div className={styles.tabs}>111</div>
    <div className={styles.tabs}>222</div>
    <div className={styles.tabs}>333</div>
  </div>
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

新增自定义less变量

在your project/theme/var.less文件里新增less变量，然后就可以使用lessToken了。

@test-color: red;
@test-size : 22;
1
2

在本项目中直接可以使用，记得新增ts提示。

//src/theme.ts
interface CustomThemeToken {
  'test-color': string
  'test-size': number
  [key: string]: string | undefined
}
1
2
3
4
5
6
import { useThemeToken } from '@/hooks';
import { createStyles } from 'antd-style';
// 这里的 token 是 传参进来的
const createStyle = createStyles((({ css }, token) => ({
  color:css`
    color:${token['test-color']}
  `,
  font:css`
    font-size:${token['test-size']}px
  `
})))


function Comp(){
  const { styles } = createStyle(useThemeToken())
  return <div>
    <p className={styles.color}>使用了test-color</p>
    <span className={styles.font}>使用了test-size</span>
  </div>
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

less文件还可以用less变量吗？

当然可以，你可以使用antd的less变量名称列表和 自定义的less变量在your project/theme/var.less里面定义。但是，他不会动态改变，因为在启动或者打包的时候，vite会自动把less变量替换真正的值并且转换为静态的css，以style标签插入文档中，是不会动态改变的。如果你要使用能在页面上动态改变的less变量，请以上面那种方式，动态的使用className。具体请参考antd-style