使用Chakra UI与Next.js时能否动态修改theme-color meta标签？

失效原因 #

theme-color 元标签的 content 属于HTML属性，不属于CSS样式管辖范围，浏览器不会解析该属性内的var()CSS变量语法，你写的var(--theme-color)会被直接当做普通字符串处理，因此无法生效。

Chakra UI + Next.js 实现方案 #

你可以通过Chakra提供的色彩模式监听钩子，在模式切换时动态更新meta标签的content值即可。

1. 先在主题中定义对应模式的主题色 #

// theme.ts
import { extendTheme } from '@chakra-ui/react'

const theme = extendTheme({
  config: {
    initialColorMode: 'system',
    useSystemColorMode: true,
  },
  semanticTokens: {
    colors: {
      'theme-color': {
        default: '#ffffff', // 亮色模式主题色
        _dark: '#1a202c', // 暗色模式主题色
      },
    },
  },
})
export default theme

2. 新增meta标签更新逻辑 #

App Router 写法（Next.js 13+）

// app/layout.tsx
'use client'
import { ChakraProvider, useColorMode, useToken } from '@chakra-ui/react'
import { useEffect } from 'react'
import theme from './theme'

// 单独封装同步逻辑组件
function ThemeColorSync() {
  const { colorMode } = useColorMode()
  // 直接从主题中取定义好的色值，避免手动写死
  const [lightColor, darkColor] = useToken('colors', ['theme-color', 'theme-color._dark'])
  
  useEffect(() => {
    const targetColor = colorMode === 'light' ? lightColor : darkColor
    const metaTag = document.querySelector('meta[name="theme-color"]')
    metaTag?.setAttribute('content', targetColor)
  }, [colorMode, lightColor, darkColor])

  return null
}

export default function RootLayout({ children }) {
  return (
    <html lang="zh-CN">
      <head>
        {/* 初始默认值，避免首屏加载时无主题色 */}
        <meta name="theme-color" content="#ffffff" />
      </head>
      <body>
        <ChakraProvider theme={theme}>
          <ThemeColorSync />
          {children}
        </ChakraProvider>
      </body>
    </html>
  )
}

Pages Router 写法

// pages/_app.tsx
import { ChakraProvider, useColorMode, useToken } from '@chakra-ui/react'
import { useEffect } from 'react'
import theme from '../theme'

function ThemeColorSync() {
  const { colorMode } = useColorMode()
  const [lightColor, darkColor] = useToken('colors', ['theme-color', 'theme-color._dark'])
  
  useEffect(() => {
    const targetColor = colorMode === 'light' ? lightColor : darkColor
    const metaTag = document.querySelector('meta[name="theme-color"]')
    metaTag?.setAttribute('content', targetColor)
  }, [colorMode, lightColor, darkColor])

  return null
}

export default function App({ Component, pageProps }) {
  return (
    <ChakraProvider theme={theme}>
      <ThemeColorSync />
      <Component {...pageProps} />
    </ChakraProvider>
  )
}

内容的提问来源于stack exchange，提问作者asobirov