Fix theme, meta tags & modal dark mode

components/search/modal.js

@@ -10,12 +10,14 @@ import {
   useDisclosure,
   IconButton,
   Button,
+  useColorModeValue,
 } from "@chakra-ui/react";
 import Search from "components/search";
 import { IoSearch } from "react-icons/io5";
 
 const ModalSearch = (props) => {
   const { isOpen, onOpen, onClose } = useDisclosure();
+  const bg = useColorModeValue("light.100", "dark.800");
   return (
     <>
       <IconButton
@@ -27,7 +29,7 @@ const ModalSearch = (props) => {
       />
       <Modal isOpen={isOpen} onClose={onClose} motionPreset='slideInBottom'>
         <ModalOverlay />
-        <ModalContent>
+        <ModalContent bg={bg}>
           <ModalHeader fontWeight="light">Search</ModalHeader>
           <ModalCloseButton />
           <ModalBody pb="5">

pages/_app.js

@@ -30,9 +30,11 @@ function MyApp({ Component, pageProps, router }) {
         <meta property="og:image" content="/images/banner.png" />
         <meta property="twitter:title" content="SVGL - Beautiful SVG logos" />
         <meta property="twitter:url" content="https://svgl.vercel.app/" />
-        <meta property="twitter:card" content="summary" />
+        <meta property="twitter:card" content="summary_large_image" />
         <meta property="twitter:creator" content="@pheralb" />
         <meta property="twitter:description" content="Beautiful SVG logos. Free and open source." />
+        <meta property="twitter:image:src" content="/images/banner.png" />
+        <meta name="twitter:site" content="@pheralb_" />
         <meta name="keywords" content="svg,vector,logo,logos,download" />
         <meta content="#16161a" name="theme-color" />
         <link rel="icon" href="/icons/icon.ico" />

styles/theme.js

@@ -8,7 +8,7 @@ const theme = extendTheme(
   },
   {
     config: {
-      initialColorMode: "dark",
+      initialColorMode: "light",
       useSystemColorMode: false,
     },
     colors: {