Added Dark Mode Toggle

src/Components/DomainDetails/Card/Card.css

@@ -4,7 +4,9 @@
   align-items: flex-start;
   padding: 1rem;
   gap: 0.93rem;
-  background: #ffffff;
+  background: var(--card);
+  color: var(--text);
+  border: 1px solid var(--elev);
   box-shadow: 8px 8px 28px rgb(0 0 0 / 12%);
   border-radius: 0.8rem;
   max-width: 20rem;
@@ -27,15 +29,15 @@
 
 .topic-card h2 {
   font-weight: 500;
-  color: rgb(48, 46, 46);
+  color: var(--text);           /* was rgb(48,46,46) */
   font-size: 1.875rem;
   line-height: 1.3;
 }
 
 .topic-card p {
   font-weight: 300;
   font-size: 1rem;
-  color: rgb(66, 64, 64);
+  color: var(--muted);          /* was rgb(66,64,64) */
   line-height: 1.3;
   max-width: 100%;
   text-overflow: ellipsis;
@@ -46,17 +48,18 @@
 }
 
 .topic-card a {
-  color: rgb(66, 64, 64);
+  color: var(--link);           /* was rgb(66,64,64) */
   display: flex;
   align-items: center;
   gap: 0.625rem;
   position: relative;
   cursor: pointer;
+  text-decoration: none;
 }
 
 .link-text {
-  color: black;
-  font-weight: light;
+  color: var(--link);           /* was black */
+  font-weight: 300;             /* “light” isn’t a valid value; 300 ≈ light */
   font-size: 1rem;
   line-height: 1.3;
 }
@@ -65,7 +68,9 @@
   margin-left: 0.5rem;
 }
 
-.link-text:hover {
+.link-text:hover,
+.topic-card a:hover {
+  color: var(--text);           /* subtle hover that works in both themes */
   cursor: pointer;
 }
 
@@ -74,3 +79,8 @@
     margin: 1rem;
   }
 }
+
+/* Optional: soften shadow in dark mode so it doesn’t look too heavy */
+:root[data-theme="dark"] .topic-card {
+  box-shadow: 4px 4px 18px rgb(0 0 0 / 25%);
+}

src/Components/DomainDetails/ReadMore/ReadMore.css

@@ -44,7 +44,9 @@ a p.link {
   left: 50%;
   transform: translate(-50%, -50%);
   line-height: 1.4;
-  background: #f1f1f1;
+  background: var(--card);
+  color: var(--text);
+  border: 1px solid var(--elev);  /* remove if you don’t want a border */
   padding: 14px 28px;
   border-radius: 3px;
   width: 350px;

src/Components/Landing/Card/Card.module.css

@@ -8,7 +8,9 @@
   width: 310px;
   height: 475px;
 
-  background: #ffffff;
+  background: var(--card);
+  color: var(--text);
+  border: 1px solid var(--elev);
   box-shadow: 8px 8px 28px rgba(0, 0, 0, 0.12);
   border-radius: 17px;
   margin: 1rem 0;

src/Components/Navbar/Navbar.css

@@ -29,7 +29,7 @@ nav a {
   font-family: "Poppins";
   font-weight: 500;
   font-size: 1.1rem;
-  color: black;
+  color: var(--text);
   text-decoration: none;
 }
 
@@ -103,8 +103,11 @@ nav a:hover {
   }
 }
 
