Selaa lähdekoodia

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

satnaing 2 vuotta sitten
vanhempi
sitoutus
72810ddaf7
1 muutettua tiedostoa jossa 10 lisäystä ja 0 poistoa
  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'