diff --git a/public/index.html b/public/index.html
index 8592303a9d..efcc1911f0 100644
--- a/public/index.html
+++ b/public/index.html
@@ -34,6 +34,15 @@
     <title>ReactPlay - One app to learn, create, and share ReactJS projects.</title>
   </head>
   <body>
+    <script>
+      (function() {
+        var t = localStorage.getItem('reactplay.theme');
+        if (t !== 'light' && t !== 'dark') {
+          t = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+        }
+        document.documentElement.setAttribute('data-theme', t);
+      })();
+    </script>
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root" class="app-container"></div>
     <!--
diff --git a/src/App.css b/src/App.css
index a2073210f4..1424601194 100644
--- a/src/App.css
+++ b/src/App.css
@@ -51,6 +51,10 @@ textarea {
   --color-neutral-10-rgb: 255, 255, 255;
   --color-neutral-100-rgb: 0, 0, 0;
 
+  --scrollbar-size: 12px;
+  --scrollbar-track: rgba(var(--color-neutral-10-rgb), 0.08);
+  --scrollbar-thumb: var(--color-brand-primary);
+
   /* Font Family */
   --ff-default: Poppins, -apple-system, Roboto, Helvetica Neue, sans-serif;
   --ff-accent: Raleway, Inter, -apple-system, Roboto, Helvetica Neue, sans-serif;
@@ -104,6 +108,30 @@ textarea {
   --color-play-level-3: 229, 57, 53;
 }
 
+/* Dark theme overrides — invert the neutral scale */
+html[data-theme='dark'] {
+  --color-neutral-10: #0b1120;
+  --color-neutral-20: #111827;
+  --color-neutral-30: #1e293b;
+  --color-neutral-40: #334155;
+  --color-neutral-50: #64748b;
+  --color-neutral-60: #94a3b8;
+  --color-neutral-70: #cbd5e1;
+  --color-neutral-80: #e2e8f0;
+  --color-neutral-90: #f1f5f9;
+  --color-neutral-100: #ffffff;
+
+  --color-neutral-90-rgb: 241, 245, 249;
+  --color-neutral-10-rgb: 11, 17, 32;
+  --color-neutral-100-rgb: 255, 255, 255;
+
+  --color-brand-primary: #22d3ee;
+  --color-brand-primary-rgb: 34, 211, 238;
+  --color-brand-primary-alt: #67e8f9;
+  --color-brand-primary-dark: #06b6d4;
+}
+
+
 html,
 body {
   height: auto;
@@ -115,6 +143,14 @@ body {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   scroll-behavior: smooth;
+  overflow-x: clip;
+  background-color: var(--color-neutral-20);
+  color: var(--color-neutral-80);
+  transition: background-color 0.3s ease, color 0.3s ease;
+}
+
+#root {
+  min-height: 100%;
 }
 
 body * {
@@ -558,13 +594,17 @@ small {
 }
 
 ::-webkit-scrollbar-thumb {
-  background-color: #00f2fe;
+  background-color: var(--color-brand-primary);
   border-radius: 20px;
-  border: 6px solid transparent;
+  border: 3px solid transparent;
   background-clip: content-box;
-  height: 100px;
 }
 
 ::-webkit-scrollbar {
-  width: 25px;
+  width: var(--scrollbar-size);
+}
+
+* {
+  scrollbar-width: thin;
+  scrollbar-color: var(--color-brand-primary) transparent;
 }
diff --git a/src/ErrorBoundary/ErrorFallback.jsx b/src/ErrorBoundary/ErrorFallback.jsx
index e357d1c5ff..c1a4864019 100644
--- a/src/ErrorBoundary/ErrorFallback.jsx
+++ b/src/ErrorBoundary/ErrorFallback.jsx
@@ -10,10 +10,10 @@ const useStyle = makeStyles({
     fontWeight: 600
   },
   Button: {
-    background: '#00f2fe',
+    background: 'var(--color-brand-primary)',
     color: '#ffffff',
     '&:hover': {
-      background: '#00f2fe',
+      background: 'var(--color-brand-primary)',
       color: '#ffffff'
     }
   }
diff --git a/src/common/components/BackToTop.css b/src/common/components/BackToTop.css
index a145153b43..aa168ddec3 100644
--- a/src/common/components/BackToTop.css
+++ b/src/common/components/BackToTop.css
@@ -9,8 +9,8 @@
   height: 56px;
   border-radius: 50%;
   background: var(--color-brand-primary);
-  border: 3px solid #fff;
-  color: #fff;
+  border: 3px solid var(--color-neutral-10);
+  color: var(--color-neutral-10);
   cursor: pointer;
   display: flex;
   align-items: center;
@@ -18,7 +18,7 @@
   font-size: 1.5rem;
   line-height: 1;
   padding: 0;
-  box-shadow: 0 8px 24px rgba(0, 242, 254, 0.35), inset 0 0 20px rgba(255, 255, 255, 0.1);
+  box-shadow: 0 8px 24px rgba(var(--color-brand-primary-rgb), 0.35), inset 0 0 20px rgba(var(--color-neutral-10-rgb), 0.1);
   transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
   animation: slideUpButton 0.4s ease-out;
   flex-shrink: 0;
@@ -49,9 +49,9 @@
 
 .back-to-top:hover {
   background: var(--color-brand-primary);
-  box-shadow: 0 12px 32px rgba(0, 242, 254, 0.5), inset 0 0 20px rgba(255, 255, 255, 0.2);
+  box-shadow: 0 12px 32px rgba(var(--color-brand-primary-rgb), 0.5), inset 0 0 20px rgba(var(--color-neutral-10-rgb), 0.2);
   transform: translateY(-6px) scale(1.08);
-  border-color: #00f2fe;
+  border-color: var(--color-brand-primary);
 }
 
 .back-to-top--footer:hover {
@@ -60,7 +60,7 @@
 
 .back-to-top:active {
   transform: translateY(-2px) scale(0.96);
-  box-shadow: 0 4px 16px rgba(0, 242, 254, 0.4), inset 0 0 20px rgba(255, 255, 255, 0.1);
+  box-shadow: 0 4px 16px rgba(var(--color-brand-primary-rgb), 0.4), inset 0 0 20px rgba(var(--color-neutral-10-rgb), 0.1);
 }
 
 /* Footer back-to-top container */
@@ -86,13 +86,13 @@
 
 /* Home Page Specific Styles */
 body.home-page .back-to-top {
-  background: rgba(0, 242, 254, 0.95);
-  box-shadow: 0 6px 20px rgba(0, 242, 254, 0.4);
+  background: rgba(var(--color-brand-primary-rgb), 0.95);
+  box-shadow: 0 6px 20px rgba(var(--color-brand-primary-rgb), 0.4);
 }
 
 body.home-page .back-to-top:hover {
   background: var(--color-brand-primary);
-  box-shadow: 0 10px 28px rgba(0, 242, 254, 0.55);
+  box-shadow: 0 10px 28px rgba(var(--color-brand-primary-rgb), 0.55);
 }
 
 @media screen and (max-width: 768px) {
@@ -116,7 +116,7 @@ body.home-page .back-to-top:hover {
     width: 48px;
     height: 48px;
     font-size: 1.1rem;
-    border: 2px solid #fff;
+    border: 2px solid var(--color-neutral-10);
   }
 
   .back-to-top--footer {
diff --git a/src/common/header/HeaderNav.jsx b/src/common/header/HeaderNav.jsx
index d7545a1f39..90e305f4a6 100644
--- a/src/common/header/HeaderNav.jsx
+++ b/src/common/header/HeaderNav.jsx
@@ -12,9 +12,12 @@ import { GoX } from 'react-icons/go';
 import { Modal, Box, Typography, Menu } from '@mui/material';
 import { useSearchContext } from 'common/search/search-context';
 import { PLAY_DOC_LINK, UMAMI_EVENTS } from 'constants';
+import { useThemeMode } from 'common/theme/theme-context';
+import { BsMoonStarsFill, BsSunFill } from 'react-icons/bs';
 
 const HeaderNav = ({ showBrowse }) => {
   const { showShareModal, setShowShareModal } = useSearchContext();
+  const { theme, toggleTheme } = useThemeMode();
 
   const [showToggleMenu, setShowToggleMenu] = useState(false);
   const menuRef = useRef(null);
@@ -185,6 +188,23 @@ const HeaderNav = ({ showBrowse }) => {
               </Link>
             </li>
           )}
+          <li>
+            <button
+              aria-label={`Switch to ${theme === 'dark' ? 'light' : 'dark'} mode`}
+              className="app-header-btn app-header-btn--secondary app-header-btn--theme"
+              data-testid="theme-toggle-btn"
+              onClick={toggleTheme}
+              title={`Switch to ${theme === 'dark' ? 'light' : 'dark'} mode`}
+              type="button"
+            >
+              {theme === 'dark' ? (
+                <BsSunFill className="icon" />
+              ) : (
+                <BsMoonStarsFill className="icon" />
+              )}
+              <span className="btn-label">{theme === 'dark' ? 'Light' : 'Dark'}</span>
+            </button>
+          </li>
           <li className="menu-events">
             <a
               className="app-header-btn app-header-btn--secondary"
diff --git a/src/common/header/header.css b/src/common/header/header.css
index af27735658..b9fdd42a44 100644
--- a/src/common/header/header.css
+++ b/src/common/header/header.css
@@ -3,14 +3,13 @@
   top: 0;
   right: 0;
   left: 0; */
-  transition: transform 0.3s ease;
+  transition: transform 0.3s ease, background-color 0.2s ease, color 0.2s ease;
   z-index: 10;
   display: flex;
   justify-content: space-between;
   align-items: center;
-  /* background: rgba(var(--color-brand-primary-rgb), 0.08); */
-  background: var(--color-neutral-90);
-  color: #fff;
+  background: var(--color-neutral-10);
+  color: var(--color-neutral-80);
   height: 64px;
   padding: 0 1rem 0 0.6rem;
 }
@@ -191,7 +190,7 @@
 }
 
 .header-links > li > a {
-  color: #fff;
+  color: var(--color-neutral-80);
   margin-left: 0;
   display: block;
   width: var(--navbar-icon-size-rg);
@@ -339,6 +338,17 @@ background-color: var(--color-neutral-10);
   margin-left: 0.4rem;
 }
 
+.header-links > li > .app-header-btn.app-header-btn--theme {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.4rem;
+}
+
+.header-links > li > .app-header-btn.app-header-btn--theme .icon {
+  fill: var(--color-brand-primary);
+  color: var(--color-brand-primary);
+}
+
 .header-links > li > .app-header-btn.app-header-btn--secondary:hover,
 .header-links > li > .app-header-btn.app-header-btn--secondary:focus {
   background-color: rgba(var(--color-neutral-10-rgb), 0.1);
@@ -443,7 +453,7 @@ background-color: var(--color-neutral-10);
 
   transform: translate(-50%, -50%);
 
-  background: white;
+  background: var(--color-neutral-10);
   box-shadow: 0px 0 26px 0px rgba(var(--color-neutral-90-rgb), 0.62);
   -webkit-box-shadow: 0px 0 26px 0px rgba(var(--color-neutral-90-rgb), 0.62);
   -moz-box-shadow: 0px 0 26px 0px rgba(var(--color-neutral-90-rgb), 0.62);
@@ -575,3 +585,8 @@ background-color: var(--color-neutral-10);
   margin-left: 5px;
   cursor: pointer;
 }
+
+/* Dark mode header stays dark */
+html[data-theme='dark'] .app-header {
+  background: #0b1120;
+}
diff --git a/src/common/home/Home.jsx b/src/common/home/Home.jsx
index 074e906791..7503e97432 100644
--- a/src/common/home/Home.jsx
+++ b/src/common/home/Home.jsx
@@ -13,7 +13,9 @@ const Home = () => {
   return (
     <main>
       <section className="app-home-body" id="hero">
-        <DefaultBanner />
+        <div className="app-home-body-content">
+          <DefaultBanner />
+        </div>
       </section>
       <section className="home-features">
         <HomeFeatures />
diff --git a/src/common/home/home.css b/src/common/home/home.css
index 3a12a3df95..d418bdb30c 100644
--- a/src/common/home/home.css
+++ b/src/common/home/home.css
@@ -4,19 +4,62 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  /* background-color: var(--color-neutral-90); */
-  background: rgb(1, 4, 38);
-  background: -moz-linear-gradient(180deg, rgba(1, 4, 38, 1) 0%, rgba(76, 91, 94, 1) 100%);
-  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%;
+  background: linear-gradient(180deg, #010426 0%, #4c5b5e 100%);
+  width: 100vw;
+  margin-left: calc(-50vw + 50%);
   overflow-x: hidden;
   min-height: 100vh;
-  padding-top: 32px; /* extra offset for activity banner on home page */
+  padding-top: 32px;
+  transition: background 0.4s ease;
+}
+
+/* Dark mode hero: explicit light text on dark gradient */
+html[data-theme='dark'] .app-home-body .body-title {
+  color: var(--color-neutral-90);
+}
+
+html[data-theme='dark'] .app-home-body .body-title strong::after {
+  background-color: var(--color-neutral-90);
+}
+
+html[data-theme='dark'] .app-home-body .body-desc {
+  color: var(--color-neutral-60);
+}
+
+/* Light mode hero: soft gradient */
+html[data-theme='light'] .app-home-body {
+  background: linear-gradient(180deg, #e0f2fe 0%, #f0fdfa 50%, #ffffff 100%);
+}
+
+html[data-theme='light'] .app-home-body .body-title {
+  color: #0f172a;
+}
+
+html[data-theme='light'] .app-home-body .body-title strong {
+  color: #0284c7;
+}
+
+html[data-theme='light'] .app-home-body .body-desc {
+  color: #475569;
+}
+
+html[data-theme='light'] .app-home-body .body-c2a .body-c2a-btn {
+  color: #1e293b;
+  border-color: #94a3b8;
+}
+
+html[data-theme='light'] .app-home-body .body-c2a .body-c2a-btn:hover,
+html[data-theme='light'] .app-home-body .body-c2a .body-c2a-btn:focus {
+  background-color: #1e293b;
+  border-color: #1e293b;
+  color: #f8fafc;
 }
 
 .app-home-body .app-home-body-content {
+  width: 100%;
+  max-width: var(--screen-lg-max);
+  margin: 0 auto;
+  padding: 0 1.2rem;
   margin-bottom: 4rem;
   z-index: 5;
 }
@@ -37,6 +80,7 @@
   }
 
   .app-home-body .app-home-body-content {
+    padding: 0 1rem;
     margin-bottom: 0;
   }
 
@@ -292,7 +336,7 @@
 }
 
 .list-home-features .home-features-item .item-icon:hover {
-  background-color: white;
+  background-color: var(--color-neutral-10);
   transition: 0.4s;
 }
 
@@ -642,7 +686,7 @@
           }
         }
         .partners-sponsors-cta:hover {
-          background-color: white;
+          background-color: var(--color-neutral-10);
 
           .handshake {
             opacity: 1;
@@ -738,7 +782,7 @@
         }
       }
       .prime-sponsors-cta:hover {
-        background-color: white;
+        background-color: var(--color-neutral-10);
 
         .heart-handshake {
           opacity: 1;
@@ -831,7 +875,7 @@
         }
       }
       .backers-cta:hover {
-        background-color: white;
+        background-color: var(--color-neutral-10);
 
         .heart {
           opacity: 0;
diff --git a/src/common/playleaderboard/leaderBoard.css b/src/common/playleaderboard/leaderBoard.css
index 3342155873..28026df644 100644
--- a/src/common/playleaderboard/leaderBoard.css
+++ b/src/common/playleaderboard/leaderBoard.css
@@ -46,10 +46,10 @@
 }
 
 .leaderboard-wrapper {
-    background-color: #ffffff;
+    background-color: var(--color-neutral-10);
     border-radius: 16px;
     padding: 24px;
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
+    box-shadow: 0 4px 12px rgba(var(--color-neutral-90-rgb), 0.05);
     font-family: 'Inter', sans-serif;
     max-width: 800px;
     margin: 20px auto;
@@ -58,7 +58,7 @@
   .leaderboard-title {
     font-size: 24px;
     font-weight: 600;
-    color: #1a202c;
+    color: var(--color-neutral-90);
     margin-bottom: 24px;
   }
   
@@ -78,8 +78,8 @@
     padding: 16px;
     border-radius: 12px;
     width: 120px;
-    color: #4a5568;
-    border: 1px solid #e2e8f0;
+    color: var(--color-neutral-60);
+    border: 1px solid var(--color-neutral-30);
     transition: transform 0.2s ease-in-out;
   }
   
@@ -91,15 +91,15 @@
     width: 60px;
     height: 60px;
     border-radius: 50%;
-    border: 3px solid #fff;
-    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+    border: 3px solid var(--color-neutral-10);
+    box-shadow: 0 2px 4px rgba(var(--color-neutral-90-rgb), 0.1);
     margin-bottom: 8px;
   }
   
   .podium-name {
     font-weight: 600;
     font-size: 14px;
-    color: #2d3748;
+    color: var(--color-neutral-80);
   }
   
   .podium-rank {
@@ -111,31 +111,31 @@
   .podium-points {
     font-weight: 700;
     font-size: 14px;
-    color: #1a202c;
+    color: var(--color-neutral-90);
   }
   
   .podium-second {
-    background-color: #f7fafc;
+    background-color: var(--color-neutral-20);
     height: 170px;
     order: 1;
   }
   
   .podium-first {
-    background-color: #fffbef; 
+    background-color: rgba(246, 224, 94, 0.15);
     height: 200px;
-    border-color: #f6e05e; 
+    border-color: #f6e05e;
     order: 2;
   }
   
   .podium-third {
-    background-color: #fdf5f2;
+    background-color: rgba(237, 137, 54, 0.1);
     height: 150px;
     order: 3;
   }
   
   .winner-announcement {
     text-align: center;
-    color: #4a5568;
+    color: var(--color-neutral-60);
     font-size: 14px;
     margin-bottom: 32px;
     line-height: 1.5;
@@ -144,23 +144,23 @@
 
   .leaderboard-table-container {
     box-shadow: none !important;
-    border: 1px solid #e2e8f0;
+    border: 1px solid var(--color-neutral-30);
     border-radius: 12px !important;
   }
   
   .leaderboard-table-header {
     font-weight: 600 !important;
     font-size: 12px !important;
-    color: #718096 !important;
+    color: var(--color-neutral-50) !important;
     text-transform: uppercase;
-    background-color: #f7fafc !important;
-    border-bottom: 1px solid #e2e8f0 !important;
+    background-color: var(--color-neutral-20) !important;
+    border-bottom: 1px solid var(--color-neutral-30) !important;
   }
   
   .leaderboard-table-cell {
     font-size: 14px !important;
-    color: #2d3748 !important;
-    border-bottom: 1px solid #e2e8f0 !important;
+    color: var(--color-neutral-80) !important;
+    border-bottom: 1px solid var(--color-neutral-30) !important;
   }
   
   .user-profile {
diff --git a/src/common/playlists/PlayErrorBoundary.css b/src/common/playlists/PlayErrorBoundary.css
index 13cd05b837..c4e66d2ad2 100644
--- a/src/common/playlists/PlayErrorBoundary.css
+++ b/src/common/playlists/PlayErrorBoundary.css
@@ -18,13 +18,13 @@
 .play-error-title {
     font-size: 1.5rem;
     font-weight: 600;
-    color: #333;
+    color: var(--color-neutral-80);
     margin: 0 0 0.75rem;
 }
 
 .play-error-message {
     font-size: 1rem;
-    color: #666;
+    color: var(--color-neutral-60);
     max-width: 500px;
     line-height: 1.5;
     margin: 0 0 1.5rem;
@@ -42,8 +42,8 @@
     border: none;
     border-radius: 6px;
     cursor: pointer;
-    background: #00f2fe;
-    color: #fff;
+    background: var(--color-brand-primary);
+    color: var(--color-neutral-90);
     transition: opacity 0.2s;
 }
 
@@ -51,10 +51,10 @@
     padding: 0.6rem 1.5rem;
     font-size: 0.95rem;
     font-weight: 600;
-    border: 2px solid #00f2fe;
+    border: 2px solid var(--color-brand-primary);
     border-radius: 6px;
     cursor: pointer;
     background: transparent;
-    color: #00f2fe;
+    color: var(--color-brand-primary);
     transition: opacity 0.2s;
 }
\ No newline at end of file
diff --git a/src/common/playlists/playlist.css b/src/common/playlists/playlist.css
index 4b90f9f7fc..3b8bde7efa 100644
--- a/src/common/playlists/playlist.css
+++ b/src/common/playlists/playlist.css
@@ -331,8 +331,8 @@
 }
 
 .collapse-btn {
-  border: 1px solid #010326;
-  color: #010326;
+  border: 1px solid var(--color-neutral-90);
+  color: var(--color-neutral-90);
 }
 
 .play-details .play-details-header .header-primary {
@@ -527,7 +527,7 @@
 } */
 
 .play-details .play-details-body p a {
-  color: blue;
+  color: var(--color-brand-primary-dark);
   text-decoration: underline;
 }
 
@@ -794,13 +794,13 @@
 
 .banner-button {
   margin-right: 10px;
-  background-color: rgba(255, 255, 255, 0.947);
+  background-color: rgba(var(--color-neutral-10-rgb), 0.95);
   border: none;
   outline: none;
   transition-timing-function: 0.5s;
   transition: all;
   cursor: pointer;
-  color: black;
+  color: var(--color-neutral-90);
   margin-top: 20px;
   margin-bottom: 10px;
   display: flex;
@@ -808,11 +808,11 @@
   gap: 4px;
 }
 .banner-button:hover {
-  background-color: #e6e6e6c3;
-  color: black;
+  background-color: var(--color-neutral-30);
+  color: var(--color-neutral-90);
 }
 .right-arrow-icon {
-  color: #25a0a7;
+  color: var(--color-brand-primary-dark);
 }
 
 .search-summary {
@@ -842,23 +842,24 @@
   position: relative;
   display: flex;
   flex-direction: column;
-  border: 2px solid #efefef;
+  border: 2px solid var(--color-neutral-30);
   border-radius: 8px;
   overflow: hidden;
   transition: transform 0.2s ease-in-out;
   width: 350px;
   /* height: 100%; */
   padding: 12px;
+  background-color: var(--color-neutral-10);
 }
 
 .play-card-container:hover {
   transform: scale(103%);
-  box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.2);
+  box-shadow: 0px 2px 6px rgba(var(--color-neutral-90-rgb), 0.2);
   transition: transform 0.2s ease-in-out;
 }
 
 .border {
-  border: 1px solid rgb(189 183 183);
+  border: 1px solid var(--color-neutral-40);
   margin: 8px;
   /* padding: 20px; */
 }
@@ -873,7 +874,7 @@
   height: auto;
   border-radius: 8px;
   object-fit: cover;
-  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
+  box-shadow: 0px 2px 4px rgba(var(--color-neutral-90-rgb), 0.1);
 }
 
 .author-name {
@@ -902,14 +903,14 @@
 .lng-btn {
   padding: 10px 20px;
   border-radius: 20px;
-  background-color: #007bff;
-  color: #fff;
+  background-color: var(--color-brand-primary);
+  color: var(--color-neutral-90);
   cursor: pointer;
   transition: background-color 0.3s;
 }
 .like-btn:hover,
 .lng-btn:hover {
-  background-color: #0056b3;
+  background-color: var(--color-brand-primary-dark);
 }
 
 .like-container {
diff --git a/src/common/search/search.css b/src/common/search/search.css
index 4ae26f53c7..a648278547 100644
--- a/src/common/search/search.css
+++ b/src/common/search/search.css
@@ -174,7 +174,7 @@
 
   /* transform: translate(-30%, -30%); */
 
-  background: white;
+  background: var(--color-neutral-10);
   box-shadow: 0px 0 26px 0px rgba(var(--color-neutral-90-rgb), 0.62);
   -webkit-box-shadow: 0px 0 26px 0px rgba(var(--color-neutral-90-rgb), 0.62);
   -moz-box-shadow: 0px 0 26px 0px rgba(var(--color-neutral-90-rgb), 0.62);
diff --git a/src/common/theme/theme-context.jsx b/src/common/theme/theme-context.jsx
new file mode 100644
index 0000000000..4e3fb9060d
--- /dev/null
+++ b/src/common/theme/theme-context.jsx
@@ -0,0 +1,69 @@
+import React, { createContext, useCallback, useContext, useEffect, useMemo, useState } from 'react';
+
+const STORAGE_KEY = 'reactplay.theme';
+
+const ThemeModeContext = createContext(null);
+
+const getSystemTheme = () => {
+  if (typeof window === 'undefined') return 'light';
+
+  return window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches
+    ? 'dark'
+    : 'light';
+};
+
+const getInitialTheme = () => {
+  if (typeof window === 'undefined') return 'light';
+
+  const stored = window.localStorage.getItem(STORAGE_KEY);
+  if (stored === 'light' || stored === 'dark') return stored;
+
+  return getSystemTheme();
+};
+
+const applyThemeToDocument = (theme) => {
+  if (typeof document === 'undefined') return;
+
+  document.documentElement.setAttribute('data-theme', theme);
+};
+
+export const ThemeModeProvider = ({ children }) => {
+  const [theme, setTheme] = useState(getInitialTheme);
+
+  useEffect(() => {
+    applyThemeToDocument(theme);
+    window.localStorage.setItem(STORAGE_KEY, theme);
+  }, [theme]);
+
+  useEffect(() => {
+    // Keep in sync with system only until user picks explicitly.
+    const stored = window.localStorage.getItem(STORAGE_KEY);
+    if (stored === 'light' || stored === 'dark') return;
+
+    const mql = window.matchMedia?.('(prefers-color-scheme: dark)');
+    if (!mql) return;
+
+    const onChange = () => setTheme(getSystemTheme());
+    mql.addEventListener?.('change', onChange);
+
+    return () => mql.removeEventListener?.('change', onChange);
+  }, []);
+
+  const toggleTheme = useCallback(() => {
+    setTheme((t) => (t === 'dark' ? 'light' : 'dark'));
+  }, []);
+
+  const value = useMemo(() => ({ theme, setTheme, toggleTheme }), [theme, toggleTheme]);
+
+  return <ThemeModeContext.Provider value={value}>{children}</ThemeModeContext.Provider>;
+};
+
+export const useThemeMode = () => {
+  const ctx = useContext(ThemeModeContext);
+
+  if (!ctx) {
+    throw new Error('useThemeMode must be used within ThemeModeProvider');
+  }
+
+  return ctx;
+};
diff --git a/src/index.jsx b/src/index.jsx
index e7f29a3858..a51f1441c8 100644
--- a/src/index.jsx
+++ b/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 { ThemeModeProvider } from 'common/theme/theme-context';
 
 /** removing console statement in react prod build */
 /* eslint-disable no-console */
@@ -39,10 +40,12 @@ const Index = () => {
   return (
     // <React.StrictMode>
     <ErrorBoundry>
-      <SearchContextProvider value={value}>
-        <RouteDefs />
-        <Notification />
-      </SearchContextProvider>
+      <ThemeModeProvider>
+        <SearchContextProvider value={value}>
+          <RouteDefs />
+          <Notification />
+        </SearchContextProvider>
+      </ThemeModeProvider>
     </ErrorBoundry>
     // </React.StrictMode>
   );