-@media only screen and (max-width: 500px) {
-  nav {
-    width: 60%;
-  }
+.header a {
+  color: var(--text);
+  text-decoration: none;
+}
+
+.header a:hover {
+  color: var(--link);
 }

src/Components/Navbar/Navbar.jsx

@@ -2,11 +2,13 @@ import React, { useRef } from "react";
 import "./Navbar.css";
 import { Link, useParams, useLocation } from "react-router-dom";
 import { FaBars, FaTimes } from "react-icons/fa";
+import ThemeToggle from "../ThemeToggle";
 
 function Navbar() {
   const { id } = useParams();
   const location = useLocation();
   const navRef = useRef();
+  const isHome = location.pathname === "/";
 
   const showNavBar = () => {
     navRef.current.classList.toggle("nav_popout");
@@ -17,47 +19,41 @@ function Navbar() {
   return (
     <header className="header">
       <Link to="/">
-        <img
-          src="/assets/tm-logo.png"
-          className="Navbar_image"
-          alt="logo"
-        ></img>
+        <img src="/assets/tm-logo.png" className="Navbar_image" alt="logo" />
       </Link>
+
+      {/* keep nav for other links (mobile, tools, blogs, etc.) */}
       <nav ref={navRef} id="ll">
-        {location.pathname === "/" ? (
+        {isHome ? (
           <>
-            <a href="#cards" onClick={showNavBar}>
-              Domains
-            </a>
+            {/* Removed Domains from here */}
             <button className="nav-btn nav-close-btn">
               <FaTimes onClick={showNavBar} />
             </button>
           </>
         ) : (
           <>
-            <a href="#topics" onClick={showNavBar}>
-              Tools
-            </a>
+            <a href="#topics" onClick={showNavBar}>Tools</a>
             {id === "ai" ? (
-              <a href="#categories" onClick={showNavBar}>
-                Categories
-              </a>
+              <a href="#categories" onClick={showNavBar}>Categories</a>
             ) : null}
-            <a href="#blogs" onClick={showNavBar}>
-              Blogs
-            </a>
-            <a href="#people" onClick={showNavBar}>
-              People
-            </a>
+            <a href="#blogs" onClick={showNavBar}>Blogs</a>
+            <a href="#people" onClick={showNavBar}>People</a>
             <button className="nav-btn nav-close-btn">
               <FaTimes onClick={showNavBar} />
             </button>
           </>
         )}
       </nav>
-      <button className="nav-btn">
-        <FaBars onClick={showNavBar} />
-      </button>
+
+      {/* Right side: Domains (plain text link), toggle, hamburger */}
+      <div style={{ display: "flex", alignItems: "center", gap: "12px" }}>
+        {isHome && <a href="#cards">Domains</a>}
+        <ThemeToggle />
+        <button className="nav-btn">
+          <FaBars onClick={showNavBar} />
+        </button>
+      </div>
     </header>
   );
 }

src/Components/ThemeToggle.jsx

@@ -0,0 +1,51 @@
+import { useEffect, useState } from "react";
+
+export default function ThemeToggle() {
+  const getPreferred = () =>
+    localStorage.getItem("theme") ||
+    (window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light");
+
+  const [theme, setTheme] = useState(getPreferred);
+
+  useEffect(() => {
+    const root = document.documentElement;
+    root.setAttribute("data-theme", theme);
+    localStorage.setItem("theme", theme);
+  }, [theme]);
+
+  const toggle = () => setTheme(t => (t === "dark" ? "light" : "dark"));
+
+  return (
+    <button
+      className="theme-toggle"
+      aria-label="Toggle dark mode"
+      role="switch"
+      aria-checked={theme === "dark"}
+      onClick={toggle}
+      title={theme === "dark" ? "Switch to light mode" : "Switch to dark mode"}
+    >
+      {/* Sun icon (light mode) */}
+      <span className="icon sun" aria-hidden>
+        <svg viewBox="0 0 24 24" width="16" height="16">
+          <circle cx="12" cy="12" r="4" />
+          <g>
+            <line x1="12" y1="1.5" x2="12" y2="4.5" />
+            <line x1="12" y1="19.5" x2="12" y2="22.5" />
+            <line x1="1.5" y1="12" x2="4.5" y2="12" />
+            <line x1="19.5" y1="12" x2="22.5" y2="12" />
+            <line x1="4.22" y1="4.22" x2="6.34" y2="6.34" />
+            <line x1="17.66" y1="17.66" x2="19.78" y2="19.78" />
+            <line x1="4.22" y1="19.78" x2="6.34" y2="17.66" />
+            <line x1="17.66" y1="6.34" x2="19.78" y2="4.22" />
+          </g>
+        </svg>
+      </span>
+      {/* Moon icon (dark mode) */}
+      <span className="icon moon" aria-hidden>
+        <svg viewBox="0 0 24 24" width="16" height="16">
+          <path d="M21 12.79A9 9 0 1 1 11.21 3a7 7 0 1 0 9.79 9.79Z" />
+        </svg>
+      </span>
+    </button>
+  );
+}

src/Pages/DomainDetails/DomainDetails.module.css

@@ -29,7 +29,7 @@ h1 {
 
 .search {
   align-items: center;
-  border: 1px solid #000000;
+  border: 1px solid var(--elev);
   border-radius: 3.125rem;
   display: flex;
   flex-direction: row;
@@ -111,10 +111,10 @@ h1 {
   padding: 16px 32px;
   gap: 4px;
 
-  background: #000000;
+  background: var(--bg);
   border-radius: 84.5px;
   margin-right: 1rem;
-  color: white;
+  color: var(--text);
   font-size: 1rem;
   transition: 0.2s ease-in-out all;
 }
@@ -129,7 +129,7 @@ h1 {
   /* identical to box height, or 160% */
 
   margin-right: 1rem;
-  color: #000000;
+  color: var(--text);
 
   cursor: pointer;
 }

src/Pages/Landing/Landing.module.css

@@ -15,8 +15,9 @@
 
   width: 200px;
 
-  background: #000000;
-  color: white;
+  /* Primary button adapts to theme */
+  background: var(--text);
+  color: var(--bg);
   border-radius: 84.5px;
   border: none;
 
@@ -29,7 +30,8 @@
   transition: 0.3s;
 }
 .get_started:hover {
-  background: rgb(42, 42, 42);
+  /* subtle hover without hardcoded colors */
+  filter: brightness(0.9);
   transform: translateY(-5px);
 }
 
@@ -60,6 +62,7 @@
   text-align: center;
   max-width: 85%;
   margin: auto;
+  color: var(--text);
 }
 
 .cw_text {
@@ -69,6 +72,7 @@
   letter-spacing: 0em;
   text-align: center;
   margin-bottom: 1rem;
+  color: var(--text);
 }
 
 .cw_text {
@@ -78,6 +82,7 @@
   letter-spacing: 0em;
   text-align: center;
   margin-bottom: 3rem;
+  color: var(--text);
 }
 
 .fvimage {
@@ -93,6 +98,7 @@
   letter-spacing: -0.03em;
   line-height: 4rem;
   text-align: center;
+  color: var(--text);
 }
 
 .explore_view {
@@ -107,27 +113,23 @@
   font-style: normal;
   font-weight: 300;
   font-size: 1rem;
-  color: #000000;
+  color: var(--text);
   margin-top: 0.25rem;
   text-align: center;
 }
 
 .search_button {
   margin-top: 1rem;
-  border: 1px solid #000;
+  border: 1px solid var(--elev);
   border-radius: 84.5px;
   font-size: 1.15rem;
   width: 200px;
   height: 55px;
-  background-color: white;
+  background-color: var(--bg);
+  color: var(--text);
   display: flex;
   justify-content: center;
   align-items: center;
-
-  /* padding: 16px 32px; */
-  /* gap: 4px; */
-  /* border: none; */
-  /* text-align: center; */
 }
 
 @media only screen and (min-width: 1000px) {
@@ -198,6 +200,7 @@
   flex-direction: column;
   justify-content: center;
   align-items: center;
+  color: var(--text);
 }
 
 @media only screen and (min-width: 786px) {

src/index.css

@@ -17,10 +17,10 @@ body {
   width: 100%;
   min-height: 100vh;
 
-  background-color: #ffffff;
+  background-color: var(--bg);
   opacity: 1;
-  background-image: linear-gradient(#f9f9f9 3.1px, transparent 3.1px),
-    linear-gradient(to right, #f9f9f9 3.1px, #ffffff 3.1px);
+  background-image: linear-gradient(var(--card) 3.1px, transparent 3.1px),
+     linear-gradient(to right, var(--card) 3.1px, var(--bg) 3.1px);
   background-size: 62px 62px;
 }
 

src/index.js

@@ -1,6 +1,6 @@
 import React from "react";
 import ReactDOM from "react-dom/client";
-
+import "./theme.css";
 import "./index.css";
 import App from "./App";