umi4 怎么实现动态切换主题

[SeigeC]

umi4 怎么实现动态切换主题

[xiaohuoni]

这个问题，要先看你用的是什么组件库

[xiaohuoni]

antd-style 的用法差不多，都是需要 Provider 和 setState 在同一个上下文，比如我想在任意页面的任何地方加一个 按钮，切换主题，我要怎么做？

[BoyYangzai]

antd-style 的用法差不多，都是需要 Provider 和 setState 在同一个上下文，比如我想在任意页面的任何地方加一个 按钮，切换主题，我要怎么做？

使用全局的状态管理呢

[arvinxx]

antd-style 的用法差不多，都是需要 Provider 和 setState 在同一个上下文，比如我想在任意页面的任何地方加一个 按钮，切换主题，我要怎么做？

@xiaohuoni 就用全局状态管理就好了。示例：https://ant-design.github.io/antd-style/guide/switch-theme#3-%E5%8F%97%E6%8E%A7%E6%A8%A1%E5%BC%8F%E7%9A%84%E4%B8%BB%E9%A2%98%E5%88%87%E6%8D%A2

现成项目：https://dumi-theme-antd-style.arvinx.app/

组件按钮：https://github.com/arvinxx/dumi-theme-antd-style/blob/master/src/components/ThemeSwitch/index.tsx

[xiaohuoni]

@arvinxx 我就是觉得他自己就有一个上下文，还要依赖第三方的，稍微有一点点怪

[arvinxx]

@arvinxx 我就是觉得他自己就有一个上下文，还要依赖第三方的，稍微有一点点怪

要完全自定义肯定是要受控的，比如做本地缓存，或者用户偏好设置等等，全局状态管理基本上是必须的。

不过你提到了一点，可能这个context也可以给一个set方法，让子级调这个set方法来切换主题模式

[BoyYangzai]

@SeigeC https://ant.design/components/config-provider-cn
https://ant.design/docs/react/customize-theme-cn#%E5%9C%A8-configprovider-%E4%B8%AD%E9%85%8D%E7%BD%AE%E4%B8%BB%E9%A2%98
ConfigProvider 包裹根组件或者局部包裹
token 用 state 修改就可以

[arvinxx]

@SeigeC antd-style 的方案是 antd v5 做主题的最佳实践。如果你用 antd v5， 无脑上就好：https://ant-design.github.io/antd-style/guide/switch-theme

[SeigeC]

大佬，使用了 umi max 的 layout，ThemeProvider 该写在哪里呢？有最佳实践嘛

[SeigeC]

使用了 umi max 的 layout，Provider 该写在哪里呢？

[BoyYangzai]

包裹在 路由组件上面 和useContext一样的

[SeigeC]

大佬能否给个 demo 呢

[haobarry]

实时修改theme里的值就行 有个dark 和light

[xiaohuoni]

@SeigeC @arvinxx @Wxh16144 看看这里umi-plugin-antd-style，有个在线 demo

umi-plugin-antd-style

在 umi 中快速接入 antd-style 的实验性插件，欢迎试用并提出修改意见，最终版将会发布在官方组织中。

可以和 max 集成使用和官方的 antd 插件结合使用效果更佳。

使用

安装依赖

pnpm i umi-plugin-antd-style

增加使用插件配置，在 config/config.ts 或者 .umirc.ts 文件中编写配置

import { defineConfig } from "umi";

export default defineConfig({
  plugins: [require.resolve("umi-plugin-antd-style")],
  // 配置开启
  antdStyle: {

  } as ['antd-style'].ThemeProviderProps
});

配置

配置，在 config/config.ts 或者 .umirc.ts 文件中编写配置

import { defineConfig } from "umi";

export default defineConfig({
  antdStyle: {
    // 在这里配置所有的默认值，会被运行时配置修改
  } as ['antd-style'].ThemeProviderProps
});

如果需要配置一些使用到 react 的配置，可以在运行时 src/app.ts 中配置 antdStyle

import { RuntimeAntdStyleConfig } from "umi";

