diff --git a/src/css/popup.css b/src/css/popup.css
index e928c03..0a95171 100644
--- a/src/css/popup.css
+++ b/src/css/popup.css
@@ -1,13 +1,65 @@
+:root {
+  --bg-color: #dfd9d99d;
+  --text-color: #000000;
+}
+
 body {
   width: 350px;
-  background-color: #dfd9d99d !important;
+  background-color: var(--bg-color) !important;
+  color: var(--text-color);
   padding: 10px;
   text-align: center;
-  transition: background-color 0.75s ease;
+  transition: background-color 0.75s ease, color 0.5s ease;
   font-size: 13px;
   font-family: 'Helvetica Neue', 'Lucida Grande', sans-serif;
 }
 
+body.dark {
+  --bg-color: #111111;
+  --text-color: #ffffff;
+}
+
+body.light {
+  --bg-color: #dfd9d99d;
+  --text-color: #000000;
+}
+
+body.dark,
+body.dark .ui.grid,
+body.dark .ui.grid .column,
+body.dark p,
+body.dark h1,
+body.dark h2,
+body.dark h3,
+body.dark h4,
+body.dark h5,
+body.dark .ui.header,
+body.dark label,
+body.dark .onboarding,
+body.dark #title,
+body.dark #caption,
+body.dark #repo_url {
+  color: var(--text-color) !important;
+}
+
+body.dark #p_solved_easy,
+body.dark #p_solved_medium,
+body.dark #p_solved_hard {
+  color: var(--text-color) !important;
+}
+
+body.dark .onboarding {
+  border-top-color: rgba(255, 255, 255, 0.3);
+}
+
+body.dark .collapsible-container {
+  border-color: rgba(255, 255, 255, 0.3);
+}
+
+body.dark code {
+  color: var(--text-color);
+}
+
 #title {
   font-family: 'Norwester', 'Helvetica Neue', 'Lucida Grande', sans-serif;
   font-size: 30px;
@@ -121,3 +173,42 @@ body {
   font-size: 14px;
   display: none;
 }
+
+.theme-toggle-footer {
+  display: flex;
+  justify-content: center;
+  padding: 6px 0 2px;
+  margin-top: 4px;
+}
+
+.theme-toggle-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 30px;
+  height: 30px;
+  padding: 0;
+  border: 1px solid rgba(0, 0, 0, 0.2);
+  border-radius: 50%;
+  background: transparent;
+  cursor: pointer;
+  color: var(--text-color);
+  transition: background-color 0.2s ease, border-color 0.2s ease;
+}
+
+.theme-toggle-btn:hover {
+  background-color: rgba(0, 0, 0, 0.08);
+}
+
+body.dark .theme-toggle-btn {
+  border-color: rgba(255, 255, 255, 0.25);
+}
+
+body.dark .theme-toggle-btn:hover {
+  background-color: rgba(255, 255, 255, 0.1);
+}
+
+.theme-toggle-btn .icon {
+  margin: 0;
+  font-size: 14px;
+}
diff --git a/src/css/welcome.css b/src/css/welcome.css
index 09c0daf..d9b5f1a 100644
--- a/src/css/welcome.css
+++ b/src/css/welcome.css
@@ -1,11 +1,41 @@
+:root {
+  --bg-color: #000000;
+  --text-color: #ffffff;
+}
+
 body {
-  background-color: #000000 !important;
+  background-color: var(--bg-color) !important;
+  color: var(--text-color);
   padding: 10px;
   text-align: center;
-  transition: background-color 0.75s ease;
+  transition: background-color 0.75s ease, color 0.5s ease;
   font-family: 'Helvetica Neue', 'Lucida Grande', sans-serif;
 }
 
+body.dark {
+  --bg-color: #000000;
+  --text-color: #ffffff;
+}
+
+body.light {
+  --bg-color: #ffffff;
+  --text-color: #000000;
+}
+
+body.dark,
+body.dark .ui.grid,
+body.dark .ui.grid .column,
+body.dark h1,
+body.dark h2,
+body.dark h3,
+body.dark h4,
+body.dark h5,
+body.dark .ui.header,
+body.dark .ui.form label,
+body.dark .caption {
+  color: var(--text-color) !important;
+}
+
 #title {
   font-family: 'Norwester', 'Helvetica Neue', 'Lucida Grande', sans-serif;
   font-size: 5em;
