浏览代码

feat: update theme-color meta tag when theme is updated

satnaing 2 年之前
父节点
当前提交
72810ddaf7
共有 1 个文件被更改,包括 10 次插入0 次删除
  1. 10 0
      src/components/theme-switch.tsx

+ 10 - 0
src/components/theme-switch.tsx

@@ -1,9 +1,19 @@
 import { IconMoon, IconSun } from '@tabler/icons-react'
 import { useTheme } from './theme-provider'
 import { Button } from './custom/button'
+import { useEffect } from 'react'
 
 export default function ThemeSwitch() {
   const { theme, setTheme } = useTheme()
+
+  /* Update theme-color meta tag
+   * when theme is updated */
+  useEffect(() => {
+    const themeColor = theme === 'dark' ? '#020817' : '#fff'
+    const metaThemeColor = document.querySelector("meta[name='theme-color']")
+    metaThemeColor && metaThemeColor.setAttribute('content', themeColor)
+  }, [theme])
+
   return (
     <Button
       size='icon'