export const antdStyle: RuntimeAntdStyleConfig = (memo) => {
  memo.appearance = "dark";
  return memo;
};

动态切换主题

import { useThemeConfig } from "umi";
import {
  Button,
  Space,
} from "antd";

export default function Page() {
  const { themeConfig, setThemeConfig } = useThemeConfig();
  console.log("themeConfig", themeConfig);

  return (
    <Layout>
      <h1>with antd-style</h1>
      <Space>
        <Button
          onClick={() => {
            setThemeConfig({
              ...themeConfig,
              appearance:
                themeConfig?.appearance === "light" ? "dark" : "light",
            });
          }}
        >
          切换主题
        </Button>
      </Space>
    </Layout>
  );
}

约定

• 所有的配置会直接透传给 ThemeProvider，没有对配置做校验，是为了后续 api 变更
• 优先使用用户项目中安装的 antd-style 版本

理论上，用户可以通过升级项目中的 antd-style 版本和修改配置来完成变更，不需要等插件修改。

更多 api 请参考 antd-style 的官网 https://ant-design.github.io/antd-style/api/theme-provider

[xbcc123]

帮大忙了，大佬

[arvinxx]

@xiaohuoni 感觉这个配置是需要运行时配置，构建时的配置不太够。原因在于比如我有动态 token 的场景，基于 theme 改不同值的话，是需要运行时来做的。

[xiaohuoni]

有运行时配置的，你的意思是全在运行时配置中配置是吗？移除普通配置的功能？

[arvinxx]

有运行时配置的

运行时配置怎么配？有示例吗？

你的意思是全在运行时配置中配置是吗？移除普通配置的功能？

我建议是这样。否则用户会出现「为啥我放在普通配置里 切换主题无效」这样的疑惑

[xiaohuoni]

如果需要配置一些使用到 react 的配置，可以在运行时 src/app.ts 中配置 antdStyle

import { RuntimeAntdStyleConfig } from https://github.com/umijs/umi;

export const antdStyle: RuntimeAntdStyleConfig = (memo) => {
memo.appearance = "dark";
return memo;
};

[fz6m]

目前动态切换主题可以在 app.ts 里将 valtio 等全局数据流变量赋值给 theme 来实现：https://umijs.org/docs/max/antd#%E8%BF%90%E8%A1%8C%E6%97%B6%E9%85%8D%E7%BD%AE

切换时，直接更改全局变量值即可。

有关更优雅的 react 切换主题打开方式，由我们英俊潇洒的 @xiaohuoni 继续跟进支持。

[THL1234]

你好，我更新了全局数据流的变量，但好像RuntimeAntdConfig里的配置不会更新呀?

[fz6m]

如有问题，需要给一个最小复现。

[xiaohuoni]

#11163

动态切换主题

注意：该功能仅 antd v5 可用

当存在主题相关的配置时开启

import { Layout, Space, Switch, version } from 'antd';
import { useAntdConfig, useAntdConfigSetter } from 'umi';
export default function Page() {
  const setAntdConfig = useAntdConfigSetter();
  const antdConfig = useAntdConfig();
  return (
    <Layout>
      <h1>with antd@{version}</h1>
      <Space>
        isDarkTheme
        <Switch
          checked={antdConfig?.dark}
          onChange={() => {
            setAntdConfig({
              dark: !antdConfig?.dark,
            });
          }}
        ></Switch>
      </Space>
      <Space>
        isCompactTheme
        <Switch
          checked={antdConfig?.compact}
          onChange={() => {
            setAntdConfig({
              compact: !antdConfig?.compact,
            });
          }}
        ></Switch>
      </Space>
    </Layout>
  );
}

[seap]

useAntdConfig，什么时候上正式版本？

[fz6m]

这部分的代码最好提一个新的 PR ，因为 antd v5 的 dark 和 compact 现在在另一个 PR （已合入）已经兼容了，原 PR 内容有些过时。

如有需要，我理解只需要添加 useAntdConfig 的相关代码就可以了。