提问人：Heavenly Journey 提问时间：11/16/2023 更新时间：11/17/2023 访问量：31
在antd设计令牌上使用不同的主题
Use different theme on antd design token
问：
有没有办法使用设计令牌获取默认主题和深色主题的文本颜色？
我希望能够在两者之间切换，而不改变主题，具体取决于条件。
例如：
if (x) return currentThemeColorPrimaryText
else return oppositeThemeColorPrimaryText
因此，它应该返回“当前主题”颜色，主文本应该是默认主题的默认文本和深色主题的深色文本。而“相反主题”颜色的主要文本应该是具有默认主题的深色文本和具有深色主题的默认文本。
答：
1赞
NoNam4
11/16/2023
#1
可以使用 getDesignToken 函数。正如 docs 所说：
与 ConfigProvider 相同，也可以接受配置对象作为主题。
getDesignToken
因此，在这种情况下，您可以执行以下操作：
import { ThemeConfig, theme } from "antd";
const { defaultAlgorithm, darkAlgorithm, getDesignToken } = theme;
const DarkToken = getDesignToken({
algorithm: darkAlgorithm
});
const LightToken = getDesignToken({
algorithm: defaultAlgorithm
});
...
<div
style={{color: DarkToken.colorText}}
>
dark color
</div>
<div
style={{color: LightToken.colorText}}
>
light color
</div>
你可以在这里找到一个工作的例子。
评论
0赞
Heavenly Journey
11/16/2023
有没有办法直接将 antd 默认的深色和浅色主题作为默认值？无需使用算法创建自己的算法
0赞
NoNam4
11/16/2023
您可以像示例一样将 prop 留空，也可以将其删除，只保留 prop。这是获取 antd 默认主题的唯一方法。我已经编辑了我的答案tokenalgorithm
下一个：速度网站的背景图片问题
评论