fix: restore dark theme UI and scope light mode styling using data-theme

Author: aadya284

app/components/layout/Header/headerComponent.tsx

@@ -368,6 +368,7 @@ const HeaderComponent = () => {
                 height={32}
                 alt="Logo"
                 title="betterbugs-logo"
+                className={hederStyles.bbLogo}
                 priority
               />
             </Link>
@@ -459,7 +460,7 @@ const HeaderComponent = () => {
                   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'
@@ -492,6 +493,7 @@ const HeaderComponent = () => {
                   height={32}
                   alt="Logo"
                   title="betterbugs-logo"
+                  className={hederStyles.bbLogo}
                   priority
                 />
               </Link>
@@ -513,7 +515,7 @@ const HeaderComponent = () => {
                 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

@@ -100,7 +100,7 @@
     background: rgba(255, 255, 255, 0.16);
   }
 
-  :global(html.light) & {
+  :global([data-theme="light"]) & {
     background: rgba(17, 24, 39, 0.06);
     border-color: rgba(17, 24, 39, 0.2);
     color: #111827;
@@ -110,3 +110,13 @@
     }
   }
 }
+
+:global([data-theme="light"]) .bbLogo {
+  filter: brightness(0) saturate(100%);
+}
+
+: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);
+}

app/components/layout/footer/footerComponent.tsx

@@ -10,8 +10,10 @@ import { Col, Row } from 'antd';
 import YouTubeIcon from '../../theme/Icon/youTubeIcon';
 import DiscordIcon from '../../theme/Icon/discordIcon';
 import { WEB_URL } from '@/app/libs/constants';
+import { useTheme } from '@/app/contexts/themeContext';
 
 const FooterComponent = () => {
+  const { isLightTheme } = useTheme();
   const pathname = usePathname();
   const router = useRouter();
   const [sectionId, setSectionId] = useState<string | null>(null);
@@ -262,7 +264,7 @@ const FooterComponent = () => {
                   height={100}
                   alt="Logo"
                   title="betterbugs-logo"
-                  className="mx-2 w-[211px] lg:w-[470px]"
+                  className="mx-2 w-[211px] lg:w-[470px] bb-logo"
                   priority
                 />
               </Link>
@@ -322,7 +324,7 @@ const FooterComponent = () => {
               </p>
               <p className="text-sm text-white/70 md:text-base font-normal cursor-pointer">
                 <iframe
-                  src="https://status.betterbugs.io/badge?theme=dark"
+                  src={`https://status.betterbugs.io/badge?theme=${isLightTheme ? 'light' : 'dark'}`}
                   width="200"
                   height="30"
                   frameBorder="0"

app/contexts/themeContext.tsx

@@ -38,6 +38,8 @@ export const ThemeProvider = ({ children }: { children: ReactNode }) => {
     const root = document.documentElement;
     root.classList.remove("light", "dark");
     root.classList.add(theme);
+    root.setAttribute("data-theme", theme);
+    root.style.colorScheme = theme;
 
     if (!hasHydrated) {
       return;

app/developmentToolsStyles.module.scss

@@ -45,7 +45,7 @@
   }
 }
 
-:global(html.light) .searchInput {
+:global([data-theme="light"]) .searchInput {
   input {
     border: 1px solid #000000;
     color: #000000;

app/layout.tsx

@@ -30,7 +30,7 @@ const MyApp = ({ children }: { children: JSX.Element }): JSX.Element => {
   });
 
   return (
-    <html lang="en" className="dark">
+    <html lang="en" className="dark" data-theme="dark">
       <head>
         <meta
           name="google-site-verification"

app/styles/global.scss

@@ -31,46 +31,50 @@ body {
   }
 }
 
-html.dark {
+html[data-theme="dark"] {
   color-scheme: dark;
 }
 
-html.light {
+html[data-theme="light"] {
   color-scheme: light;
 }
 
-html.light,
-html.light body {
+html[data-theme="light"],
+html[data-theme="light"] body {
   background-color: #ffffff;
   color: #111827;
 }
 
-html.light .bg-black,
-html.light .bg-\[\#111111\] {
+html[data-theme="light"] .bg-black,
+html[data-theme="light"] .bg-\[\#111111\] {
   background-color: #ffffff;
 }
 
-html.light .text-white,
-html.light .text-white\/80,
-html.light .text-white\/70,
-html.light .text-white\/60 {
+html[data-theme="light"] .text-white,
+html[data-theme="light"] .text-white\/80,
+html[data-theme="light"] .text-white\/70,
+html[data-theme="light"] .text-white\/60 {
   color: #111827;
 }
 
-html.light .border-light-primary,
-html.light .border-t-light-primary,
-html.light .\!border-light-primary {
+html[data-theme="light"] .border-light-primary,
+html[data-theme="light"] .border-t-light-primary,
+html[data-theme="light"] .\!border-light-primary {
   border-color: #d1d5db;
 }
 
-html.light .tab-gradient,
-html.light .grey-gradient,
-html.light .feature-gradient,
-html.light .cardGradient,
-html.light .boxGradient {
+html[data-theme="light"] .tab-gradient,
+html[data-theme="light"] .grey-gradient,
+html[data-theme="light"] .feature-gradient,
+html[data-theme="light"] .cardGradient,
+html[data-theme="light"] .boxGradient {
   background: #f3f4f6;
 }
 
+html[data-theme="light"] .bb-logo {
+  filter: brightness(0) saturate(100%);
+}
+
 h1,
 h2,
 h3,