Light Theme

package.json

@@ -164,4 +164,4 @@
     "tailwindcss": "^3.4.1",
     "typescript": "^5.9.3"
   }
-}
+}

src/App.css

@@ -34,7 +34,10 @@ textarea {
   --color-brand-primary-rgb: 0, 244, 252;
   --color-brand-primary-alt: #61dafb;
   --color-brand-primary-dark: #00aada;
-
+  --bg-color: #121212;
+  --text-color: #f1f1f1;
+  --header-bg: #1e1e1e;
+  --border-color: #444444;
   /* Neutral */
   --color-neutral-10: #ffffff;
   --color-neutral-20: #f6f6f9;
@@ -104,11 +107,16 @@ textarea {
   --color-play-level-3: 229, 57, 53;
 }
 
+[data-theme='light'] {
+  --bg-color: #ffffff;
+  --text-color: #333333;
+  --header-bg: #f8f9fa;
+  --border-color: #dddddd;
+}
+
 html,
 body {
   height: auto;
-  padding: 0;
-  margin: 0;
   font-family: var(--ff-default);
   line-height: 1.6;
   font-size: 16px;
@@ -117,11 +125,40 @@ body {
   scroll-behavior: smooth;
 }
 
+html, body, #root {
+  overflow-x: hidden; 
+  width: 100%;
+  margin: 0;
+  padding: 0;
+}
+
 body * {
   box-sizing: border-box;
   font-family: var(--ff-default);
 }
 
+body {
+  background-color: var(--bg-color);
+  color: var(--text-color);
+  transition: background-color 0.3s ease, color 0.3s ease; 
+}
+
+.theme-toggle-btn {
+  background: transparent;
+  border: 1px solid var(--border-color);
+  color: var(--text-color);
+  padding: 0.4rem 0.8rem;
+  border-radius: 6px;
+  cursor: pointer;
+  font-weight: 600;
+  transition: all 0.3s ease;
+}
+
+.theme-toggle-btn:hover {
+  background-color: var(--text-color);
+  color: var(--bg-color);
+}
+
 .app-container {
   height: 100vh;
   display: flex;

src/common/header/Header.jsx

@@ -1,14 +1,15 @@
 import HeaderNav from './HeaderNav';
-import { useEffect, useRef, useState } from 'react';
+import { useEffect, useRef, useState, useContext } from 'react';
 import { Link, useLocation } from 'react-router-dom';
 import Countdown from 'react-countdown';
 import './header.css';
 import { SearchBox } from 'common/search/SearchBox';
+import { ThemeContext } from 'common/theme/ThemeContext';
 
 const Header = () => {
   const location = useLocation();
   const pathName = location.pathname;
-
+  const { theme, toggleTheme } = useContext(ThemeContext);
   const [reset, setReset] = useState({ search: false, filter: false });
   const [showNav, setShowNav] = useState(true);
   const lastScrollY = useRef(0);
@@ -163,7 +164,11 @@ const Header = () => {
         <div className="app-header-search pl-0 xl:pl-[130px]">
           {showHideBits.showSearch && <SearchBox reset={reset} />}
         </div>
-
+        <div className="header-actions">
+          <button aria-label="Toggle Theme" className="theme-toggle-btn" onClick={toggleTheme}>
+            {theme === 'light' ? '🌙 Dark' : '☀️ Light'}
+          </button>
+        </div>
         <HeaderNav showBrowse={showHideBits.showBrowse} />
       </header>
     </div>

src/common/home/home.css

@@ -10,12 +10,17 @@
   background: -webkit-linear-gradient(180deg, rgba(1, 4, 38, 1) 0%, rgba(76, 91, 94, 1) 100%);
   background: linear-gradient(180deg, rgba(1, 4, 38, 1) 0%, rgba(76, 91, 94, 1) 100%);
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#010426", endColorstr="#4c5b5e", GradientType=1);
-  width: 100%;
   overflow-x: hidden;
   min-height: 100vh;
   padding-top: 32px; /* extra offset for activity banner on home page */
 }
 
+.app-home-body, .home-banner {
+  width: 100%; 
+  margin-left: 0; 
+  margin-right: 0;
+}
+
 .app-home-body .app-home-body-content {
   margin-bottom: 4rem;
   z-index: 5;

src/common/theme/ThemeContext.jsx

@@ -0,0 +1,22 @@
+import React, { createContext, useState, useEffect } from 'react';
+
+export const ThemeContext = createContext();
+
+export const ThemeProvider = ({ children }) => {
+  const [theme, setTheme] = useState(() => {
+    const savedTheme = localStorage.getItem('theme');
+
+    return savedTheme ? savedTheme : 'dark';
+  });
+
+  useEffect(() => {
+    localStorage.setItem('theme', theme);
+    document.documentElement.setAttribute('data-theme', theme);
+  }, [theme]);
+
+  const toggleTheme = () => {
+    setTheme((prevTheme) => (prevTheme === 'light' ? 'dark' : 'light'));
+  };
+
+  return <ThemeContext.Provider value={{ theme, toggleTheme }}>{children}</ThemeContext.Provider>;
+};

src/index.jsx

@@ -7,6 +7,7 @@ import register from './registerServiceWorker';
 import ErrorBoundry from './ErrorBoundary/ErrorBoundary';
 import Notification from 'common/components/Notification';
 import 'react-toastify/dist/ReactToastify.css';
+import { ThemeProvider } from 'common/theme/ThemeContext';
 
 /** removing console statement in react prod build */
 /* eslint-disable no-console */
@@ -37,14 +38,16 @@ const Index = () => {
   };
 
   return (
-    // <React.StrictMode>
-    <ErrorBoundry>
-      <SearchContextProvider value={value}>
-        <RouteDefs />
-        <Notification />
-      </SearchContextProvider>
-    </ErrorBoundry>
-    // </React.StrictMode>
+    <ThemeProvider>
+      {/* <React.StrictMode> */}
+      <ErrorBoundry>
+        <SearchContextProvider value={value}>
+          <RouteDefs />
+          <Notification />
+        </SearchContextProvider>
+      </ErrorBoundry>
+      {/* </React.StrictMode> */}
+    </ThemeProvider>
   );
 };
 const container = document.getElementById('root');