如何拿到一个预设算法下的主题变量

[pcyanglei]

主题设置为暗黑模式：

<ConfigProvider
          theme={{
            algorithm: [
              darkAlgorithm
            ]
          }}
      >
...
</ConfigProvider>

当我使用 Design Token进行消费时

<Header style={{background: token.colorBgContainer}}>

此时header的背景色是默认light模式算法下的背景色，而我想要得到当前设置的dark模式算法下的背景色

[BoyYangzai]

@pcyanglei
可以在主题编辑器中选中黑暗模式 左侧会有对应的 Design token 值
https://ant.design/theme-editor-cn

[Wxh16144]

你可以通过 theme.useToken() hook 消费 Ant Design 的 token. 但是需要得到 dark 值, 你可以使用 @ant-design/cssinjs 提供的 createtheme 方法,

import { GlobalToken, theme } from 'antd'
import { createTheme } from '@ant-design/cssinjs'

const darkToken: GlobalToken = createTheme(theme.darkAlgorithm).getDerivativeToken(theme.defaultSeed); // 得到 darkToken

完整示例代码如下:

import * as React from "react";
import { ConfigProvider, GlobalToken, theme } from 'antd'
import { createTheme } from '@ant-design/cssinjs'

const darkToken: GlobalToken = createTheme(theme.darkAlgorithm).getDerivativeToken(theme.defaultSeed);

function Block() {
  const { token } = theme.useToken(); // 消费上下文 token
  return (
    <>
      <div style={{
        width: 600,
        // backgroundColor: 'red',
        backgroundColor: token.colorBgContainer,
        color: token.colorText,
      }}>
        <code>current: colorBgContainer: {token.colorBgContainer}</code>
        <br />
        <code>current: colorText: {token.colorText}</code>
        <hr />
        <code>dark: colorBgContainer: {darkToken.colorBgContainer}</code>
        <br />
        <code>dark: colorText: {darkToken.colorText}</code>
      </div>
    </>
  );
}

function App() {
  const [isDark, setIsDark] = React.useState(false)
  function toggleTheme() {
    setIsDark(!isDark)
  }
  return (
    <ConfigProvider theme={{
      algorithm: isDark ? theme.darkAlgorithm : theme.defaultAlgorithm
    }}>
      <button type="button" onClick={toggleTheme}>
        {isDark ? 'dark' : 'light'}
      </button>
      <Block />
    </ConfigProvider>
  )
}

export default App

[cong1223]

非常感谢！如果我想在dark的预设算法下，希望useToken后拿到的primary的值是#0066ff，那么我该怎么做呢？在ProviderConfig里面token的primaryColor我应该输入什么色值？