system theme favicon

Author: kvnal

pages/_app.js

@@ -3,8 +3,19 @@ import '../styles/globals.css';
 import { Header } from '../components';
 import SEO from '@bradgarropy/next-seo';
 import { motion } from 'framer-motion';
+import { useEffect, useState } from 'react';
 
 function MyApp({ Component, pageProps, router }) {
+  const [favicon, setFavicon] = useState("/faviconLight.ico");
+  const changeFavicon = () => {
+    const isDark = window.matchMedia("(prefers-color-scheme: dark)");
+    if (!isDark.matches)
+      return setFavicon("/faviconDark.ico");
+  };
+
+  useEffect(() => {
+    changeFavicon();
+  }, []);
   return (
     <motion.div
       key={router.route}
@@ -22,7 +33,7 @@ function MyApp({ Component, pageProps, router }) {
       <SEO
         title="Web APIs Playground - Create, Share, Learn JavaScript Web APIs"
         description="The Web APIs Playground is a project to showcase the JavaScript Web APIs with examples and demonstrations. Client-side JavaScript APIs provides wrapper functions for many low-level tasks."
-        icon="/favicon2.ico"
+        icon={favicon}
         keywords={[
           'javascript',
           'web apis',