feature: add light mode toggle and global theme support

app/[slug]/page.tsx

@@ -21,9 +21,12 @@ import RecorderGradientIcon from "@/app/components/theme/Icon/recorderGradientIc
 import SEOComponent from "@/app/components/theme/SEOComponent/SEOComponent";
 import { detectBrowser } from "@/app/libs/helpers";
 import EdgeIcon from "@/app/components/theme/Icon/edgeIcon";
+import { useTheme } from "@/app/contexts/themeContext";
 
 const Page = ({ params: { slug } }: { params: { slug: string } }) => {
   const [browser, setBrowser] = useState("chrome");
+  const { isLightTheme } = useTheme();
+  const logoSrc = isLightTheme ? "/images/bb-logo-light.svg" : "/images/bb-logo.svg";
 
   useEffect(() => {
     setBrowser(detectBrowser());
@@ -56,16 +59,16 @@ const Page = ({ params: { slug } }: { params: { slug: string } }) => {
         ogDescription={meta_data?.og_description}
         ogImage={meta_data?.og_image}
       />
-      <div className="md:max-w-[1170px] mx-auto">
+      <div className={`md:max-w-[1170px] mx-auto ${DevelopmentToolsStyles.pageContainer}`}>
         <div className="px-3 md:px-auto mx-auto">
           {/*Hero cta section */}
           <section className="md:pt-0 pt-9">
-            <div className="bg-[#090B0B] text-white flex flex-col items-center justify-center pl-6 pr-4 mt-10 rounded-lg">
+            <div className={`bg-[#090B0B] text-white flex flex-col items-center justify-center pl-6 pr-4 mt-10 rounded-lg ${DevelopmentToolsStyles.promoPanel}`}>
               <div className="w-full flex md:flex-row flex-col md:items-center items-start md:justify-between justify-start gap-8 md:py-4 py-8 md:px-7">
                 {/* Left Section */}
                 <div className="text-left flex-1">
                   <Image
-                    src="/images/bb-logo.svg"
+                    src={logoSrc}
                     alt="BetterBugs Logo"
                     className="mb-8"
                     width={200}
@@ -86,7 +89,9 @@ const Page = ({ params: { slug } }: { params: { slug: string } }) => {
                   </p>
                   <div className="flex items-center gap-3 mt-6 mb-4">
                     <Link target="_blank" href={Extension_URL}>
-                      <Button className="btn-primary flex items-center z-20 justify-center gap-3 rounded-full px-4">
+                      <Button
+                        className={`btn-primary flex items-center z-20 justify-center gap-3 rounded-full px-4 ${DevelopmentToolsStyles.addToChromeButton}`}
+                      >
                         {browser === "edge" ? (
                           <EdgeIcon className="w-7 h-7" />
                         ) : (
@@ -169,7 +174,7 @@ const Page = ({ params: { slug } }: { params: { slug: string } }) => {
             </div>
           </section>
 
-          <div className="md:pb-[70px] md:pt-[30px] py-[50px]">
+          <div className={`md:pb-[70px] md:pt-[30px] py-[50px] ${DevelopmentToolsStyles.contentWrapper}`}>
             {/* Heading section */}
             {hero_section && (
               <section>
@@ -209,7 +214,7 @@ const Page = ({ params: { slug } }: { params: { slug: string } }) => {
                 {/* Tools Panel - 20% width, fixed */}
                 {development_tools_list?.length > 0 && (
                   <div className="md:w-1/4 md:sticky left-0 md:top-8 top-2 h-full overflow-y-auto flex flex-col">
-                    <div className="bg-[#FFFFFF1A] p-4 rounded-xl">
+                    <div className={DevelopmentToolsStyles.sidePanel}>
                       <div className="flex items-center mb-6">
                         <h2 className="text-xl font-bold text-gray-800">
                           Other Tools
@@ -218,7 +223,7 @@ const Page = ({ params: { slug } }: { params: { slug: string } }) => {
                       {development_tools_list?.map((tool: any, index: any) => (
                         <Link key={index} href={tool?.url}>
                           <div
-                            className={`p-3 mb-2 cursor-pointer rounded-xl border-[1px] border-transparent hover:border-1 hover:border-primary bg-black text-white hover:text-primary`}
+                            className={`p-3 mb-2 cursor-pointer rounded-xl border-[1px] border-transparent hover:border-1 hover:border-primary bg-black text-white hover:text-primary ${DevelopmentToolsStyles.sidePanelItem}`}
                           >
                             {tool?.tool}
                           </div>
@@ -884,12 +889,12 @@ const Page = ({ params: { slug } }: { params: { slug: string } }) => {
 
             {/* cta section */}
             <section>
-              <div className="bg-[#090B0B] text-white flex flex-col items-center justify-center pl-6 pr-4 mt-10">
+              <div className={`bg-[#090B0B] text-white flex flex-col items-center justify-center pl-6 pr-4 mt-10 ${DevelopmentToolsStyles.promoPanel}`}>
                 <div className="w-full flex md:flex-row flex-col md:items-center items-start md:justify-between justify-start gap-8 md:py-4 py-8 md:px-7">
                   {/* Left Section */}
                   <div className="text-left flex-1">
                     <Image
-                      src="/images/bb-logo.svg"
+                      src={logoSrc}
                       alt="BetterBugs Logo"
                       className="mb-8"
                       width={200}
@@ -910,7 +915,9 @@ const Page = ({ params: { slug } }: { params: { slug: string } }) => {
                     </p>
                     <div className="flex items-center gap-3 mt-6 mb-4">
                       <Link target="_blank" href={Extension_URL}>
-                        <Button className="btn-primary flex items-center z-20 justify-center gap-3 rounded-full px-4">
+                        <Button
+                          className={`btn-primary flex items-center z-20 justify-center gap-3 rounded-full px-4 ${DevelopmentToolsStyles.addToChromeButton}`}
+                        >
                           {browser === "edge" ? (
                             <EdgeIcon className="w-7 h-7" />
                           ) : (
@@ -933,7 +940,10 @@ const Page = ({ params: { slug } }: { params: { slug: string } }) => {
                           "https://www.loom.com/share/beb5310bed634e4783d10becd4a291f2?sid=7bcb9a6f-0290-4d5b-9eb0-12ed04e9167e"
                         }
                       >
-                        <PlayIcon className="hover:text-primary" />
+                        <PlayIcon
+                          className={isLightTheme ? "text-[#111827] hover:text-primary" : "hover:text-primary"}
+                          arrowFill={isLightTheme ? "#ffffff" : "#000000"}
+                        />
                       </Link>
                     </div>
                     <p className="text-sm mt-2 text-white">

app/components/comparisonsComponent/comparisonsStyles.module.scss

@@ -27,6 +27,13 @@
   );
 }
 
+:global([data-theme="light"]) .ctaCardGridBg {
+  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
+  border: 1px solid #e5e7eb;
+  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06),
+    inset 0 1px 0 rgba(255, 255, 255, 0.9);
+}
+
 .collapse {
   :global(.ant-collapse) {
     background-color: transparent !important;

app/components/layout/Header/headerComponent.tsx

@@ -19,6 +19,7 @@ import ProductMenuComponent from '../../headerMenuDropdownComponents/productMenu
 import SolutionMenuComponent from '../../headerMenuDropdownComponents/solutionMenuComponent';
 import ResourceMenuComponent from '../../headerMenuDropdownComponents/resourceMenuComponent';
 import ToolsMenuComponent from '../../headerMenuDropdownComponents/toolsMenuComponent';
+import { useTheme } from '@/app/contexts/themeContext';
 
 const responsiveHeader = [
   // {
@@ -186,10 +187,50 @@ const CountdownTimer = () => {
   );
 };
 
+const SunIcon = () => (
+  <svg
+    width="16"
+    height="16"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    aria-hidden="true"
+  >
+    <circle cx="12" cy="12" r="4" stroke="currentColor" strokeWidth="2" />
+    <path
+      d="M12 2V5M12 19V22M22 12H19M5 12H2M19.07 4.93L16.95 7.05M7.05 16.95L4.93 19.07M19.07 19.07L16.95 16.95M7.05 7.05L4.93 4.93"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+    />
+  </svg>
+);
+
+const MoonIcon = () => (
+  <svg
+    width="16"
+    height="16"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    aria-hidden="true"
+  >
+    <path
+      d="M21 14.5A9 9 0 1 1 12.5 3C11.6 4.3 11.1 5.9 11.1 7.6C11.1 12 14.6 15.5 19 15.5C19.7 15.5 20.4 15.4 21 15.2V14.5Z"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+);
+
 const HeaderComponent = () => {
   const router = usePathname();
   const searchParams = useSearchParams();
   const utmSource = searchParams.get('utm_source');
+  const { isLightTheme, setIsLightTheme } = useTheme();
+  const logoSrc = isLightTheme ? '/images/bb-logo-light.svg' : '/images/bb-logo.svg';
   const { collapsed, setCollapsed }: LayoutContextModel =
     useContext(LayoutContext);
 
@@ -323,11 +364,12 @@ const HeaderComponent = () => {
           <div className="container mx-auto flex items-center justify-between py-3">
             <Link href={`${WEB_URL}`} className="flex items-center">
               <Image
-                src="/images/bb-logo.svg"
+                src={logoSrc}
                 width={190}
                 height={32}
                 alt="Logo"
                 title="betterbugs-logo"
+                className={hederStyles.bbLogo}
                 priority
               />
             </Link>
@@ -390,7 +432,16 @@ const HeaderComponent = () => {
                   </li>
                 ))}
               </ul>
-              <div className="ml-auto">
+              <div className="ml-auto flex items-center">
+                <button
+                  type="button"
+                  className={`${hederStyles.themeToggle} mr-2`}
+                  onClick={() => setIsLightTheme(!isLightTheme)}
+                  aria-label={`Switch to ${isLightTheme ? 'dark' : 'light'} mode`}
+                  aria-pressed={isLightTheme}
+                >
+                  {isLightTheme ? <MoonIcon /> : <SunIcon />}
+                </button>
                 <Link
                   href={`https://app.betterbugs.io/login${
                     utmSource ? `?utm_source=${utmSource}` : ''
@@ -402,15 +453,15 @@ const HeaderComponent = () => {
                   </div>
                 </Link>
               </div>
-              <div>
+              <div className="flex items-center">
                 <Link
                   href={`https://app.betterbugs.io/login${
                     utmSource ? `?utm_source=${utmSource}` : ''
                   }`}
                   target="_blank"
                 >
                   <Button
-                    className={`font-medium flex items-center rounded-full border !border-light-primary btn-gradient ${
+                    className={`${hederStyles.getStartedButton} font-medium flex items-center rounded-full border !border-light-primary btn-gradient ${
                       isScrolled
                         ? 'scroll-gradient !text-base py-5 px-6'
                         : 'bg-[#FFFFFF0D] !text-white/80 !text-base py-5 px-6'
@@ -438,24 +489,34 @@ const HeaderComponent = () => {
               </div>
               <Link href={`${WEB_URL}`}>
                 <Image
-                  src="/images/bb-logo.svg"
+                  src={logoSrc}
                   width={150}
                   height={32}
                   alt="Logo"
                   title="betterbugs-logo"
+                  className={hederStyles.bbLogo}
                   priority
                 />
               </Link>
             </div>
-            <div className="ml-auto">
+            <div className="ml-auto flex items-center">
+              <button
+                type="button"
+                className={`${hederStyles.themeToggle} mr-3`}
+                onClick={() => setIsLightTheme(!isLightTheme)}
+                aria-label={`Switch to ${isLightTheme ? 'dark' : 'light'} mode`}
+                aria-pressed={isLightTheme}
+              >
+                {isLightTheme ? <MoonIcon /> : <SunIcon />}
+              </button>
               <Link
                 href={`https://app.betterbugs.io/login${
                   utmSource ? `?utm_source=${utmSource}` : ''
                 }`}
                 target="_blank"
               >
                 <Button
-                  className={`btn-primary font-medium flex items-center rounded-full border !border-light-primary text-[#FFFFFF0D] hover:bg-primary scroll-gradient !text-base px-4 !h-10`}
+                  className={`${hederStyles.getStartedButton} btn-primary font-medium flex items-center rounded-full border !border-light-primary text-[#FFFFFF0D] hover:bg-primary scroll-gradient !text-base px-4 !h-10`}
                 >
                   Get started
                 </Button>

app/components/layout/Header/headerStyles.module.scss

@@ -82,3 +82,37 @@
     border-radius: 15px;
   }
 }
+
+.themeToggle {
+  align-items: center;
+  background: rgba(255, 255, 255, 0.08);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  border-radius: 999px;
+  color: white;
+  cursor: pointer;
+  display: inline-flex;
+  height: 36px;
+  justify-content: center;
+  transition: background-color 0.2s ease, color 0.2s ease;
+  width: 36px;
+
+  &:hover {
+    background: rgba(255, 255, 255, 0.16);
+  }
+
+  :global([data-theme="light"]) & {
+    background: rgba(17, 24, 39, 0.06);
+    border-color: rgba(17, 24, 39, 0.2);
+    color: #111827;
+
+    &:hover {
+      background: rgba(17, 24, 39, 0.12);
+    }
+  }
+}
+
+:global([data-theme="light"]) .getStartedButton {
+  background: rgba(17, 24, 39, 0.88);
+  border-color: rgba(17, 24, 39, 0.88);
+  color: rgba(255, 255, 255, 0.9);
+}