@@ -46,7 +76,7 @@ body {
 }
 
 p {
-  color: white !important;
+  color: var(--text-color) !important;
 }
 
 .onboarding {
@@ -60,3 +90,42 @@ a {
   color: white !important;
   cursor: pointer;
 }
+
+.theme-toggle-footer {
+  display: flex;
+  justify-content: center;
+  padding: 12px 0 8px;
+  margin-top: 8px;
+}
+
+.theme-toggle-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 36px;
+  height: 36px;
+  padding: 0;
+  border: 1px solid rgba(255, 255, 255, 0.25);
+  border-radius: 50%;
+  background: transparent;
+  cursor: pointer;
+  color: var(--text-color);
+  transition: background-color 0.2s ease, border-color 0.2s ease;
+}
+
+.theme-toggle-btn:hover {
+  background-color: rgba(255, 255, 255, 0.1);
+}
+
+body.light .theme-toggle-btn {
+  border-color: rgba(0, 0, 0, 0.2);
+}
+
+body.light .theme-toggle-btn:hover {
+  background-color: rgba(0, 0, 0, 0.08);
+}
+
+.theme-toggle-btn .icon {
+  margin: 0;
+  font-size: 16px;
+}
diff --git a/src/html/popup.html b/src/html/popup.html
index f8cadb7..a51c6b1 100644
--- a/src/html/popup.html
+++ b/src/html/popup.html
@@ -196,6 +196,12 @@ <h1 id="title">Leet<span style="color: #ff6c0a">Hub</span>-3.0</h1>
         </a>
         <a id="welcome_URL" href="" target="_blank"><i class="ui grey globe icon"></i></a>
       </div>
+
+      <div class="theme-toggle-footer">
+        <button id="theme-toggle" class="theme-toggle-btn" type="button" aria-label="Toggle theme">
+          <i id="theme-toggle-icon" class="moon icon"></i>
+        </button>
+      </div>
     </div>
 
     <script src="../js/oauth2.js"></script>
diff --git a/src/html/welcome.html b/src/html/welcome.html
index e7b35c0..25c194b 100644
--- a/src/html/welcome.html
+++ b/src/html/welcome.html
@@ -109,6 +109,12 @@
           >
         </div>
       </div>
+
+      <div class="theme-toggle-footer">
+        <button id="theme-toggle" class="theme-toggle-btn" type="button" aria-label="Toggle theme">
+          <i id="theme-toggle-icon" class="sun icon"></i>
+        </button>
+      </div>
     </div>
 
     <script type="text/javascript" src="../js/welcome.js"></script>
diff --git a/src/js/popup.js b/src/js/popup.js
index 8fc54cd..4424087 100644
--- a/src/js/popup.js
+++ b/src/js/popup.js
@@ -2,6 +2,30 @@
 
 let action = false;
 
+// Theme handling: load saved theme and wire toggle
+function applyTheme(theme) {
+  document.body.classList.remove('dark', 'light');
+  document.body.classList.add(theme);
+  const icon = document.getElementById('theme-toggle-icon');
+  if (icon) icon.className = theme === 'dark' ? 'sun icon' : 'moon icon';
+  const btn = document.getElementById('theme-toggle');
+  if (btn) {
+    btn.setAttribute('aria-label', theme === 'dark' ? 'Switch to light mode' : 'Switch to dark mode');
+  }
+}
+
+chrome.storage.local.get({ theme: 'light' }, data => {
+  const theme = data.theme || 'light';
+  applyTheme(theme);
+});
+
+$('#theme-toggle').on('click', () => {
+  chrome.storage.local.get({ theme: 'light' }, data => {
+    const next = data.theme === 'dark' ? 'light' : 'dark';
+    chrome.storage.local.set({ theme: next }, () => applyTheme(next));
+  });
+});
+
 $('#authenticate').on('click', () => {
   if (action) {
     oAuth2.begin();
diff --git a/src/js/welcome.js b/src/js/welcome.js
index 4a17c18..908390b 100644
--- a/src/js/welcome.js
+++ b/src/js/welcome.js
@@ -2,6 +2,30 @@ const option = () => {
   return $('#type').val();
 };
 
+// Theme handling for welcome page
+function applyThemeWelcome(theme) {
+  document.body.classList.remove('dark', 'light');
+  document.body.classList.add(theme);
+  const icon = document.getElementById('theme-toggle-icon');
+  if (icon) icon.className = theme === 'dark' ? 'sun icon' : 'moon icon';
+  const btn = document.getElementById('theme-toggle');
+  if (btn) {
+    btn.setAttribute('aria-label', theme === 'dark' ? 'Switch to light mode' : 'Switch to dark mode');
+  }
+}
+
+chrome.storage.local.get({ theme: 'dark' }, data => {
+  const theme = data.theme || 'dark';
+  applyThemeWelcome(theme);
+});
+
+$('#theme-toggle').on('click', () => {
+  chrome.storage.local.get({ theme: 'dark' }, data => {
+    const next = data.theme === 'dark' ? 'light' : 'dark';
+    chrome.storage.local.set({ theme: next }, () => applyThemeWelcome(next));
+  });
+});
+
 const repositoryName = () => {
   if (option() == 'new') return $('#name').val().trim();
   else return $('#existing_repo').val().trim();