From 2a902dd6fc19b005e12f48798638c866254ef7ca Mon Sep 17 00:00:00 2001
From: CodeMaverick143 <arpit.01.sarang.2005@gmail.com>
Date: Wed, 5 Nov 2025 02:30:59 +0530
Subject: [PATCH 1/3] I'll implement a dark theme for the Home (Landing) Page
 while keeping the existing structure and design intact

---
 src/App.jsx                    | 27 ++++++-----
 src/components/Navbar.jsx      | 39 ++++++++++------
 src/components/ThemeToggle.jsx | 24 ++++++++++
 src/context/ThemeContext.jsx   | 83 ++++++++++++++++++++++++++++++++++
 src/pages/LandingPage.jsx      | 73 +++++++++++++++---------------
 tailwind.config.js             |  1 +
 6 files changed, 184 insertions(+), 63 deletions(-)
 create mode 100644 src/components/ThemeToggle.jsx
 create mode 100644 src/context/ThemeContext.jsx

diff --git a/src/App.jsx b/src/App.jsx
index fcb09811b..a2aabf912 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -5,22 +5,25 @@ import BugReport from "./pages/BugReport";
 import Templates from "./pages/Templates";
 import LandingPage from "./pages/LandingPage";
 import SettingsContextProvider from "./context/SettingsContext";
+import ThemeProvider from "./context/ThemeContext";
 import NotFound from "./pages/NotFound";
 
 export default function App() {
   return (
-    <SettingsContextProvider>
-      <BrowserRouter>
-        <RestoreScroll />
-        <Routes>
-          <Route path="/" element={<LandingPage />} />
-          <Route path="/editor" element={<Editor />} />
-          <Route path="/bug-report" element={<BugReport />} />
-          <Route path="/templates" element={<Templates />} />
-          <Route path="*" element={<NotFound />} />
-        </Routes>
-      </BrowserRouter>
-    </SettingsContextProvider>
+    <ThemeProvider>
+      <SettingsContextProvider>
+        <BrowserRouter>
+          <RestoreScroll />
+          <Routes>
+            <Route path="/" element={<LandingPage />} />
+            <Route path="/editor" element={<Editor />} />
+            <Route path="/bug-report" element={<BugReport />} />
+            <Route path="/templates" element={<Templates />} />
+            <Route path="*" element={<NotFound />} />
+          </Routes>
+        </BrowserRouter>
+      </SettingsContextProvider>
+    </ThemeProvider>
   );
 }
 
diff --git a/src/components/Navbar.jsx b/src/components/Navbar.jsx
index 8ef775d07..363e88890 100644
--- a/src/components/Navbar.jsx
+++ b/src/components/Navbar.jsx
@@ -4,20 +4,23 @@ import logo from "../assets/logo_light_160.png";
 import { SideSheet } from "@douyinfe/semi-ui";
 import { IconMenu } from "@douyinfe/semi-icons";
 import { socials } from "../data/socials";
