how to custom Dynamic Theme

[qiuzongyuan]

• I have searched the issues of this repository and believe that this is not a duplicate.

What problem does this feature solve?

能够运行时切换 动态主题

What does the proposed API look like?

官网文档提供的是编译时切换主题

// vite.config.js
css: {
    preprocessorOptions: {
      less: {
        javascriptEnabled: true,
        modifyVars: {
          'primary-color': '#1DA57A'
        }
      }
    }
  }

尝试了一下，确实可以

但是，希望能有个运行时动态切换主题可行方案（例如，点击开关可以直接切换暗黑主题）

[zkwolf]

去翻一下3.x的site源码，有动态切换黑暗主题的方案，后面也会支持css 变量方便切换主题

[Rhilip]

去翻一下3.x的site源码，有动态切换黑暗主题的方案，后面也会支持css 变量方便切换主题

我看了一些site源码，还需要从less以及编译，能否有更清爽的切换方法？
就比如直接在 ConfigProvider 通过 theme: "light" 或者 theme: "dark"

[zkwolf]

目前这个阶段应该是没有比较简单的办法，3.1那个css变量也只是控制了主题色

[wsxe9988]

后面ant design v50 Token设计变量出来是不是能更好的解决这个问题呢

[zanllp]

我用这种办法实现了

const dark = usePreferredDark()
watch(dark, async (dark) => {
  const head = document.getElementsByTagName('head')[0]
  if (dark) {
    const darkStyle = document.createElement('style')
    const { default: css } = await import('ant-design-vue/dist/antd.dark.css?inline')
    darkStyle.innerHTML = css
    darkStyle.setAttribute('antd-dark', '')
    head.appendChild(darkStyle)
  } else {
    Array.from(head.querySelectorAll('style[antd-dark]')).forEach(e => e.remove()) 
  }
}, { immediate: true })

[github-actions]

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.