Adds dark theme to preview site

packages/preview/package.json

@@ -13,7 +13,7 @@
   "private": true,
   "dependencies": {
     "@loadable/component": "^5.15.3",
-    "@onemind-services-llc/react-icons-ng": "^5.0.2",
+    "@onemind-services-llc/react-icons-ng": "^5.0.3",
     "babel-plugin-codegen": "^4.1.5",
     "babel-plugin-macros": "^3.1.0",
     "basscss": "^8.1.0",

packages/preview/src/components/@core/content/index.tsx

@@ -1,5 +1,49 @@
+import { useDarkTheme } from "@context/DarkThemeContext";
 import React from "react";
+import { BsFillSunFill } from "@onemind-services-llc/react-icons-ng/bs";
+import { BsFillMoonStarsFill } from "@onemind-services-llc/react-icons-ng/bs";
 
 export default function Container({ children }) {
-  return <main className="container">{children}</main>;
+  const { isDarkTheme, toggleTheme } = useDarkTheme();
+  return (
+    <div className={`${isDarkTheme ? "dark-theme" : ""}`}>
+      <div
+        style={{
+          position: "absolute",
+          right: "0",
+          top: "0",
+          padding: "calc(var(--space-3) + 10px)",
+        }}
+      >
+        <input
+          type="checkbox"
+          className="checkbox"
+          id="checkbox"
+          onClick={() => {
+            console.log("vishal kumar");
+            toggleTheme();
+          }}
+        />
+        <label htmlFor="checkbox" className="checkbox-label">
+          <BsFillSunFill
+            style={{
+              color: "#f1c40f",
+            }}
+          />
+          <BsFillMoonStarsFill
+            style={{
+              color: "#f39c12",
+            }}
+          />
+          <span
+            className="ball"
+            style={{
+              transform: isDarkTheme ? "translateX(24px)" : "translateX(0px)",
+            }}
+          />
+        </label>
+      </div>
+      <main className="container">{children}</main>
+    </div>
+  );
 }

packages/preview/src/components/@core/sidebar/index.tsx

@@ -11,6 +11,7 @@ import React, {
 import ActiveLink from "../active-link";
 import Heading from "../heading";
 import { debounce } from "@utils/debounce";
+import { useDarkTheme } from "@context/DarkThemeContext";
 
 const searchPath = "/search";
 
@@ -23,6 +24,7 @@ export default function Sidebar() {
   const [isOpen, setIsOpen] = useState(false);
   const [inputQuery, setInputQuery] = useState("");
   const searchRef = useRef<HTMLInputElement>(null);
+  const { isDarkTheme } = useDarkTheme();
 
   // search input stays in sync with the url query
   useEffect(() => {
@@ -67,41 +69,48 @@ export default function Sidebar() {
   }, []);
 
   return (
-    <div className="sidebar pt3">
-      <Heading isOpen={isOpen} setIsOpen={setIsOpen} />
+    <div className={`${isDarkTheme ? "dark-theme" : ""}`}>
+      <div className="sidebar pt3">
+        <Heading isOpen={isOpen} setIsOpen={setIsOpen} />
 
-      <div className="search p2">
-        <input
-          type="text"
-          aria-label="search"
-          className="px2 py1"
-          placeholder="🔍 Search Icons (/)"
-          onChange={onSearch}
-          ref={searchRef}
-          value={inputQuery}
-          autoComplete="off"
-          autoCorrect="off"
-          autoCapitalize="off"
-          spellCheck="false"
-        />
-      </div>
+        <div className="search p2">
+          <input
+            type="text"
+            aria-label="search"
+            className="px2 py1"
+            placeholder="🔍 Search Icons (/)"
+            onChange={onSearch}
+            ref={searchRef}
+            value={inputQuery}
+            autoComplete="off"
+            autoCorrect="off"
+            autoCapitalize="off"
+            spellCheck="false"
+          />
+        </div>
 
-      <ul className={`sidebar--links ${isOpen && "active"}`}>
-        <li>
-          <ActiveLink href="/">
-            <a className="rounded px2 py1">Home</a>
-          </ActiveLink>
-        </li>
-        {iconsList.map((icon) => (
-          <li key={icon.id}>
-            <ActiveLink href={{ pathname: "icons", query: { name: icon.id } }}>
-              <a className="rounded px2 py1" onClick={() => setInputQuery("")}>
-                {icon.name}
-              </a>
+        <ul className={`sidebar--links ${isOpen && "active"}`}>
+          <li>
+            <ActiveLink href="/">
+              <a className="rounded px2 py1">Home</a>
             </ActiveLink>
           </li>
-        ))}
-      </ul>
+          {iconsList.map((icon) => (
+            <li key={icon.id}>
+              <ActiveLink
+                href={{ pathname: "icons", query: { name: icon.id } }}
+              >
+                <a
+                  className="rounded px2 py1"
+                  onClick={() => setInputQuery("")}
+                >
+                  {icon.name}
+                </a>
+              </ActiveLink>
+            </li>
+          ))}
+        </ul>
+      </div>
     </div>
   );
 }

packages/preview/src/context/DarkThemeContext.tsx

@@ -0,0 +1,60 @@
+import React, {
+  createContext,
+  useContext,
+  useState,
+  useEffect,
+  ReactNode,
+} from "react";
+
+interface DarkThemeContextType {
+  isDarkTheme: boolean;
+  toggleTheme: () => void;
+}
+
+const DarkThemeContext = createContext<DarkThemeContextType | undefined>(
+  undefined,
+);
+
+interface DarkThemeProviderProps {
+  children: ReactNode;
+}
+
+const DarkThemeProvider = ({ children }: DarkThemeProviderProps) => {
+  const [isDarkTheme, setIsDarkTheme] = useState(false);
+
+  useEffect(() => {
+    if (localStorage.getItem("darkTheme") === null) {
+      if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
+        setIsDarkTheme(true);
+        localStorage.setItem("darkTheme", "true");
+      } else localStorage.setItem("darkTheme", "false");
+    } else {
+      setIsDarkTheme(
+        localStorage.getItem("darkTheme") === "true" ? true : false,
+      );
+    }
+  }, []);
+
+  const toggleTheme = () => {
+    setIsDarkTheme((prevIsDarkTheme) => {
+      localStorage.setItem("darkTheme", (!prevIsDarkTheme).toString());
+      return !prevIsDarkTheme;
+    });
+  };
+
+  return (
+    <DarkThemeContext.Provider value={{ isDarkTheme, toggleTheme }}>
+      {children}
+    </DarkThemeContext.Provider>
+  );
+};
+
+export const useDarkTheme = () => {
+  const context = useContext(DarkThemeContext);
+  if (!context) {
+    throw new Error("useDarkTheme must be used within a DarkThemeProvider");
+  }
+  return context;
+};
+
+export { DarkThemeContext, DarkThemeProvider };

packages/preview/src/pages/_app.tsx

@@ -6,6 +6,7 @@ import { BRAND_TITLE } from "@utils/constants";
 import NextApp from "next/app";
 import Head from "next/head";
 import React from "react";
+import { DarkThemeProvider } from "@context/DarkThemeContext";
 
 interface Props {
   pageProps: unknown;
@@ -16,13 +17,15 @@ class App extends NextApp<Props> {
     const { pageProps, Component } = this.props;
     return (
       <>
-        <Sidebar />
-        <Head>
-          <title>{BRAND_TITLE}</title>
-        </Head>
-        <Container>
-          <Component {...pageProps} />
-        </Container>
+        <DarkThemeProvider>
+          <Sidebar />
+          <Head>
+            <title>{BRAND_TITLE}</title>
+          </Head>
+          <Container>
+            <Component {...pageProps} />
+          </Container>
+        </DarkThemeProvider>
       </>
     );
   }