+import ThemeToggle from "./ThemeToggle";
+import { useTheme } from "../context/ThemeContext";
 
 export default function Navbar() {
   const [openMenu, setOpenMenu] = useState(false);
+  const { theme } = useTheme();
 
   return (
     <>
-      <div className="py-4 px-12 sm:px-4 flex justify-between items-center">
-        <div className="flex items-center justify-between w-full">
+      <div className="py-4 px-12 sm:px-4 flex justify-between items-center dark:bg-gray-800">
+        <div className="flex items-center justify-between w-full relative">
           <Link to="/">
             <img src={logo} alt="logo" className="h-[48px] sm:h-[32px]" />
           </Link>
           <div className="md:hidden flex gap-12">
             <Link
-              className="text-lg font-semibold hover:text-sky-800 transition-colors duration-300"
+              className="text-lg font-semibold hover:text-sky-800 dark:text-gray-200 dark:hover:text-sky-400 transition-colors duration-300"
               onClick={() =>
                 document
                   .getElementById("features")
@@ -28,24 +31,25 @@ export default function Navbar() {
             </Link>
             <Link
               to="/editor"
-              className="text-lg font-semibold hover:text-sky-800 transition-colors duration-300"
+              className="text-lg font-semibold hover:text-sky-800 dark:text-gray-200 dark:hover:text-sky-400 transition-colors duration-300"
             >
               Editor
             </Link>
             <Link
               to="/templates"
-              className="text-lg font-semibold hover:text-sky-800 transition-colors duration-300"
+              className="text-lg font-semibold hover:text-sky-800 dark:text-gray-200 dark:hover:text-sky-400 transition-colors duration-300"
             >
               Templates
             </Link>
             <Link
               to={socials.docs}
-              className="text-lg font-semibold hover:text-sky-800 transition-colors duration-300"
+              className="text-lg font-semibold hover:text-sky-800 dark:text-gray-200 dark:hover:text-sky-400 transition-colors duration-300"
             >
               Docs
             </Link>
           </div>
-          <div className="md:hidden block space-x-3 ms-12">
+          <div className="md:hidden flex items-center space-x-3 ms-12">
+            <ThemeToggle className="mr-2" />
             <a
               title="Jump to Github"
               className="px-2 py-2 hover:opacity-60 transition-all duration-300 rounded-full text-2xl"
@@ -53,7 +57,7 @@ export default function Navbar() {
               target="_blank"
               rel="noreferrer"
             >
-              <i className="opacity-70 bi bi-github" />
+              <i className="opacity-70 bi bi-github dark:text-gray-200" />
             </a>
             <a
               title="Follow us on X"
@@ -62,7 +66,7 @@ export default function Navbar() {
               target="_blank"
               rel="noreferrer"
             >
-              <i className="opacity-70 bi bi-twitter-x" />
+              <i className="opacity-70 bi bi-twitter-x dark:text-gray-200" />
             </a>
             <a
               title="Join the community on Discord"
@@ -71,13 +75,13 @@ export default function Navbar() {
               target="_blank"
               rel="noreferrer"
             >
-              <i className="opacity-70 bi bi-discord" />
+              <i className="opacity-70 bi bi-discord dark:text-gray-200" />
             </a>
           </div>
         </div>
         <button
           onClick={() => setOpenMenu((prev) => !prev)}
-          className="hidden md:inline-block h-[24px]"
+          className="hidden md:inline-block h-[24px] dark:text-gray-200"
         >
           <IconMenu size="extra-large" />
         </button>
@@ -92,7 +96,7 @@ export default function Navbar() {
         width={window.innerWidth}
       >
         <Link
-          className="hover:bg-zinc-100 block p-3 text-base font-semibold"
+          className="hover:bg-zinc-100 dark:hover:bg-gray-700 block p-3 text-base font-semibold dark:text-gray-200"
           onClick={() => {
             document
               .getElementById("features")
@@ -105,24 +109,29 @@ export default function Navbar() {
         <hr />
         <Link
           to="/editor"
-          className="hover:bg-zinc-100 block p-3 text-base font-semibold"
+          className="hover:bg-zinc-100 dark:hover:bg-gray-700 block p-3 text-base font-semibold dark:text-gray-200"
         >
           Editor
         </Link>
         <hr />
         <Link
           to="/templates"
-          className="hover:bg-zinc-100 block p-3 text-base font-semibold"
+          className="hover:bg-zinc-100 dark:hover:bg-gray-700 block p-3 text-base font-semibold dark:text-gray-200"
         >
           Templates
         </Link>
         <hr />
         <Link
           to={socials.docs}
-          className="hover:bg-zinc-100 block p-3 text-base font-semibold"
+          className="hover:bg-zinc-100 dark:hover:bg-gray-700 block p-3 text-base font-semibold dark:text-gray-200"
         >
           Docs
         </Link>
+        <hr className="dark:border-gray-700" />
+        <div className="p-3 flex items-center">
+          <span className="text-base font-semibold mr-3 dark:text-gray-200">Theme:</span>
+          <ThemeToggle />
+        </div>
       </SideSheet>
     </>
   );
diff --git a/src/components/ThemeToggle.jsx b/src/components/ThemeToggle.jsx
new file mode 100644
index 000000000..a35e40ff6
--- /dev/null
+++ b/src/components/ThemeToggle.jsx
@@ -0,0 +1,24 @@
+import { useTheme } from "../context/ThemeContext";
+
+export default function ThemeToggle({ className = "" }) {
+  const { theme, toggleTheme } = useTheme();
+
+  return (
+    <button
+      onClick={toggleTheme}
+      className={`p-2 rounded-full transition-colors duration-300 ${
+        theme === "dark" 
+          ? "bg-gray-700 hover:bg-gray-600 text-yellow-300" 
+          : "bg-gray-200 hover:bg-gray-300 text-gray-700"
+      } ${className}`}
+      aria-label={`Switch to ${theme === "light" ? "dark" : "light"} mode`}
+      title={`Switch to ${theme === "light" ? "dark" : "light"} mode`}
+    >
+      {theme === "dark" ? (
+        <i className="bi bi-sun-fill text-xl"></i>
+      ) : (
+        <i className="bi bi-moon-fill text-xl"></i>
+      )}
+    </button>
+  );
+}
diff --git a/src/context/ThemeContext.jsx b/src/context/ThemeContext.jsx
new file mode 100644
index 000000000..13f686f19
--- /dev/null
+++ b/src/context/ThemeContext.jsx
@@ -0,0 +1,83 @@
+import { createContext, useContext, useEffect, useState } from "react";
+
+// Create context
+export const ThemeContext = createContext();
+
+// Theme provider component
+export default function ThemeProvider({ children }) {
+  // Check for system preference and stored preference
+  const getInitialTheme = () => {
+    // Check if we're in the browser
+    if (typeof window !== "undefined") {
+      // Check localStorage first
+      const storedTheme = localStorage.getItem("theme");
+      if (storedTheme) {
+        return storedTheme;
+      }
+
+      // Check system preference
+      const userPrefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
+      return userPrefersDark ? "dark" : "light";
+    }
+
+    // Default to light if not in browser
+    return "light";
+  };
+
+  const [theme, setTheme] = useState(getInitialTheme);
+
+  // Toggle theme function
+  const toggleTheme = () => {
+    setTheme(prevTheme => prevTheme === "light" ? "dark" : "light");
+  };
+
+  // Update localStorage and apply theme class to html element
+  useEffect(() => {
+    // Save to localStorage
+    localStorage.setItem("theme", theme);
+
+    // Apply class to html element
+    const htmlElement = document.documentElement;
+    if (theme === "dark") {
+      htmlElement.classList.add("dark");
+    } else {
+      htmlElement.classList.remove("dark");
+    }
+
+    // Also update the theme-mode attribute for semi-ui components
+    document.body.setAttribute("theme-mode", theme);
+  }, [theme]);
+
+  // Listen for system preference changes
+  useEffect(() => {
+    const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+    const handleChange = () => {
+      // Only update if user hasn't manually set a preference
+      if (!localStorage.getItem("theme")) {
+        setTheme(mediaQuery.matches ? "dark" : "light");
+      }
+    };
+
+    // Add listener
+    mediaQuery.addEventListener("change", handleChange);
+
+    // Clean up
+    return () => mediaQuery.removeEventListener("change", handleChange);
+  }, []);
+
+  // Provide theme context to children
+  return (
+    <ThemeContext.Provider value={{ theme, toggleTheme }}>
+      {children}
+    </ThemeContext.Provider>
+  );
+}
+
+// Custom hook for using theme
+export const useTheme = () => {
+  const context = useContext(ThemeContext);
+  if (context === undefined) {
+    throw new Error("useTheme must be used within a ThemeProvider");
+  }
+  return context;
+};
diff --git a/src/pages/LandingPage.jsx b/src/pages/LandingPage.jsx
index 2638d7333..031e4dbd2 100644
--- a/src/pages/LandingPage.jsx
+++ b/src/pages/LandingPage.jsx
@@ -18,6 +18,7 @@ import axios from "axios";
 import { languages } from "../i18n/i18n";
 import { Tweet } from "react-tweet";
 import { socials } from "../data/socials";
+import { useTheme } from "../context/ThemeContext";
 
 function shortenNumber(number) {
   if (number < 1000) return number;
@@ -29,6 +30,8 @@ function shortenNumber(number) {
 export default function LandingPage() {
   const [stats, setStats] = useState({ stars: 18000, forks: 1200 });
 
+  const { theme } = useTheme();
+
   useEffect(() => {
     const fetchStats = async () => {
       await axios
@@ -36,7 +39,6 @@ export default function LandingPage() {
         .then((res) => setStats(res.data));
     };
 
-    document.body.setAttribute("theme-mode", "light");
     document.title =
       "drawDB | Online database diagram editor and SQL generator";
 
@@ -44,36 +46,36 @@ export default function LandingPage() {
   }, []);
 
   return (
-    <div>
-      <div className="flex flex-col h-screen bg-zinc-100">
-        <div className="text-white font-semibold py-1 text-sm text-center bg-linear-to-r from-[#12495e] from-10% via-slate-500 to-[#12495e]" />
+    <div className="dark:text-white">
+      <div className="flex flex-col h-screen bg-zinc-100 dark:bg-gray-900">
+        <div className="text-white font-semibold py-1 text-sm text-center bg-linear-to-r from-[#12495e] from-10% via-slate-500 to-[#12495e] dark:from-sky-900 dark:via-slate-700 dark:to-sky-900" />
 
         <FadeIn duration={0.6}>
           <Navbar />
         </FadeIn>
 
         {/* Hero section */}
-        <div className="flex-1 flex-col relative mx-4 md:mx-0 mb-4 rounded-3xl bg-white">
+        <div className="flex-1 flex-col relative mx-4 md:mx-0 mb-4 rounded-3xl bg-white dark:bg-gray-800">
           <div className="h-full md:hidden">
             <SimpleCanvas diagram={diagram} zoom={0.85} />
           </div>
-          <div className="hidden md:block h-full bg-dots" />
-          <div className="absolute left-12 w-[45%] top-[50%] translate-y-[-54%] md:left-[50%] md:translate-x-[-50%] p-8 md:p-3 md:w-full text-zinc-800">
+          <div className="hidden md:block h-full bg-dots dark:opacity-30" />
+          <div className="absolute left-12 w-[45%] top-[50%] translate-y-[-54%] md:left-[50%] md:translate-x-[-50%] p-8 md:p-3 md:w-full text-zinc-800 dark:text-gray-100">
             <FadeIn duration={0.75}>
               <div className="md:px-3">
-                <h1 className="text-[42px] md:text-3xl font-bold tracking-wide bg-linear-to-r from-sky-900 from-10% via-slate-500 to-[#12495e] inline-block text-transparent bg-clip-text">
+                <h1 className="text-[42px] md:text-3xl font-bold tracking-wide bg-linear-to-r from-sky-900 from-10% via-slate-500 to-[#12495e] dark:from-sky-400 dark:via-blue-300 dark:to-sky-200 inline-block text-transparent bg-clip-text">
                   Draw, Copy, and Paste
                 </h1>
                 <div className="text-lg font-medium mt-1 sliding-vertical">
                   Free and open source, simple, and intuitive database design
                   editor, data-modeler, and SQL generator.{" "}
-                  <span className="ms-2 sm:block sm:ms-0 text-slate-500 bg-white font-bold whitespace-nowrap">
+                  <span className="ms-2 sm:block sm:ms-0 text-slate-500 dark:text-slate-300 bg-white dark:bg-gray-800 font-bold whitespace-nowrap">
                     No sign up
                   </span>
-                  <span className="ms-2 sm:block sm:ms-0 text-slate-500 bg-white font-bold whitespace-nowrap">
+                  <span className="ms-2 sm:block sm:ms-0 text-slate-500 dark:text-slate-300 bg-white dark:bg-gray-800 font-bold whitespace-nowrap">
                     Free of charge
                   </span>
-                  <span className="ms-2 sm:block sm:ms-0 text-slate-500 bg-white font-bold whitespace-nowrap">
+                  <span className="ms-2 sm:block sm:ms-0 text-slate-500 dark:text-slate-300 bg-white dark:bg-gray-800 font-bold whitespace-nowrap">
                     Quick and easy
                   </span>
                 </div>
@@ -81,7 +83,7 @@ export default function LandingPage() {
             </FadeIn>
             <div className="mt-4 font-semibold md:mt-12">
               <button
-                className="py-3 mb-4 xl:mb-0 mr-4 transition-all duration-300 bg-white border rounded-full shadow-lg px-9 border-zinc-200 hover:bg-zinc-100"
+                className="py-3 mb-4 xl:mb-0 mr-4 transition-all duration-300 bg-white dark:bg-gray-700 border rounded-full shadow-lg px-9 border-zinc-200 dark:border-gray-600 hover:bg-zinc-100 dark:hover:bg-gray-600 dark:text-white"
                 onClick={() =>
                   document
                     .getElementById("learn-more")
@@ -92,7 +94,7 @@ export default function LandingPage() {
               </button>
               <Link
                 to="/editor"
-                className="inline-block py-3 text-white transition-all duration-300 rounded-full shadow-lg bg-sky-900 ps-7 pe-6 hover:bg-sky-800"
+                className="inline-block py-3 text-white transition-all duration-300 rounded-full shadow-lg bg-sky-900 dark:bg-sky-700 ps-7 pe-6 hover:bg-sky-800 dark:hover:bg-sky-600"
               >
                 Try it for yourself <i className="bi bi-arrow-right ms-1"></i>
               </Link>
@@ -103,10 +105,10 @@ export default function LandingPage() {
 
       {/* Learn more */}
       <div id="learn-more">
-        <div className="bg-zinc-100 py-10 px-28 md:px-8">
+        <div className="bg-zinc-100 dark:bg-gray-900 py-10 px-28 md:px-8">
           {/* Supported by */}
           <div className="text-center mb-16">
-            <div className="text-2xl md:text-xl font-bold text-sky-800 mb-8">
+            <div className="text-2xl md:text-xl font-bold text-sky-800 dark:text-sky-400 mb-8">
               Supported by
             </div>
             <div>
@@ -121,13 +123,13 @@ export default function LandingPage() {
                   width={260}
                   className="m-auto mb-4"
                 />
-                <div className="font-semibold text-lg md:text-base">
+                <div className="font-semibold text-lg md:text-base dark:text-gray-200">
                   Next-gen AI-powered intelligent terminal for all platforms
                 </div>
               </a>
             </div>
           </div>
-          <div className="mt-16 w-[75%] text-center sm:w-full mx-auto shadow-xs rounded-2xl border p-6 bg-white space-y-3 mb-12">
+          <div className="mt-16 w-[75%] text-center sm:w-full mx-auto shadow-xs rounded-2xl border p-6 bg-white dark:bg-gray-800 dark:border-gray-700 space-y-3 mb-12">
             <div className="text-lg font-medium">
               Build diagrams with a few clicks, see the full picture, export SQL
               scripts, customize your editor, and more.
@@ -160,7 +162,7 @@ export default function LandingPage() {
               </div>
             </div>
           </div>
-          <div className="text-lg font-medium text-center mt-12 mb-6">
+          <div className="text-lg font-medium text-center mt-12 mb-6 dark:text-gray-200">
             Design for your database
           </div>
           <div className="grid grid-cols-3 place-items-center sm:grid-cols-1 sm:gap-10">
@@ -183,31 +185,30 @@ export default function LandingPage() {
         >
           <path
             d="M0 54C0 54 320 0 720 0C1080 0 1440 54 1440 54V0H0V100Z"
-            fill="#f4f4f5"
+            fill="#f4f4f5" className="dark:fill-gray-900"
           />
         </svg>
       </div>
 
       {/* Features */}
-      <div id="features" className="py-8 px-36 md:px-8">
+      <div id="features" className="py-8 px-36 md:px-8 dark:bg-gray-800">
         <FadeIn duration={1}>
-          <div className="text-base font-medium text-center text-sky-900">
+          <div className="text-base font-medium text-center text-sky-900 dark:text-sky-400">
             More than just an editor
           </div>
-          <div className="text-2xl mt-1 font-medium text-center">
+          <div className="text-2xl mt-1 font-medium text-center dark:text-white">
             What drawDB has to offer
           </div>
           <div className="grid grid-cols-3 gap-8 mt-10 md:grid-cols-2 sm:grid-cols-1">
             {features.map((f, i) => (
               <div
                 key={"feature" + i}
-                className="flex rounded-xl hover:bg-zinc-100 border border-zinc-100 shadow-xs hover:-translate-y-2 transition-all duration-300"
-              >
-                <div className="bg-sky-700 px-0.5 rounded-l-xl" />
+                className="flex rounded-xl hover:bg-zinc-100 dark:hover:bg-gray-700 border border-zinc-100 dark:border-gray-700 shadow-xs hover:-translate-y-2 transition-all duration-300 dark:bg-gray-800">
+                <div className="bg-sky-700 dark:bg-sky-500 px-0.5 rounded-l-xl" />
                 <div className="px-8 py-4 ">
-                  <div className="text-lg font-semibold mb-3">{f.title}</div>
+                  <div className="text-lg font-semibold mb-3 dark:text-white">{f.title}</div>
                   {f.content}
-                  <div className="mt-2 text-xs opacity-60">{f.footer}</div>
+                  <div className="mt-2 text-xs opacity-60 dark:text-gray-300">{f.footer}</div>
                 </div>
               </div>
             ))}
@@ -216,12 +217,12 @@ export default function LandingPage() {
       </div>
 
       {/* Tweets */}
-      <div className="px-40 mt-6 md:px-8">
-        <div className="text-center text-2xl md:text-xl font-medium">
+      <div className="px-40 mt-6 md:px-8 dark:bg-gray-800">
+        <div className="text-center text-2xl md:text-xl font-medium dark:text-white">
           What the internet says about us
         </div>
         <div
-          data-theme="light"
+          data-theme={theme}
           className="grid grid-cols-2 place-items-center md:grid-cols-1"
         >
           <Tweet id="1816111365125218343" />
@@ -244,11 +245,11 @@ export default function LandingPage() {
           fill="#f4f4f5"
         />
       </svg>
-      <div className="bg-zinc-100 py-8 px-32 md:px-8">
-        <div className="mt-4 mb-2 text-2xl font-bold text-center">
+      <div className="bg-zinc-100 dark:bg-gray-900 py-8 px-32 md:px-8">
+        <div className="mt-4 mb-2 text-2xl font-bold text-center dark:text-white">
           Reach out to us
         </div>
-        <div className="text-lg text-center mb-4">
+        <div className="text-lg text-center mb-4 dark:text-gray-300">
           We love hearing from you. Join our community on Discord, GitHub, and
           X.
         </div>
@@ -295,12 +296,12 @@ export default function LandingPage() {
         </div>
       </div>
 
-      <div className="bg-red-700 py-1 text-center text-white text-xs font-semibold px-3">
+      <div className="bg-red-700 dark:bg-red-800 py-1 text-center text-white text-xs font-semibold px-3">
         Attention! The diagrams are saved in your browser. Before clearing the
         browser make sure to back up your data.
       </div>
-      <hr className="border-zinc-300" />
-      <div className="text-center text-sm py-3">
+      <hr className="border-zinc-300 dark:border-gray-700" />
+      <div className="text-center text-sm py-3 dark:bg-gray-800 dark:text-white">
         &copy; {new Date().getFullYear()} <strong>drawDB</strong> - All rights reserved.
       </div>
     </div>
diff --git a/tailwind.config.js b/tailwind.config.js
index 619a0f9f6..269b905f4 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -3,6 +3,7 @@ export default {
   content: [
     "./src/**/*.{js,jsx,ts,tsx}",
   ],
+  darkMode: 'class',
   theme: {
     screens: {
       '3xl': {'max': '2047px'},

From 603e1e307879ed7a797d0b393025d529f6e45adf Mon Sep 17 00:00:00 2001
From: CodeMaverick143 <arpit.01.sarang.2005@gmail.com>
Date: Wed, 5 Nov 2025 03:05:02 +0530
Subject: [PATCH 2/3] implement dark theme in landing page and fix build issue

---
 package-lock.json | 275 +++++++++++++++++++++++++++++++++++++++++++---
 package.json      |   9 +-
 vite.config.js    |  56 +++++++++-
 3 files changed, 318 insertions(+), 22 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 30bd13ea1..b2c74b785 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -13,7 +13,10 @@
         "@dnd-kit/sortable": "^10.0.0",
         "@dnd-kit/utilities": "^3.2.2",
         "@douyinfe/semi-ui": "^2.77.1",
-        "@lexical/react": "^0.12.5",
+        "@lexical/react": "^0.12.6",
+        "@lexical/rich-text": "^0.38.2",
+        "@lexical/selection": "^0.38.2",
+        "@lexical/utils": "^0.12.6",
         "@monaco-editor/react": "^4.7.0",
         "@vercel/analytics": "^1.2.2",
         "@vercel/speed-insights": "^1.2.0",
@@ -29,7 +32,7 @@
         "jsonschema": "^1.4.1",
         "jspdf": "^3.0.2",
         "jszip": "^3.10.1",
-        "lexical": "^0.12.5",
+        "lexical": "^0.12.6",
         "lodash": "^4.17.21",
         "luxon": "^3.7.1",
         "nanoid": "^5.1.5",
@@ -1229,6 +1232,15 @@
         "lexical": "0.12.6"
       }
     },
+    "node_modules/@lexical/clipboard/node_modules/@lexical/selection": {
+      "version": "0.12.6",
+      "resolved": "https://registry.npmjs.org/@lexical/selection/-/selection-0.12.6.tgz",
+      "integrity": "sha512-HJBEazVwOe6duyHV6+vB/MS4kUBlCV05Cfcigdx8HlLLFQRWPqHrTpaxKz4jfb9ar0SlI2W1BUNbySAxMkC/HQ==",
+      "license": "MIT",
+      "peerDependencies": {
+        "lexical": "0.12.6"
+      }
+    },
     "node_modules/@lexical/code": {
       "version": "0.12.6",
       "resolved": "https://registry.npmjs.org/@lexical/code/-/code-0.12.6.tgz",
@@ -1251,6 +1263,83 @@
         "lexical": "0.12.6"
       }
     },
+    "node_modules/@lexical/extension": {
+      "version": "0.38.2",
+      "resolved": "https://registry.npmjs.org/@lexical/extension/-/extension-0.38.2.tgz",
+      "integrity": "sha512-qbUNxEVjAC0kxp7hEMTzktj0/51SyJoIJWK6Gm790b4yNBq82fEPkksfuLkRg9VQUteD0RT1Nkjy8pho8nNamw==",
+      "license": "MIT",
+      "dependencies": {
+        "@lexical/utils": "0.38.2",
+        "@preact/signals-core": "^1.11.0",
+        "lexical": "0.38.2"
+      }
+    },
+    "node_modules/@lexical/extension/node_modules/@lexical/clipboard": {
+      "version": "0.38.2",
+      "resolved": "https://registry.npmjs.org/@lexical/clipboard/-/clipboard-0.38.2.tgz",
+      "integrity": "sha512-dDShUplCu8/o6BB9ousr3uFZ9bltR+HtleF/Tl8FXFNPpZ4AXhbLKUoJuucRuIr+zqT7RxEv/3M6pk/HEoE6NQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@lexical/html": "0.38.2",
+        "@lexical/list": "0.38.2",
+        "@lexical/selection": "0.38.2",
+        "@lexical/utils": "0.38.2",
+        "lexical": "0.38.2"
+      }
+    },
+    "node_modules/@lexical/extension/node_modules/@lexical/html": {
+      "version": "0.38.2",
+      "resolved": "https://registry.npmjs.org/@lexical/html/-/html-0.38.2.tgz",
+      "integrity": "sha512-pC5AV+07bmHistRwgG3NJzBMlIzSdxYO6rJU4eBNzyR4becdiLsI4iuv+aY7PhfSv+SCs7QJ9oc4i5caq48Pkg==",
+      "license": "MIT",
+      "dependencies": {
+        "@lexical/selection": "0.38.2",
+        "@lexical/utils": "0.38.2",
+        "lexical": "0.38.2"
+      }
+    },
+    "node_modules/@lexical/extension/node_modules/@lexical/list": {
+      "version": "0.38.2",
+      "resolved": "https://registry.npmjs.org/@lexical/list/-/list-0.38.2.tgz",
+      "integrity": "sha512-OQm9TzatlMrDZGxMxbozZEHzMJhKxAbH1TOnOGyFfzpfjbnFK2y8oLeVsfQZfZRmiqQS4Qc/rpFnRP2Ax5dsbA==",
+      "license": "MIT",
+      "dependencies": {
+        "@lexical/extension": "0.38.2",
+        "@lexical/selection": "0.38.2",
+        "@lexical/utils": "0.38.2",
+        "lexical": "0.38.2"
+      }
+    },
+    "node_modules/@lexical/extension/node_modules/@lexical/table": {
+      "version": "0.38.2",
+      "resolved": "https://registry.npmjs.org/@lexical/table/-/table-0.38.2.tgz",
+      "integrity": "sha512-uu0i7yz0nbClmHOO5ZFsinRJE6vQnFz2YPblYHAlNigiBedhqMwSv5bedrzDq8nTTHwych3mC63tcyKIrM+I1g==",
+      "license": "MIT",
+      "dependencies": {
+        "@lexical/clipboard": "0.38.2",
+        "@lexical/extension": "0.38.2",
+        "@lexical/utils": "0.38.2",
+        "lexical": "0.38.2"
+      }
+    },
+    "node_modules/@lexical/extension/node_modules/@lexical/utils": {
+      "version": "0.38.2",
+      "resolved": "https://registry.npmjs.org/@lexical/utils/-/utils-0.38.2.tgz",
+      "integrity": "sha512-y+3rw15r4oAWIEXicUdNjfk8018dbKl7dWHqGHVEtqzAYefnEYdfD2FJ5KOTXfeoYfxi8yOW7FvzS4NZDi8Bfw==",
+      "license": "MIT",
+      "dependencies": {
+        "@lexical/list": "0.38.2",
+        "@lexical/selection": "0.38.2",
+        "@lexical/table": "0.38.2",
+        "lexical": "0.38.2"
+      }
+    },
+    "node_modules/@lexical/extension/node_modules/lexical": {
+      "version": "0.38.2",
+      "resolved": "https://registry.npmjs.org/lexical/-/lexical-0.38.2.tgz",
+      "integrity": "sha512-JJmfsG3c4gwBHzUGffbV7ifMNkKAWMCnYE3xJl87gty7hjyV5f3xq7eqTjP5HFYvO4XpjJvvWO2/djHp5S10tw==",
+      "license": "MIT"
+    },
     "node_modules/@lexical/hashtag": {
       "version": "0.12.6",
       "resolved": "https://registry.npmjs.org/@lexical/hashtag/-/hashtag-0.12.6.tgz",
@@ -1288,6 +1377,15 @@
         "lexical": "0.12.6"
       }
     },
+    "node_modules/@lexical/html/node_modules/@lexical/selection": {
+      "version": "0.12.6",
+      "resolved": "https://registry.npmjs.org/@lexical/selection/-/selection-0.12.6.tgz",
+      "integrity": "sha512-HJBEazVwOe6duyHV6+vB/MS4kUBlCV05Cfcigdx8HlLLFQRWPqHrTpaxKz4jfb9ar0SlI2W1BUNbySAxMkC/HQ==",
+      "license": "MIT",
+      "peerDependencies": {
+        "lexical": "0.12.6"
+      }
+    },
     "node_modules/@lexical/link": {
       "version": "0.12.6",
       "resolved": "https://registry.npmjs.org/@lexical/link/-/link-0.12.6.tgz",
@@ -1341,33 +1439,43 @@
         "lexical": "0.12.6"
       }
     },
-    "node_modules/@lexical/offset": {
+    "node_modules/@lexical/markdown/node_modules/@lexical/rich-text": {
       "version": "0.12.6",
-      "resolved": "https://registry.npmjs.org/@lexical/offset/-/offset-0.12.6.tgz",
-      "integrity": "sha512-5NgIaWCvMuOQNf3SZSNn459QfsN7SmLl+Tu4ISqxyZRoMV5Sfojzion9MjCVmt1YSsIS4B29NYQvGQ/li1saOw==",
+      "resolved": "https://registry.npmjs.org/@lexical/rich-text/-/rich-text-0.12.6.tgz",
+      "integrity": "sha512-fRZHy2ug6Pq+pJK7trr9phTGaD2ba3If8o36dphOsl27MtUllpz68lcXL6mUonzJhAu4um1e9u7GFR3dLp+cVA==",
       "license": "MIT",
       "peerDependencies": {
+        "@lexical/clipboard": "0.12.6",
+        "@lexical/selection": "0.12.6",
+        "@lexical/utils": "0.12.6",
         "lexical": "0.12.6"
       }
     },
-    "node_modules/@lexical/overflow": {
+    "node_modules/@lexical/markdown/node_modules/@lexical/selection": {
       "version": "0.12.6",
-      "resolved": "https://registry.npmjs.org/@lexical/overflow/-/overflow-0.12.6.tgz",
-      "integrity": "sha512-4TZJhTGkn7xvR+rumSYW9U/OIsbith0kVGOvZZf+DM/t9fb0IVQWWSWmMlXJ5XNt/qXLFof3HFyJhK84dsN3NA==",
+      "resolved": "https://registry.npmjs.org/@lexical/selection/-/selection-0.12.6.tgz",
+      "integrity": "sha512-HJBEazVwOe6duyHV6+vB/MS4kUBlCV05Cfcigdx8HlLLFQRWPqHrTpaxKz4jfb9ar0SlI2W1BUNbySAxMkC/HQ==",
       "license": "MIT",
+      "peer": true,
       "peerDependencies": {
         "lexical": "0.12.6"
       }
     },
-    "node_modules/@lexical/plain-text": {
+    "node_modules/@lexical/offset": {
       "version": "0.12.6",
-      "resolved": "https://registry.npmjs.org/@lexical/plain-text/-/plain-text-0.12.6.tgz",
-      "integrity": "sha512-YF+EaWGQIxR1SHgeSuPrrqqSK8RYDxGv9RYyuIPvWXpt3M9NWw7hyAn7zxmXGgv2BhIicyHGPy5CyQgt3Mkb/w==",
+      "resolved": "https://registry.npmjs.org/@lexical/offset/-/offset-0.12.6.tgz",
+      "integrity": "sha512-5NgIaWCvMuOQNf3SZSNn459QfsN7SmLl+Tu4ISqxyZRoMV5Sfojzion9MjCVmt1YSsIS4B29NYQvGQ/li1saOw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "lexical": "0.12.6"
+      }
+    },
+    "node_modules/@lexical/overflow": {
+      "version": "0.12.6",
+      "resolved": "https://registry.npmjs.org/@lexical/overflow/-/overflow-0.12.6.tgz",
+      "integrity": "sha512-4TZJhTGkn7xvR+rumSYW9U/OIsbith0kVGOvZZf+DM/t9fb0IVQWWSWmMlXJ5XNt/qXLFof3HFyJhK84dsN3NA==",
       "license": "MIT",
       "peerDependencies": {
-        "@lexical/clipboard": "0.12.6",
-        "@lexical/selection": "0.12.6",
-        "@lexical/utils": "0.12.6",
         "lexical": "0.12.6"
       }
     },
@@ -1402,7 +1510,19 @@
         "react-dom": ">=17.x"
       }
     },
-    "node_modules/@lexical/rich-text": {
+    "node_modules/@lexical/react/node_modules/@lexical/plain-text": {
+      "version": "0.12.6",
+      "resolved": "https://registry.npmjs.org/@lexical/plain-text/-/plain-text-0.12.6.tgz",
+      "integrity": "sha512-YF+EaWGQIxR1SHgeSuPrrqqSK8RYDxGv9RYyuIPvWXpt3M9NWw7hyAn7zxmXGgv2BhIicyHGPy5CyQgt3Mkb/w==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@lexical/clipboard": "0.12.6",
+        "@lexical/selection": "0.12.6",
+        "@lexical/utils": "0.12.6",
+        "lexical": "0.12.6"
+      }
+    },
+    "node_modules/@lexical/react/node_modules/@lexical/rich-text": {
       "version": "0.12.6",
       "resolved": "https://registry.npmjs.org/@lexical/rich-text/-/rich-text-0.12.6.tgz",
       "integrity": "sha512-fRZHy2ug6Pq+pJK7trr9phTGaD2ba3If8o36dphOsl27MtUllpz68lcXL6mUonzJhAu4um1e9u7GFR3dLp+cVA==",
@@ -1414,7 +1534,7 @@
         "lexical": "0.12.6"
       }
     },
-    "node_modules/@lexical/selection": {
+    "node_modules/@lexical/react/node_modules/@lexical/selection": {
       "version": "0.12.6",
       "resolved": "https://registry.npmjs.org/@lexical/selection/-/selection-0.12.6.tgz",
       "integrity": "sha512-HJBEazVwOe6duyHV6+vB/MS4kUBlCV05Cfcigdx8HlLLFQRWPqHrTpaxKz4jfb9ar0SlI2W1BUNbySAxMkC/HQ==",
@@ -1423,6 +1543,110 @@
         "lexical": "0.12.6"
       }
     },
+    "node_modules/@lexical/rich-text": {
+      "version": "0.38.2",
+      "resolved": "https://registry.npmjs.org/@lexical/rich-text/-/rich-text-0.38.2.tgz",
+      "integrity": "sha512-eFjeOT7YnDZYpty7Zlwlct0UxUSaYu53uLYG+Prs3NoKzsfEK7e7nYsy/BbQFfk5HoM1pYuYxFR2iIX62+YHGw==",
+      "license": "MIT",
+      "dependencies": {
+        "@lexical/clipboard": "0.38.2",
+        "@lexical/dragon": "0.38.2",
+        "@lexical/selection": "0.38.2",
+        "@lexical/utils": "0.38.2",
+        "lexical": "0.38.2"
+      }
+    },
+    "node_modules/@lexical/rich-text/node_modules/@lexical/clipboard": {
+      "version": "0.38.2",
+      "resolved": "https://registry.npmjs.org/@lexical/clipboard/-/clipboard-0.38.2.tgz",
+      "integrity": "sha512-dDShUplCu8/o6BB9ousr3uFZ9bltR+HtleF/Tl8FXFNPpZ4AXhbLKUoJuucRuIr+zqT7RxEv/3M6pk/HEoE6NQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@lexical/html": "0.38.2",
+        "@lexical/list": "0.38.2",
+        "@lexical/selection": "0.38.2",
+        "@lexical/utils": "0.38.2",
+        "lexical": "0.38.2"
+      }
+    },
+    "node_modules/@lexical/rich-text/node_modules/@lexical/dragon": {
+      "version": "0.38.2",
+      "resolved": "https://registry.npmjs.org/@lexical/dragon/-/dragon-0.38.2.tgz",
+      "integrity": "sha512-riOhgo+l4oN50RnLGhcqeUokVlMZRc+NDrxRNs2lyKSUdC4vAhAmAVUHDqYPyb4K4ZSw4ebZ3j8hI2zO4O3BbA==",
+      "license": "MIT",
+      "dependencies": {
+        "@lexical/extension": "0.38.2",
+        "lexical": "0.38.2"
+      }
+    },
+    "node_modules/@lexical/rich-text/node_modules/@lexical/html": {
+      "version": "0.38.2",
+      "resolved": "https://registry.npmjs.org/@lexical/html/-/html-0.38.2.tgz",
+      "integrity": "sha512-pC5AV+07bmHistRwgG3NJzBMlIzSdxYO6rJU4eBNzyR4becdiLsI4iuv+aY7PhfSv+SCs7QJ9oc4i5caq48Pkg==",
+      "license": "MIT",
+      "dependencies": {
+        "@lexical/selection": "0.38.2",
+        "@lexical/utils": "0.38.2",
+        "lexical": "0.38.2"
+      }
+    },
+    "node_modules/@lexical/rich-text/node_modules/@lexical/list": {
+      "version": "0.38.2",
+      "resolved": "https://registry.npmjs.org/@lexical/list/-/list-0.38.2.tgz",
+      "integrity": "sha512-OQm9TzatlMrDZGxMxbozZEHzMJhKxAbH1TOnOGyFfzpfjbnFK2y8oLeVsfQZfZRmiqQS4Qc/rpFnRP2Ax5dsbA==",
+      "license": "MIT",
+      "dependencies": {
+        "@lexical/extension": "0.38.2",
+        "@lexical/selection": "0.38.2",
+        "@lexical/utils": "0.38.2",
+        "lexical": "0.38.2"
+      }
+    },
+    "node_modules/@lexical/rich-text/node_modules/@lexical/table": {
+      "version": "0.38.2",
+      "resolved": "https://registry.npmjs.org/@lexical/table/-/table-0.38.2.tgz",
+      "integrity": "sha512-uu0i7yz0nbClmHOO5ZFsinRJE6vQnFz2YPblYHAlNigiBedhqMwSv5bedrzDq8nTTHwych3mC63tcyKIrM+I1g==",
+      "license": "MIT",
+      "dependencies": {
+        "@lexical/clipboard": "0.38.2",
+        "@lexical/extension": "0.38.2",
+        "@lexical/utils": "0.38.2",
+        "lexical": "0.38.2"
+      }
+    },
+    "node_modules/@lexical/rich-text/node_modules/@lexical/utils": {
+      "version": "0.38.2",
+      "resolved": "https://registry.npmjs.org/@lexical/utils/-/utils-0.38.2.tgz",
+      "integrity": "sha512-y+3rw15r4oAWIEXicUdNjfk8018dbKl7dWHqGHVEtqzAYefnEYdfD2FJ5KOTXfeoYfxi8yOW7FvzS4NZDi8Bfw==",
+      "license": "MIT",
+      "dependencies": {
+        "@lexical/list": "0.38.2",
+        "@lexical/selection": "0.38.2",
+        "@lexical/table": "0.38.2",
+        "lexical": "0.38.2"
+      }
+    },
+    "node_modules/@lexical/rich-text/node_modules/lexical": {
+      "version": "0.38.2",
+      "resolved": "https://registry.npmjs.org/lexical/-/lexical-0.38.2.tgz",
+      "integrity": "sha512-JJmfsG3c4gwBHzUGffbV7ifMNkKAWMCnYE3xJl87gty7hjyV5f3xq7eqTjP5HFYvO4XpjJvvWO2/djHp5S10tw==",
+      "license": "MIT"
+    },
+    "node_modules/@lexical/selection": {
+      "version": "0.38.2",
+      "resolved": "https://registry.npmjs.org/@lexical/selection/-/selection-0.38.2.tgz",
+      "integrity": "sha512-eMFiWlBH6bEX9U9sMJ6PXPxVXTrihQfFeiIlWLuTpEIDF2HRz7Uo1KFRC/yN6q0DQaj7d9NZYA6Mei5DoQuz5w==",
+      "license": "MIT",
+      "dependencies": {
+        "lexical": "0.38.2"
+      }
+    },
+    "node_modules/@lexical/selection/node_modules/lexical": {
+      "version": "0.38.2",
+      "resolved": "https://registry.npmjs.org/lexical/-/lexical-0.38.2.tgz",
+      "integrity": "sha512-JJmfsG3c4gwBHzUGffbV7ifMNkKAWMCnYE3xJl87gty7hjyV5f3xq7eqTjP5HFYvO4XpjJvvWO2/djHp5S10tw==",
+      "license": "MIT"
+    },
     "node_modules/@lexical/table": {
       "version": "0.12.6",
       "resolved": "https://registry.npmjs.org/@lexical/table/-/table-0.12.6.tgz",
@@ -1458,6 +1682,15 @@
         "lexical": "0.12.6"
       }
     },
+    "node_modules/@lexical/utils/node_modules/@lexical/selection": {
+      "version": "0.12.6",
+      "resolved": "https://registry.npmjs.org/@lexical/selection/-/selection-0.12.6.tgz",
+      "integrity": "sha512-HJBEazVwOe6duyHV6+vB/MS4kUBlCV05Cfcigdx8HlLLFQRWPqHrTpaxKz4jfb9ar0SlI2W1BUNbySAxMkC/HQ==",
+      "license": "MIT",
+      "peerDependencies": {
+        "lexical": "0.12.6"
+      }
+    },
     "node_modules/@lexical/yjs": {
       "version": "0.12.6",
       "resolved": "https://registry.npmjs.org/@lexical/yjs/-/yjs-0.12.6.tgz",
@@ -1568,6 +1801,16 @@
         "node": ">= 8"
       }
     },
+    "node_modules/@preact/signals-core": {
+      "version": "1.12.1",
+      "resolved": "https://registry.npmjs.org/@preact/signals-core/-/signals-core-1.12.1.tgz",
+      "integrity": "sha512-BwbTXpj+9QutoZLQvbttRg5x3l5468qaV2kufh+51yha1c53ep5dY4kTuZR35+3pAZxpfQerGJiQqg34ZNZ6uA==",
+      "license": "MIT",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/preact"
+      }
+    },
     "node_modules/@remix-run/router": {
       "version": "1.23.0",
       "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.23.0.tgz",
diff --git a/package.json b/package.json
index bddd61758..3f977d74f 100644
--- a/package.json
+++ b/package.json
@@ -5,7 +5,7 @@
   "type": "module",
   "scripts": {
     "dev": "vite",
-    "build": "vite build",
+    "build": "NODE_OPTIONS='--max-old-space-size=8192' vite build",
     "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
     "preview": "vite preview"
   },
@@ -15,7 +15,10 @@
     "@dnd-kit/sortable": "^10.0.0",
     "@dnd-kit/utilities": "^3.2.2",
     "@douyinfe/semi-ui": "^2.77.1",
-    "@lexical/react": "^0.12.5",
+    "@lexical/react": "^0.12.6",
+    "@lexical/rich-text": "^0.38.2",
+    "@lexical/selection": "^0.38.2",
+    "@lexical/utils": "^0.12.6",
     "@monaco-editor/react": "^4.7.0",
     "@vercel/analytics": "^1.2.2",
     "@vercel/speed-insights": "^1.2.0",
@@ -31,7 +34,7 @@
     "jsonschema": "^1.4.1",
     "jspdf": "^3.0.2",
     "jszip": "^3.10.1",
-    "lexical": "^0.12.5",
+    "lexical": "^0.12.6",
     "lodash": "^4.17.21",
     "luxon": "^3.7.1",
     "nanoid": "^5.1.5",
diff --git a/vite.config.js b/vite.config.js
index 5a33944a9..8e26efea3 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -1,7 +1,57 @@
-import { defineConfig } from 'vite'
-import react from '@vitejs/plugin-react'
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
 
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [react()],
-})
+  build: {
+    // Disable source maps to reduce memory usage
+    sourcemap: false,
+    // Use esbuild for minification (lighter than Terser)
+    minify: 'esbuild',
+    // Reduce chunk size to avoid memory issues
+    chunkSizeWarningLimit: 1000,
+    // Reduce parallel operations to minimize memory usage
+    target: 'es2015',
+    rollupOptions: {
+      output: {
+        // Limit the number of chunks to reduce memory usage
+        manualChunks: {
+          // Split large vendor dependencies into separate chunks
+          'react-vendor': ['react', 'react-dom', 'react-router-dom'],
+          'ui-vendor': ['@douyinfe/semi-ui', 'framer-motion'],
+          'editor-vendor': ['lexical', '@monaco-editor/react'],
+          'lexical-vendor': [
+            '@lexical/react/LexicalComposer', 
+            '@lexical/react/LexicalComposerContext',
+            '@lexical/html',
+            '@lexical/rich-text',
+            '@lexical/utils',
+            '@lexical/selection'
+          ],
+          'utils-vendor': ['lodash', 'axios', 'nanoid', 'dexie', 'jszip', 'jspdf']
+        },
+      },
+    },
+  },
+  // Optimize dependencies to reduce processing time
+  optimizeDeps: {
+    include: [
+      'react', 
+      'react-dom', 
+      'react-router-dom',
+      'lexical',
+      '@lexical/react/LexicalComposer',
+      '@lexical/react/LexicalComposerContext',
+      '@lexical/html',
+      '@lexical/rich-text',
+      '@lexical/utils',
+      '@lexical/selection'
+    ],
+    esbuildOptions: {
+      // Fix for ESM/CJS interop issues
+      preserveSymlinks: true,
+    },
+  },
+});
+

From c5f6b5f1bf50c581f8aac781029a628b361a2ad7 Mon Sep 17 00:00:00 2001
From: CodeMaverick143 <arpit.01.sarang.2005@gmail.com>
Date: Wed, 5 Nov 2025 03:13:57 +0530
Subject: [PATCH 3/3] Fix: Remove unused theme variable in Navbar.jsx

---
 src/components/Navbar.jsx | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/src/components/Navbar.jsx b/src/components/Navbar.jsx
index 363e88890..dd7d421ef 100644
--- a/src/components/Navbar.jsx
+++ b/src/components/Navbar.jsx
@@ -5,12 +5,9 @@ import { SideSheet } from "@douyinfe/semi-ui";
 import { IconMenu } from "@douyinfe/semi-icons";
 import { socials } from "../data/socials";
 import ThemeToggle from "./ThemeToggle";
-import { useTheme } from "../context/ThemeContext";
 
 export default function Navbar() {
   const [openMenu, setOpenMenu] = useState(false);
-  const { theme } = useTheme();
-
   return (
     <>
       <div className="py-4 px-12 sm:px-4 flex justify-between items-center dark:bg-gray-800">