From fc3cbe6bf74b0e9a712c32a664d3fd0717b41f3a Mon Sep 17 00:00:00 2001
From: Yogye Berry <yogyeberry@gmail.com>
Date: Sun, 8 Feb 2026 18:44:26 +0530
Subject: [PATCH] added dark mode on landing page

---
 src/components/Navbar.jsx | 45 +++++++++++++++++-----
 src/index.css             |  5 +++
 src/pages/LandingPage.jsx | 78 +++++++++++++++++++++------------------
 tailwind.config.js        | 13 ++++---
 4 files changed, 90 insertions(+), 51 deletions(-)

diff --git a/src/components/Navbar.jsx b/src/components/Navbar.jsx
index 8ef775d07..f04589c40 100644
--- a/src/components/Navbar.jsx
+++ b/src/components/Navbar.jsx
@@ -4,20 +4,29 @@ 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 useSettings from "../hooks/useSettings";
 
 export default function Navbar() {
   const [openMenu, setOpenMenu] = useState(false);
+  const { settings, setSettings } = useSettings();
+
+  const toggleTheme = () => {
+    setSettings({
+      ...settings,
+      mode: settings.mode === "light" ? "dark" : "light",
+    });
+  };
 
   return (
     <>
       <div className="py-4 px-12 sm:px-4 flex justify-between items-center">
         <div className="flex items-center justify-between w-full">
           <Link to="/">
-            <img src={logo} alt="logo" className="h-[48px] sm:h-[32px]" />
+            <img src={logo} alt="logo" className="h-[48px] sm:h-[32px] dark:invert transition-all duration-300" />
           </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:hover:text-sky-400 transition-colors duration-300"
               onClick={() =>
                 document
                   .getElementById("features")
@@ -28,19 +37,19 @@ 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: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: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:hover:text-sky-400 transition-colors duration-300"
             >
               Docs
             </Link>
@@ -73,6 +82,13 @@ export default function Navbar() {
             >
               <i className="opacity-70 bi bi-discord" />
             </a>
+            <button
+              title={`Switch to ${settings.mode === "light" ? "dark" : "light"} mode`}
+              className="px-2 py-2 hover:opacity-60 transition-all duration-300 rounded-full text-2xl"
+              onClick={toggleTheme}
+            >
+              <i className={`opacity-70 bi bi-${settings.mode === "light" ? "moon-stars-fill" : "sun-fill"}`} />
+            </button>
           </div>
         </div>
         <button
@@ -92,7 +108,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-zinc-800 block p-3 text-base font-semibold"
           onClick={() => {
             document
               .getElementById("features")
@@ -105,24 +121,35 @@ 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-zinc-800 block p-3 text-base font-semibold"
         >
           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-zinc-800 block p-3 text-base font-semibold"
         >
           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-zinc-800 block p-3 text-base font-semibold"
         >
           Docs
         </Link>
+        <hr />
+        <button
+          onClick={() => {
+            toggleTheme();
+            setOpenMenu(false);
+          }}
+          className="hover:bg-zinc-100 dark:hover:bg-zinc-800 block p-3 text-base font-semibold w-full text-left"
+        >
+          <i className={`bi bi-${settings.mode === "light" ? "moon-stars-fill" : "sun-fill"} me-2`} />
+          {settings.mode === "light" ? "Dark" : "Light"} Mode
+        </button>
       </SideSheet>
     </>
   );
diff --git a/src/index.css b/src/index.css
index 44dabcd02..ac7b12ab7 100644
--- a/src/index.css
+++ b/src/index.css
@@ -162,6 +162,11 @@
   background-size: 20px 20px;
 }
 
+[theme-mode="dark"] .bg-dots {
+  background-color: transparent;
+  background-image: radial-gradient(rgba(255, 255, 255, 0.2) 1px, transparent 1px);
+}
+
 .sliding-vertical span {
   animation: top-to-bottom 9s linear infinite 0s;
   -ms-animation: top-to-bottom 9s linear infinite 0s;
diff --git a/src/pages/LandingPage.jsx b/src/pages/LandingPage.jsx
index 4fe62f07c..5d01bc597 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 useSettings from "../hooks/useSettings";
 
 function shortenNumber(number) {
   if (number < 1000) return number;
@@ -28,6 +29,7 @@ function shortenNumber(number) {
 
 export default function LandingPage() {
   const [stats, setStats] = useState({ stars: 18000, forks: 1200 });
+  const { settings } = useSettings();
 
   useEffect(() => {
     const fetchStats = async () => {
@@ -36,7 +38,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";
 
@@ -45,7 +46,7 @@ export default function LandingPage() {
 
   return (
     <div>
-      <div className="flex flex-col h-screen bg-zinc-100">
+      <div className="flex flex-col h-screen bg-zinc-100 dark:bg-zinc-950 dark:text-zinc-100 transition-colors duration-300">
         <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]" />
 
         <FadeIn duration={0.6}>
@@ -53,12 +54,12 @@ export default function LandingPage() {
         </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-zinc-900 transition-colors duration-300">
           <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="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-zinc-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">
@@ -67,13 +68,13 @@ export default function LandingPage() {
                 <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-zinc-300 bg-white dark:bg-zinc-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-zinc-300 bg-white dark:bg-zinc-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-zinc-300 bg-white dark:bg-zinc-800 font-bold whitespace-nowrap">
                     Quick and easy
                   </span>
                 </div>
@@ -81,7 +82,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 cursor-pointer"
+                className="py-3 mb-4 xl:mb-0 mr-4 transition-all duration-300 bg-white dark:bg-zinc-800 border dark:border-zinc-700 rounded-full shadow-lg px-9 border-zinc-200 hover:bg-zinc-100 dark:hover:bg-zinc-700 cursor-pointer"
                 onClick={() =>
                   document
                     .getElementById("learn-more")
@@ -92,7 +93,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 ps-7 pe-6 hover:bg-sky-800 dark:bg-sky-700 dark:hover:bg-sky-600"
               >
                 Try it for yourself <i className="bi bi-arrow-right ms-1"></i>
               </Link>
@@ -103,10 +104,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-zinc-950 transition-colors duration-300 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>
@@ -114,6 +115,7 @@ export default function LandingPage() {
                 href="https://warp.dev/drawdb"
                 target="_blank"
                 rel="noreferrer"
+                className="inline-block bg-white rounded-xl p-8 hover:scale-105 transition-transform duration-300 shadow-md text-zinc-800"
               >
                 <img
                   src={warp}
@@ -127,7 +129,7 @@ export default function LandingPage() {
               </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-zinc-900 dark:border-zinc-800 transition-colors duration-300 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.
@@ -136,41 +138,45 @@ export default function LandingPage() {
           </div>
           <div className="flex justify-center items-center gap-28 md:block">
             <div className="text-center mb-4">
-              <div className="text-5xl md:text-3xl font-bold text-sky-800">
+              <div className="text-5xl md:text-3xl font-bold text-sky-800 dark:text-sky-400">
                 {shortenNumber(stats.stars)}
               </div>
-              <div className="ms-1 mt-1 font-medium tracking-wide">
+              <div className="ms-1 mt-1 font-medium tracking-wide text-sky-800 dark:text-sky-400">
                 GitHub stars
               </div>
             </div>
             <div className="text-center mb-4">
-              <div className="text-5xl md:text-3xl font-bold text-sky-800">
+              <div className="text-5xl md:text-3xl font-bold text-sky-800 dark:text-sky-400">
                 {shortenNumber(stats.forks)}
               </div>
-              <div className="ms-1 mt-1 font-medium tracking-wide">
+              <div className="ms-1 mt-1 font-medium tracking-wide text-sky-800 dark:text-sky-400">
                 GitHub forks
               </div>
             </div>
             <div className="text-center mb-4">
-              <div className="text-5xl md:text-3xl font-bold text-sky-800">
+              <div className="text-5xl md:text-3xl font-bold text-sky-800 dark:text-sky-400">
                 {shortenNumber(languages.length)}
               </div>
-              <div className="ms-1 mt-1 font-medium tracking-wide">
+              <div className="ms-1 mt-1 font-medium tracking-wide text-sky-800 dark:text-sky-400">
                 Languages
               </div>
             </div>
           </div>
-          <div className="text-lg font-medium text-center mt-12 mb-6">
+          <div className="text-lg font-bold text-center mt-12 mb-6 text-sky-800 dark:text-sky-400">
             Design for your database
           </div>
-          <div className="grid grid-cols-3 place-items-center sm:grid-cols-1 sm:gap-10">
+          <div className="grid grid-cols-3 place-items-center gap-8 sm:grid-cols-1 sm:gap-10">
             {dbs.map((s, i) => (
-              <img
+              <div
                 key={"icon-" + i}
-                src={s.icon}
-                style={{ height: s.height }}
-                className="opacity-70 hover:opacity-100 transition-opacity duration-300 md:scale-[0.7] md:mx-auto"
-              />
+                className="bg-white rounded-xl p-8 hover:scale-105 transition-transform duration-300 shadow-md flex items-center justify-center w-full h-full"
+              >
+                <img
+                  src={s.icon}
+                  style={{ height: s.height }}
+                  className="md:scale-[0.7]"
+                />
+              </div>
             ))}
           </div>
         </div>
@@ -183,27 +189,27 @@ export default function LandingPage() {
         >
           <path
             d="M0 54C0 54 320 0 720 0C1080 0 1440 54 1440 54V0H0V100Z"
-            fill="#f4f4f5"
+            className="fill-zinc-100 dark:fill-zinc-950 transition-colors duration-300"
           />
         </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 bg-zinc-100 dark:bg-zinc-950 transition-colors duration-300">
         <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 text-zinc-800 dark:text-zinc-100">
             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"
+                className="flex rounded-xl hover:bg-zinc-100 dark:hover:bg-zinc-900 border border-zinc-100 dark:border-zinc-800 shadow-xs hover:-translate-y-2 transition-all duration-300 text-zinc-800 dark:text-zinc-100"
               >
-                <div className="bg-sky-700 px-0.5 rounded-l-xl" />
+                <div className="bg-sky-700 dark:bg-sky-600 px-0.5 rounded-l-xl" />
                 <div className="px-8 py-4 ">
                   <div className="text-lg font-semibold mb-3">{f.title}</div>
                   {f.content}
@@ -216,12 +222,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 pb-6 md:px-8 bg-zinc-100 dark:bg-zinc-950 transition-colors duration-300">
+        <div className="text-center text-2xl md:text-xl font-medium text-zinc-800 dark:text-zinc-100 mb-6">
           What the internet says about us
         </div>
         <div
-          data-theme="light"
+          data-theme={settings.mode}
           className="grid grid-cols-2 place-items-center md:grid-cols-1"
         >
           <Tweet id="1816111365125218343" />
@@ -241,10 +247,10 @@ export default function LandingPage() {
       >
         <path
           d="M0 48 C0 48 320 0 720 0C1080 0 1440 48 1440 48V0H0V100Z"
-          fill="#f4f4f5"
+          className="fill-zinc-100 dark:fill-zinc-950 transition-colors duration-300"
         />
       </svg>
-      <div className="bg-zinc-100 py-8 px-32 md:px-8">
+      <div className="bg-zinc-100 dark:bg-zinc-950 transition-colors duration-300 py-8 px-32 md:px-8">
         <div className="mt-4 mb-2 text-2xl font-bold text-center">
           Reach out to us
         </div>
diff --git a/tailwind.config.js b/tailwind.config.js
index 619a0f9f6..82cae1834 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -3,14 +3,15 @@ export default {
   content: [
     "./src/**/*.{js,jsx,ts,tsx}",
   ],
+  darkMode: ['selector', '[theme-mode="dark"]'],
   theme: {
     screens: {
-      '3xl': {'max': '2047px'},
-      '2xl': {'max': '1535px'},
-      'xl': {'min': '1024px'},
-      'lg': {'max': '1023px'},
-      'md': {'max': '820px'},
-      'sm': {'max': '639px'}
+      '3xl': { 'max': '2047px' },
+      '2xl': { 'max': '1535px' },
+      'xl': { 'min': '1024px' },
+      'lg': { 'max': '1023px' },
+      'md': { 'max': '820px' },
+      'sm': { 'max': '639px' }
     },
     extend: {}
   },