Add basic dark mode support

package.json

@@ -20,7 +20,7 @@
     "react-infinite-scroll-component": "^6.1.0",
     "react-no-ssr": "^1.1.0",
     "react-ogp": "^0.0.3",
-    "sass": "^1.58.1",
+    "sass": "^1.58.2",
     "usehooks-ts": "^2.9.1",
     "zod": "^3.20.2"
   },

src/components/render/DisplayIconSingle.tsx

@@ -23,7 +23,7 @@ const IconInternal: FunctionComponent<IconInternalProps> = ({label, children, on
         onClick={onClick}>
         {children ?? <BsQuestionCircle className="w-8 h-8"/>}
         <span
-            className="px-1 mt-1 text-[10px]">
+            className="text-black dark:text-zinc-200 px-1 mt-1 text-[10px]">
         {label}
         </span>
     </div>
@@ -32,14 +32,17 @@ const IconInternal: FunctionComponent<IconInternalProps> = ({label, children, on
 const DisplayIconSingle: FunctionComponent<DisplayIconSingleProps> = ({setId, id}) => {
     // eslint-disable-next-line
     const IconSet = loadable.lib(() => getIcons(setId));
+    const iconClass = "text-slate-700 dark:text-slate-200 group-hover:text-slate-900 group-hover:scale-125 transition-transform w-8 h-8";
 
-    return <IconSet fallback={<IconInternal label="..."/>}>
+    return <IconSet fallback={<IconInternal label="...">
+        <BsQuestionCircle className={iconClass}/>
+    </IconInternal>}>
         {(module) => {
             const Icon: IconType | undefined = (module as { [icon: string]: IconType })[id] ?? BiError;
             return <IconInternal label={id} onClick={() => {
                 void navigator.clipboard.writeText(`import {${id}} from "react-icons/${setId}";`)
             }}>
-                <Icon className="text-slate-700 group-hover:text-slate-900 group-hover:scale-125 transition-transform w-8 h-8"/>
+                <Icon className={iconClass}/>
             </IconInternal>
 
         }}

src/pages/_app.tsx

@@ -1,9 +1,12 @@
-import { type AppType } from "next/dist/shared/lib/utils";
+import {type AppType} from "next/dist/shared/lib/utils";
 
-import "../styles/globals.css";
+import "@styles/globals.scss";
 
-const MyApp: AppType = ({ Component, pageProps }) => {
-  return <Component {...pageProps} />;
+const MyApp: AppType = ({Component, pageProps}) => {
+
+    return <div className="min-h-screen min-w-screen bg-[#F6F6F6] dark:bg-zinc-800">
+        <Component {...pageProps} />
+    </div>
 };
 
 export default MyApp;

src/pages/index.tsx

@@ -76,13 +76,13 @@ const Home: NextPage = () => {
                     <input
                         ref={searchRef}
                         autoFocus
-                        className="grow bg-transparent ring-0 outline-none text-xl"
+                        className="placeholder:text-zinc-400 dark:text-zinc-200 dark:placeholder:text-zinc-300 grow bg-transparent ring-0 outline-none text-xl"
                         placeholder="Search for an icon..."
                         onChange={({target: {value}}) => setQuery(value)}
                         value={query}
                     />
                     <NoSSR>
-                        <span className="shrink text-xl text-zinc-500">
+                        <span className="shrink text-xl text-zinc-500 dark:text-zinc-200">
                             {showLoading ? <AiOutlineLoading3Quarters className="animate-spin h-5 w-5"/>
                                 : (query.length == 0
                                     ? icons.length
@@ -90,7 +90,7 @@ const Home: NextPage = () => {
                         </span>
                         {
                             timing !== 0
-                                ? <span className="ml-2 shrink text-lg text-zinc-400">{timing}ms</span>
+                                ? <span className="ml-2 shrink text-lg text-zinc-400 dark:text-zinc-300">{timing}ms</span>
                                 : null
                         }
                     </NoSSR>

src/styles/globals.scss

@@ -9,7 +9,6 @@
 
 html {
     font-family: system-ui, sans-serif;
-    background-color: #F6F6F6;
 }
 
 code {

yarn.lock

@@ -2281,10 +2281,10 @@ safe-regex-test@^1.0.0:
     get-intrinsic "^1.1.3"
     is-regex "^1.1.4"
 
-sass@^1.58.1:
-  version "1.58.1"
-  resolved "https://registry.yarnpkg.com/sass/-/sass-1.58.1.tgz#17ab0390076a50578ed0733f1cc45429e03405f6"
-  integrity sha512-bnINi6nPXbP1XNRaranMFEBZWUfdW/AF16Ql5+ypRxfTvCRTTKrLsMIakyDcayUt2t/RZotmL4kgJwNH5xO+bg==
+sass@^1.58.2:
+  version "1.58.2"
+  resolved "https://registry.yarnpkg.com/sass/-/sass-1.58.2.tgz#ef3c5098a02dd006f09a2350b114f1ac445e38ce"
+  integrity sha512-2mbyOWOv/lhEXD6nVrQZQ4KT2DlwcODbTskM42EyqBAFUWOhiiYtAXZqjZz1ygzapYf+N+2GwfIH9M5FM4GUMg==
   dependencies:
     chokidar ">=3.0.0 <4.0.0"
     immutable "^4.0.0"