From 2432fca523bc7e12352ae90b0dcd02cd09158b0d Mon Sep 17 00:00:00 2001
From: dev-minsoo <minsoo010@naver.com>
Date: Mon, 20 Apr 2026 21:27:39 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20=ED=8C=9D=EC=97=85=EA=B3=BC=20=EC=84=A4?=
 =?UTF-8?q?=EC=A0=95=20=ED=99=94=EB=A9=B4=EC=97=90=20=ED=85=8C=EB=A7=88=20?=
 =?UTF-8?q?=EB=AA=A8=EB=93=9C=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/options/Options.tsx  | 251 ++++++++++++++++++++++++++++++-----
 src/app/popup/Popup.tsx      | 193 +++++++++++++++++++++++----
 src/app/welcome/Welcome.tsx  | 104 +++++++++++++--
 src/core/storage/settings.ts |   2 +
 src/core/types/domain.ts     |   2 +
 src/shared/theme.ts          |  45 +++++++
 6 files changed, 526 insertions(+), 71 deletions(-)
 create mode 100644 src/shared/theme.ts

diff --git a/src/app/options/Options.tsx b/src/app/options/Options.tsx
index fe08ccc..3994e91 100644
--- a/src/app/options/Options.tsx
+++ b/src/app/options/Options.tsx
@@ -9,15 +9,18 @@ import type {
   Locale,
   PlatformId,
   RepositoryTemplateSegment,
+  ThemeMode,
 } from "../../core/types/domain";
 import type { RuntimeMessageResponse } from "../../core/types/messages";
 import { BrandWordmark } from "../../shared/components/BrandWordmark";
+import { useResolvedTheme } from "../../shared/theme";
 
 const ISSUE_URL = "https://github.com/dev-minsoo/AlgorithmHub/issues";
 const REPOSITORY_URL = "https://github.com/dev-minsoo/AlgorithmHub";
 
 const emptySettings: ExtensionSettings = {
   locale: "en",
+  themeMode: "system",
   github: {
     oauthClientId: "",
     token: "",
@@ -78,6 +81,10 @@ const OPTIONS_COPY = {
     noRepository: "No repository connected",
     connectHint: "Connect a repository from the welcome flow first.",
     solving: "Start solving problems right away:",
+    theme: "Theme",
+    themeSystem: "System",
+    themeLight: "Light",
+    themeDark: "Dark",
     language: "Language",
     autoUpload: "Auto Upload",
     enabled: "Enabled",
@@ -102,6 +109,10 @@ const OPTIONS_COPY = {
     noRepository: "연결된 저장소가 없습니다",
     connectHint: "먼저 welcome 화면에서 저장소를 연결하세요.",
     solving: "바로 문제를 풀어보세요:",
+    theme: "테마",
+    themeSystem: "System",
+    themeLight: "Light",
+    themeDark: "Dark",
     language: "언어",
     autoUpload: "자동 업로드",
     enabled: "활성화",
@@ -137,6 +148,7 @@ function PathTemplateCard({
   onToggleSegment,
   onToggleCombine,
   copy,
+  resolvedTheme,
 }: {
   platform: PlatformId;
   settings: ExtensionSettings;
@@ -152,6 +164,7 @@ function PathTemplateCard({
   ) => Promise<void>;
   onToggleCombine: (platform: PlatformId) => Promise<void>;
   copy: OptionsCopy;
+  resolvedTheme: "light" | "dark";
 }) {
   const template = settings.repositoryTemplate[platform];
   const previewPath = buildRepositoryDirectory(template, {
@@ -163,18 +176,40 @@ function PathTemplateCard({
   const fileName = platform === "leetcode" ? "solution.py" : "solution.js";
 
   return (
-    <div className="rounded-[20px] border border-stone-800 bg-stone-900/60 p-5">
+    <div
+      className={`rounded-[20px] border p-5 ${
+        resolvedTheme === "dark"
+          ? "border-stone-800 bg-stone-900/60"
+          : "border-amber-300 bg-white"
+      }`}
+    >
       <p className="text-xs font-semibold uppercase tracking-[0.2em] text-stone-500">
         {platform === "leetcode" ? copy.templateLeetCode : copy.templateProgrammers}
       </p>
-      <p className="mt-2 text-sm leading-6 text-stone-400">
+      <p
+        className={`mt-2 text-sm leading-6 ${
+          resolvedTheme === "dark" ? "text-stone-400" : "text-stone-700"
+        }`}
+      >
         {copy.templateHint}
       </p>
 
-      <div className="mt-4 rounded-[14px] border border-stone-800 bg-stone-950/70 px-4 py-3">
+      <div
+        className={`mt-4 rounded-[14px] border px-4 py-3 ${
+          resolvedTheme === "dark"
+            ? "border-stone-800 bg-stone-950/70"
+            : "border-amber-300 bg-amber-50"
+        }`}
+      >
         <div className="flex items-center justify-between gap-4">
           <div>
-            <p className="text-sm font-semibold text-stone-100">{copy.combine}</p>
+            <p
+              className={`text-sm font-semibold ${
+                resolvedTheme === "dark" ? "text-stone-100" : "text-stone-900"
+              }`}
+            >
+              {copy.combine}
+            </p>
           </div>
           <button
             className={`relative h-7 w-12 rounded-full transition ${
@@ -206,8 +241,12 @@ function PathTemplateCard({
               key={`${platform}:${segment}`}
               className={`flex items-center justify-between rounded-[14px] border px-4 py-3 transition ${
                 active
-                  ? "border-stone-700 bg-stone-950/80"
-                  : "border-stone-800 bg-stone-950/40"
+                  ? resolvedTheme === "dark"
+                    ? "border-stone-700 bg-stone-950/80"
+                    : "border-amber-300 bg-white"
+                  : resolvedTheme === "dark"
+                    ? "border-stone-800 bg-stone-950/40"
+                    : "border-amber-200 bg-amber-50/70"
               }`}
               draggable={active}
               onDragStart={() => {
@@ -246,13 +285,23 @@ function PathTemplateCard({
               <div className="flex items-center gap-3">
                 <span
                   className={`text-base ${
-                    active ? "cursor-grab text-stone-500" : "text-stone-700"
+                    active
+                      ? resolvedTheme === "dark"
+                        ? "cursor-grab text-stone-500"
+                        : "cursor-grab text-stone-400"
+                      : resolvedTheme === "dark"
+                        ? "text-stone-700"
+                        : "text-stone-300"
                   }`}
                   aria-hidden="true"
                 >
                   ≡
                 </span>
-                <span className="text-sm font-semibold text-stone-100">
+                <span
+                  className={`text-sm font-semibold ${
+                    resolvedTheme === "dark" ? "text-stone-100" : "text-stone-900"
+                  }`}
+                >
                   {TEMPLATE_SEGMENT_LABELS[segment]}
                 </span>
               </div>
@@ -277,7 +326,13 @@ function PathTemplateCard({
         })}
       </div>
 
-      <div className="mt-4 rounded-[14px] border border-stone-800 bg-stone-950/80 px-4 py-3 text-sm leading-6 text-stone-200">
+      <div
+        className={`mt-4 rounded-[14px] border px-4 py-3 text-sm leading-6 ${
+          resolvedTheme === "dark"
+            ? "border-stone-800 bg-stone-950/80 text-stone-200"
+            : "border-amber-300 bg-amber-50 text-stone-900"
+        }`}
+      >
         {previewPath}/{fileName}
       </div>
     </div>
@@ -429,9 +484,38 @@ export default function Options() {
 
   const isConnected = Boolean(settings.github.repository.trim());
   const copy = OPTIONS_COPY[settings.locale];
+  const resolvedTheme = useResolvedTheme(settings.themeMode);
+
+  async function handleChangeTheme(themeMode: ThemeMode) {
+    const response = (await chrome.runtime.sendMessage({
+      type: "SAVE_SETTINGS",
+      settings: { themeMode },
+    })) as RuntimeMessageResponse;
+
+    if (response.type === "SETTINGS_SAVED") {
+      setSettings(response.settings);
+    }
+  }
+
+  const pageClass =
+    resolvedTheme === "dark"
+      ? "min-h-screen bg-[radial-gradient(circle_at_top,_rgba(251,191,36,0.16),_transparent_30%),linear-gradient(180deg,_#140f0c,_#060606)] text-stone-100"
+      : "min-h-screen bg-[radial-gradient(circle_at_top,_rgba(251,191,36,0.16),_transparent_30%),linear-gradient(180deg,_#fcf5e8,_#fffdf8)] text-stone-900";
+  const shellClass =
+    resolvedTheme === "dark"
+      ? "border-amber-950/60 bg-[linear-gradient(180deg,rgba(41,24,13,0.92),rgba(12,12,12,0.94))] shadow-[0_24px_80px_rgba(0,0,0,0.45)]"
+      : "border-amber-300 bg-[linear-gradient(180deg,rgba(255,255,255,0.99),rgba(255,247,232,0.98))] shadow-[0_24px_64px_rgba(180,120,0,0.10)]";
+  const cardClass =
+    resolvedTheme === "dark"
+      ? "border-stone-800 bg-stone-950/60"
+      : "border-amber-300 bg-white";
+  const rowClass =
+    resolvedTheme === "dark"
+      ? "border-stone-800 bg-stone-900/70"
+      : "border-amber-300 bg-amber-50/85";
 
   return (
-    <div className="min-h-screen bg-[radial-gradient(circle_at_top,_rgba(251,191,36,0.16),_transparent_30%),linear-gradient(180deg,_#140f0c,_#060606)] text-stone-100">
+    <div className={pageClass}>
       <div className="mx-auto max-w-5xl px-4 py-10">
         <header className="mb-8">
           <p className="text-xs font-semibold uppercase tracking-[0.28em] text-amber-400">
@@ -440,20 +524,42 @@ export default function Options() {
           <div className="mt-3">
             <BrandWordmark size="lg" />
           </div>
-          <p className="mt-2 text-sm leading-6 text-stone-400">
+          <p
+            className={`mt-2 text-sm leading-6 ${
+              resolvedTheme === "dark" ? "text-stone-400" : "text-stone-700"
+            }`}
+          >
             {copy.description}
           </p>
         </header>
 
-        <section className="rounded-[28px] border border-amber-950/60 bg-[linear-gradient(180deg,rgba(41,24,13,0.92),rgba(12,12,12,0.94))] p-5 shadow-[0_24px_80px_rgba(0,0,0,0.45)] sm:p-6">
-          <div className="rounded-[22px] border border-emerald-900/50 bg-emerald-950/30 p-6">
-            <p className="text-xs font-semibold uppercase tracking-[0.24em] text-emerald-400">
+        <section className={`rounded-[28px] border p-5 sm:p-6 ${shellClass}`}>
+          <div
+            className={`rounded-[22px] border p-6 ${
+              resolvedTheme === "dark"
+                ? "border-emerald-900/50 bg-emerald-950/30"
+                : "border-emerald-300 bg-emerald-50"
+            }`}
+          >
+            <p
+              className={`text-xs font-semibold uppercase tracking-[0.24em] ${
+                resolvedTheme === "dark" ? "text-emerald-400" : "text-emerald-700"
+              }`}
+            >
               {copy.connected}
             </p>
             {isConnected ? (
-              <p className="mt-3 break-all text-lg font-medium text-stone-50">
+              <p
+                className={`mt-3 break-all text-lg font-medium ${
+                  resolvedTheme === "dark" ? "text-stone-50" : "text-stone-900"
+                }`}
+              >
                 <a
-                  className="underline decoration-emerald-700 underline-offset-4 transition hover:text-emerald-200"
+                  className={`underline underline-offset-4 transition ${
+                    resolvedTheme === "dark"
+                      ? "decoration-emerald-700 hover:text-emerald-200"
+                      : "decoration-emerald-500 hover:text-emerald-800"
+                  }`}
                   href={`https://github.com/${settings.github.repository}`}
                   target="_blank"
                   rel="noreferrer"
@@ -462,22 +568,38 @@ export default function Options() {
                 </a>
               </p>
             ) : (
-              <p className="mt-3 break-all text-lg font-medium text-stone-50">
+              <p
+                className={`mt-3 break-all text-lg font-medium ${
+                  resolvedTheme === "dark" ? "text-stone-50" : "text-stone-900"
+                }`}
+              >
                 {copy.noRepository}
               </p>
             )}
             {!isConnected ? (
-              <p className="mt-1 text-sm text-stone-500">
+              <p
+                className={`mt-1 text-sm ${
+                  resolvedTheme === "dark" ? "text-stone-500" : "text-stone-600"
+                }`}
+              >
                 {copy.connectHint}
               </p>
             ) : null}
 
             <div className="mt-5 flex flex-wrap items-center gap-4 text-sm">
-              <p className="text-sm text-stone-300">
+              <p
+                className={`text-sm ${
+                  resolvedTheme === "dark" ? "text-stone-300" : "text-stone-700"
+                }`}
+              >
                 {copy.solving}
               </p>
               <a
-                className="font-medium text-cyan-300 transition hover:text-cyan-200"
+                className={`font-medium transition ${
+                  resolvedTheme === "dark"
+                    ? "text-cyan-300 hover:text-cyan-200"
+                    : "text-cyan-700 hover:text-cyan-800"
+                }`}
                 href="https://leetcode.com/"
                 target="_blank"
                 rel="noreferrer"
@@ -485,7 +607,11 @@ export default function Options() {
                 LeetCode
               </a>
               <a
-                className="font-medium text-cyan-300 transition hover:text-cyan-200"
+                className={`font-medium transition ${
+                  resolvedTheme === "dark"
+                    ? "text-cyan-300 hover:text-cyan-200"
+                    : "text-cyan-700 hover:text-cyan-800"
+                }`}
                 href="https://school.programmers.co.kr/learn/challenges"
                 target="_blank"
                 rel="noreferrer"
@@ -495,10 +621,14 @@ export default function Options() {
             </div>
           </div>
 
-          <div className="mt-5 rounded-[22px] border border-stone-800 bg-stone-950/60 p-5">
+          <div className={`mt-5 rounded-[22px] border p-5 ${cardClass}`}>
             <div className="space-y-4">
-              <div className="flex min-h-[60px] items-center justify-between gap-4 rounded-[16px] border border-stone-800 bg-stone-900/70 px-4 py-4">
-                <p className="text-sm font-medium text-stone-100">
+              <div className={`flex min-h-[60px] items-center justify-between gap-4 rounded-[16px] border px-4 py-4 ${rowClass}`}>
+                <p
+                  className={`text-sm font-medium ${
+                    resolvedTheme === "dark" ? "text-stone-100" : "text-stone-900"
+                  }`}
+                >
                   {copy.autoUpload} {extensionEnabled ? copy.enabled : copy.disabled}
                 </p>
                 <button
@@ -517,12 +647,45 @@ export default function Options() {
                 </button>
               </div>
 
-              <div className="flex min-h-[60px] items-center justify-between gap-4 rounded-[16px] border border-stone-800 bg-stone-900/70 px-4 py-4">
-                <span className="text-sm font-medium text-stone-100">
+              <div className={`flex min-h-[60px] items-center justify-between gap-4 rounded-[16px] border px-4 py-4 ${rowClass}`}>
+                <span
+                  className={`text-sm font-medium ${
+                    resolvedTheme === "dark" ? "text-stone-100" : "text-stone-900"
+                  }`}
+                >
+                  {copy.theme}
+                </span>
+                <select
+                  className={`h-[44px] w-[132px] rounded-[14px] border px-3 text-sm outline-none transition ${
+                    resolvedTheme === "dark"
+                      ? "border-stone-800 bg-stone-950/80 text-stone-100 focus:border-amber-400"
+                      : "border-amber-300 bg-white text-stone-900 focus:border-amber-600"
+                  }`}
+                  value={settings.themeMode}
+                  onChange={(event) =>
+                    void handleChangeTheme(event.target.value as ThemeMode)
+                  }
+                >
+                  <option value="system">{copy.themeSystem}</option>
+                  <option value="light">{copy.themeLight}</option>
+                  <option value="dark">{copy.themeDark}</option>
+                </select>
+              </div>
+
+              <div className={`flex min-h-[60px] items-center justify-between gap-4 rounded-[16px] border px-4 py-4 ${rowClass}`}>
+                <span
+                  className={`text-sm font-medium ${
+                    resolvedTheme === "dark" ? "text-stone-100" : "text-stone-900"
+                  }`}
+                >
                   {copy.language}
                 </span>
                 <select
-                  className="h-[44px] w-[132px] rounded-[14px] border border-stone-800 bg-stone-950/80 px-3 text-sm text-stone-100 outline-none transition focus:border-amber-400"
+                  className={`h-[44px] w-[132px] rounded-[14px] border px-3 text-sm outline-none transition ${
+                    resolvedTheme === "dark"
+                      ? "border-stone-800 bg-stone-950/80 text-stone-100 focus:border-amber-400"
+                      : "border-amber-300 bg-white text-stone-900 focus:border-amber-600"
+                  }`}
                   value={settings.locale}
                   onChange={(event) =>
                     void handleChangeLocale(event.target.value as Locale)
@@ -535,7 +698,7 @@ export default function Options() {
             </div>
           </div>
 
-          <div className="mt-5 rounded-[22px] border border-stone-800 bg-stone-950/60 p-5">
+          <div className={`mt-5 rounded-[22px] border p-5 ${cardClass}`}>
             <button
               className="flex w-full items-start justify-between gap-4 text-left"
               onClick={() => setTemplatesOpen((current) => !current)}
@@ -545,10 +708,18 @@ export default function Options() {
                 <p className="text-xs font-semibold uppercase tracking-[0.24em] text-amber-400">
                   {copy.templatesEyebrow}
                 </p>
-                <p className="mt-2 text-lg font-medium text-stone-50">
+                <p
+                  className={`mt-2 text-lg font-medium ${
+                    resolvedTheme === "dark" ? "text-stone-50" : "text-stone-900"
+                  }`}
+                >
                   {copy.templatesTitle}
                 </p>
-                <p className="mt-2 max-w-3xl text-sm leading-6 text-stone-400">
+                <p
+                  className={`mt-2 max-w-3xl text-sm leading-6 ${
+                    resolvedTheme === "dark" ? "text-stone-400" : "text-stone-700"
+                  }`}
+                >
                   {copy.templatesDescription}
                 </p>
               </div>
@@ -575,6 +746,7 @@ export default function Options() {
                   onToggleSegment={toggleTemplateSegment}
                   onToggleCombine={toggleCombineIdTitle}
                   copy={copy}
+                  resolvedTheme={resolvedTheme}
                 />
                 <PathTemplateCard
                   platform="programmers"
@@ -585,6 +757,7 @@ export default function Options() {
                   onToggleSegment={toggleTemplateSegment}
                   onToggleCombine={toggleCombineIdTitle}
                   copy={copy}
+                  resolvedTheme={resolvedTheme}
                 />
               </div>
             ) : null}
@@ -592,7 +765,11 @@ export default function Options() {
 
           <div className="mt-6 flex items-center justify-between gap-3">
             <button
-              className="rounded-[16px] border border-red-900/70 bg-red-950/30 px-5 py-3 text-sm font-semibold text-red-100 transition hover:border-red-700 disabled:cursor-not-allowed disabled:opacity-60"
+              className={`rounded-[16px] border px-5 py-3 text-sm font-semibold transition disabled:cursor-not-allowed disabled:opacity-60 ${
+                resolvedTheme === "dark"
+                  ? "border-red-900/70 bg-red-950/30 text-red-100 hover:border-red-700"
+                  : "border-red-300 bg-red-50 text-red-700 hover:border-red-400 hover:bg-red-100 hover:text-red-800"
+              }`}
               onClick={() => void disconnectRepository()}
               disabled={!isConnected}
             >
@@ -600,7 +777,11 @@ export default function Options() {
             </button>
             <div className="flex items-center gap-4">
               <a
-                className="text-sm font-medium text-cyan-300 transition hover:text-cyan-200"
+                className={`text-sm font-medium transition ${
+                  resolvedTheme === "dark"
+                    ? "text-cyan-300 hover:text-cyan-200"
+                    : "text-cyan-700 hover:text-cyan-800"
+                }`}
                 href={REPOSITORY_URL}
                 target="_blank"
                 rel="noreferrer"
@@ -608,7 +789,11 @@ export default function Options() {
                 {copy.star}
               </a>
               <a
-                className="text-sm font-medium text-stone-400 transition hover:text-amber-300"
+                className={`text-sm font-medium transition ${
+                  resolvedTheme === "dark"
+                    ? "text-stone-400 hover:text-amber-300"
+                    : "text-stone-600 hover:text-amber-700"
+                }`}
                 href={ISSUE_URL}
                 target="_blank"
                 rel="noreferrer"
diff --git a/src/app/popup/Popup.tsx b/src/app/popup/Popup.tsx
index 85032bb..e385cc4 100644
--- a/src/app/popup/Popup.tsx
+++ b/src/app/popup/Popup.tsx
@@ -1,8 +1,13 @@
 import { useEffect, useState } from "react";
 import type { ReactNode } from "react";
-import type { ExtensionSettings, Locale } from "../../core/types/domain";
+import type {
+  ExtensionSettings,
+  Locale,
+  ThemeMode,
+} from "../../core/types/domain";
 import type { RuntimeMessageResponse } from "../../core/types/messages";
 import { BrandWordmark } from "../../shared/components/BrandWordmark";
+import { useResolvedTheme } from "../../shared/theme";
 
 function openOptions(hash = "") {
   const url = chrome.runtime.getURL(`options.html${hash}`);
@@ -36,6 +41,7 @@ const POPUP_COPY = {
     report: "Report",
     openGitHub: "Open GitHub",
     openSettings: "Open settings",
+    toggleTheme: "Toggle theme",
   },
   ko: {
     subtitle: "코드를 GitHub에 동기화하세요",
@@ -55,6 +61,7 @@ const POPUP_COPY = {
     report: "제보",
     openGitHub: "GitHub 열기",
     openSettings: "설정 열기",
+    toggleTheme: "테마 전환",
   },
 } as const;
 
@@ -66,14 +73,16 @@ function IconButton({
   title,
   onClick,
   children,
+  className = "",
 }: {
   title: string;
   onClick: () => void;
   children: ReactNode;
+  className?: string;
 }) {
   return (
     <button
-      className="flex h-9 w-9 items-center justify-center rounded-full border border-stone-800 bg-stone-900 text-stone-200 transition hover:border-amber-400 hover:text-amber-300"
+      className={`flex h-9 w-9 items-center justify-center rounded-full border transition ${className}`}
       title={title}
       onClick={onClick}
     >
@@ -110,6 +119,27 @@ function SettingsIcon() {
   );
 }
 
+function SunIcon() {
+  return (
+    <svg viewBox="0 0 24 24" className="h-4 w-4 stroke-current" fill="none" aria-hidden="true">
+      <circle cx="12" cy="12" r="4" strokeWidth="1.6" />
+      <path
+        d="M12 2.5v2.2M12 19.3v2.2M4.7 4.7l1.6 1.6M17.7 17.7l1.6 1.6M2.5 12h2.2M19.3 12h2.2M4.7 19.3l1.6-1.6M17.7 6.3l1.6-1.6"
+        strokeWidth="1.6"
+        strokeLinecap="round"
+      />
+    </svg>
+  );
+}
+
+function MoonIcon() {
+  return (
+    <svg viewBox="0 0 24 24" className="h-4 w-4 fill-current" aria-hidden="true">
+      <path d="M20.2 14.1A8.5 8.5 0 0 1 9.9 3.8a.6.6 0 0 0-.75-.75A9.5 9.5 0 1 0 20.95 14.9a.6.6 0 0 0-.75-.8Z" />
+    </svg>
+  );
+}
+
 export default function Popup() {
   const [settings, setSettings] = useState<ExtensionSettings | null>(null);
   const [extensionEnabled, setExtensionEnabled] = useState(true);
@@ -128,13 +158,54 @@ export default function Popup() {
         setExtensionEnabled(stored.extensionEnabled);
       }
     });
+
+    const handleStorageChange: Parameters<
+      typeof chrome.storage.onChanged.addListener
+    >[0] = (changes, areaName) => {
+      if (areaName !== "local") {
+        return;
+      }
+
+      if (changes.settings?.newValue) {
+        setSettings(changes.settings.newValue as ExtensionSettings);
+      }
+
+      if (typeof changes.extensionEnabled?.newValue === "boolean") {
+        setExtensionEnabled(changes.extensionEnabled.newValue);
+      }
+    };
+
+    chrome.storage.onChanged.addListener(handleStorageChange);
+
+    return () => {
+      chrome.storage.onChanged.removeListener(handleStorageChange);
+    };
   }, []);
 
   const hasToken = Boolean(settings?.github.token.trim());
   const hasRepository = Boolean(settings?.github.repository.trim());
   const locale = settings?.locale ?? "en";
+  const themeMode = settings?.themeMode ?? "system";
+  const resolvedTheme = useResolvedTheme(themeMode);
   const copy = POPUP_COPY[locale];
 
+  async function handleChangeTheme(nextThemeMode: ThemeMode) {
+    const response = (await chrome.runtime.sendMessage({
+      type: "SAVE_SETTINGS",
+      settings: { themeMode: nextThemeMode },
+    })) as RuntimeMessageResponse;
+
+    if (response.type === "SETTINGS_SAVED") {
+      setSettings(response.settings);
+    }
+  }
+
+  async function handleToggleTheme() {
+    const nextThemeMode =
+      resolvedTheme === "dark" ? ("light" as ThemeMode) : ("dark" as ThemeMode);
+    await handleChangeTheme(nextThemeMode);
+  }
+
   async function handleToggleEnabled() {
     const nextValue = !extensionEnabled;
     setExtensionEnabled(nextValue);
@@ -173,31 +244,75 @@ export default function Popup() {
     await openExternal("https://github.com/dev-minsoo/AlgorithmHub");
   }
 
+  const shellClass =
+    resolvedTheme === "dark"
+      ? "bg-[radial-gradient(circle_at_20%_0%,_rgba(251,191,36,0.18),_transparent_34%),radial-gradient(circle_at_100%_100%,_rgba(245,158,11,0.14),_transparent_38%),linear-gradient(180deg,_#19110b,_#090909)] text-stone-100"
+      : "bg-[radial-gradient(circle_at_20%_0%,_rgba(251,191,36,0.18),_transparent_32%),radial-gradient(circle_at_100%_100%,_rgba(245,158,11,0.10),_transparent_36%),linear-gradient(180deg,_#fdf6e8,_#fffdf8)] text-stone-900";
+  const cardClass =
+    resolvedTheme === "dark"
+      ? "border-amber-950/60 bg-[linear-gradient(180deg,rgba(41,24,13,0.96),rgba(10,10,10,0.96))] shadow-[0_20px_60px_rgba(0,0,0,0.5)]"
+      : "border-amber-300 bg-[linear-gradient(180deg,rgba(255,255,255,0.99),rgba(255,247,232,0.98))] shadow-[0_18px_48px_rgba(180,120,0,0.12)]";
+  const panelClass =
+    resolvedTheme === "dark"
+      ? "border-stone-800 bg-stone-900/80"
+      : "border-amber-300 bg-white";
+  const mutedTextClass =
+    resolvedTheme === "dark" ? "text-stone-400" : "text-stone-700";
+  const secondaryTextClass =
+    resolvedTheme === "dark" ? "text-stone-500" : "text-stone-600";
+  const iconButtonClass =
+    resolvedTheme === "dark"
+      ? "border-stone-800 bg-stone-900 text-stone-200 hover:border-amber-400 hover:text-amber-300"
+      : "border-amber-300 bg-white text-stone-800 hover:border-amber-500 hover:text-amber-800";
+
   return (
-    <div className="w-[420px] bg-[radial-gradient(circle_at_20%_0%,_rgba(251,191,36,0.18),_transparent_34%),radial-gradient(circle_at_100%_100%,_rgba(245,158,11,0.14),_transparent_38%),linear-gradient(180deg,_#19110b,_#090909)] text-stone-100">
+    <div className={`w-[420px] ${shellClass}`}>
       <div className="w-full p-3">
-        <div className="rounded-[22px] border border-amber-950/60 bg-[linear-gradient(180deg,rgba(41,24,13,0.96),rgba(10,10,10,0.96))] p-4 shadow-[0_20px_60px_rgba(0,0,0,0.5)] backdrop-blur">
+        <div className={`rounded-[22px] border p-4 backdrop-blur ${cardClass}`}>
           <div className="flex items-start justify-between gap-3">
             <div className="min-w-0">
               <BrandWordmark size="sm" />
-              <p className="mt-1.5 text-[13px] leading-5 text-stone-400">
+              <p className={`mt-1.5 text-[13px] leading-5 ${mutedTextClass}`}>
                 {copy.subtitle}
               </p>
             </div>
 
             <div className="flex items-center gap-2">
-              <IconButton title={copy.openGitHub} onClick={handleOpenGitHub}>
+              <IconButton
+                title={copy.openGitHub}
+                onClick={handleOpenGitHub}
+                className={iconButtonClass}
+              >
                 <GitHubIcon />
               </IconButton>
-              <IconButton title={copy.openSettings} onClick={() => openOptions()}>
+              <IconButton
+                title={copy.openSettings}
+                onClick={() => openOptions()}
+                className={iconButtonClass}
+              >
                 <SettingsIcon />
               </IconButton>
-              <div className="flex items-center rounded-full border border-stone-800 bg-stone-900 p-1 text-[11px] font-semibold text-stone-300">
+              <IconButton
+                title={copy.toggleTheme}
+                onClick={() => void handleToggleTheme()}
+                className={iconButtonClass}
+              >
+                {resolvedTheme === "dark" ? <SunIcon /> : <MoonIcon />}
+              </IconButton>
+              <div
+                className={`flex items-center rounded-full border p-1 text-[11px] font-semibold ${
+                  resolvedTheme === "dark"
+                    ? "border-stone-800 bg-stone-900 text-stone-300"
+                    : "border-amber-300 bg-white text-stone-700"
+                }`}
+              >
                 <button
                   className={`rounded-full px-2 py-1 transition ${
                     locale === "ko"
-                      ? "bg-amber-400/15 text-amber-200"
-                      : "hover:text-stone-100"
+                      ? "bg-amber-400/15 text-amber-700"
+                      : resolvedTheme === "dark"
+                        ? "hover:text-stone-100"
+                        : "hover:text-stone-900"
                   }`}
                   onClick={() => void handleChangeLocale("ko")}
                 >
@@ -206,8 +321,10 @@ export default function Popup() {
                 <button
                   className={`rounded-full px-2 py-1 transition ${
                     locale === "en"
-                      ? "bg-amber-400/15 text-amber-200"
-                      : "hover:text-stone-100"
+                      ? "bg-amber-400/15 text-amber-700"
+                      : resolvedTheme === "dark"
+                        ? "hover:text-stone-100"
+                        : "hover:text-stone-900"
                   }`}
                   onClick={() => void handleChangeLocale("en")}
                 >
@@ -218,12 +335,16 @@ export default function Popup() {
           </div>
 
           {!hasToken ? (
-            <section className="mt-4 rounded-[18px] border border-stone-800 bg-stone-900/80 p-4">
+            <section className={`mt-4 rounded-[18px] border p-4 ${panelClass}`}>
               <div className="space-y-2">
-                <p className="whitespace-nowrap text-sm font-medium text-stone-200">
+                <p
+                  className={`whitespace-nowrap text-sm font-medium ${
+                    resolvedTheme === "dark" ? "text-stone-200" : "text-stone-900"
+                  }`}
+                >
                   {copy.authTitle}
                 </p>
-                <p className="text-[13px] leading-5 text-stone-500">
+                <p className={`text-[13px] leading-5 ${secondaryTextClass}`}>
                   {copy.authDescription}
                 </p>
               </div>
@@ -237,12 +358,16 @@ export default function Popup() {
               </button>
             </section>
           ) : !hasRepository ? (
-            <section className="mt-4 rounded-[18px] border border-stone-800 bg-stone-900/80 p-4">
+            <section className={`mt-4 rounded-[18px] border p-4 ${panelClass}`}>
               <div className="space-y-2">
-                <p className="whitespace-nowrap text-sm font-medium text-stone-200">
+                <p
+                  className={`whitespace-nowrap text-sm font-medium ${
+                    resolvedTheme === "dark" ? "text-stone-200" : "text-stone-900"
+                  }`}
+                >
                   {copy.connectTitle}
                 </p>
-                <p className="text-[13px] leading-5 text-stone-500">
+                <p className={`text-[13px] leading-5 ${secondaryTextClass}`}>
                   {copy.connectDescription}
                 </p>
               </div>
@@ -256,19 +381,37 @@ export default function Popup() {
               </button>
             </section>
           ) : (
-            <section className="mt-4 rounded-[18px] border border-emerald-900/50 bg-emerald-950/30 p-4">
-              <p className="text-xs font-semibold uppercase tracking-[0.24em] text-emerald-400">
+            <section
+              className={`mt-4 rounded-[18px] border p-4 ${
+                resolvedTheme === "dark"
+                  ? "border-emerald-900/50 bg-emerald-950/30"
+                  : "border-emerald-300 bg-emerald-50"
+              }`}
+            >
+              <p
+                className={`text-xs font-semibold uppercase tracking-[0.24em] ${
+                  resolvedTheme === "dark" ? "text-emerald-400" : "text-emerald-700"
+                }`}
+              >
                 {copy.connected}
               </p>
-              <p className="mt-2 break-all text-[15px] font-medium text-stone-50">
+              <p
+                className={`mt-2 break-all text-[15px] font-medium ${
+                  resolvedTheme === "dark" ? "text-stone-50" : "text-stone-900"
+                }`}
+              >
                 {settings?.github.repository}
               </p>
             </section>
           )}
 
           {hasRepository ? (
-            <div className="mt-4 flex items-center justify-between rounded-[16px] border border-stone-800 bg-stone-900/70 px-4 py-3">
-              <p className="text-sm font-medium text-stone-100">
+            <div className={`mt-4 flex items-center justify-between rounded-[16px] border px-4 py-3 ${panelClass}`}>
+              <p
+                className={`text-sm font-medium ${
+                  resolvedTheme === "dark" ? "text-stone-100" : "text-stone-900"
+                }`}
+              >
                 {copy.autoUpload} {extensionEnabled ? copy.enabled : copy.disabled}
               </p>
 
@@ -290,7 +433,7 @@ export default function Popup() {
 
           <div className={`${hasRepository ? "mt-3" : "mt-4"} flex items-center justify-end gap-3`}>
             <a
-              className="text-xs font-medium text-stone-400 transition hover:text-amber-300"
+              className={`text-xs font-medium transition hover:text-amber-300 ${mutedTextClass}`}
               href={REPOSITORY_URL}
               target="_blank"
               rel="noreferrer"
@@ -298,7 +441,7 @@ export default function Popup() {
               {copy.star}
             </a>
             <a
-              className="text-xs font-medium text-stone-400 transition hover:text-amber-300"
+              className={`text-xs font-medium transition hover:text-amber-300 ${mutedTextClass}`}
               href={ISSUE_URL}
               target="_blank"
               rel="noreferrer"
diff --git a/src/app/welcome/Welcome.tsx b/src/app/welcome/Welcome.tsx
index efdbfcc..8c9bcdc 100644
--- a/src/app/welcome/Welcome.tsx
+++ b/src/app/welcome/Welcome.tsx
@@ -4,11 +4,13 @@ import { getCachedGitHubRepositories } from "../../core/storage/repositories";
 import type { ExtensionSettings, RepositoryInfo } from "../../core/types/domain";
 import type { RuntimeMessageResponse } from "../../core/types/messages";
 import { BrandWordmark } from "../../shared/components/BrandWordmark";
+import { useResolvedTheme } from "../../shared/theme";
 
 type RepoMode = "" | "new" | "link";
 
 const emptySettings: ExtensionSettings = {
   locale: "en",
+  themeMode: "system",
   github: {
     oauthClientId: "",
     token: "",
@@ -67,6 +69,7 @@ export default function Welcome() {
   const [selectedRepository, setSelectedRepository] = useState("");
   const [message, setMessage] = useState("");
   const [submitting, setSubmitting] = useState(false);
+  const resolvedTheme = useResolvedTheme(settings.themeMode);
 
   const loadRepositories = useCallback(async (token = settings.github.token) => {
     if (!token.trim()) {
@@ -132,6 +135,24 @@ export default function Welcome() {
           }
         }
       })();
+
+    const handleStorageChange: Parameters<
+      typeof chrome.storage.onChanged.addListener
+    >[0] = (changes, areaName) => {
+      if (areaName !== "local") {
+        return;
+      }
+
+      if (changes.settings?.newValue) {
+        setSettings(changes.settings.newValue as ExtensionSettings);
+      }
+    };
+
+    chrome.storage.onChanged.addListener(handleStorageChange);
+
+    return () => {
+      chrome.storage.onChanged.removeListener(handleStorageChange);
+    };
   }, [loadRepositories]);
 
   async function handleAuthenticateGitHub() {
@@ -204,19 +225,40 @@ export default function Welcome() {
     (mode === "new" && !repositoryName.trim()) ||
     (mode === "link" && !selectedRepository.trim());
 
+  const pageClass =
+    resolvedTheme === "dark"
+      ? "min-h-screen bg-[radial-gradient(circle_at_20%_0%,_rgba(251,191,36,0.16),_transparent_34%),radial-gradient(circle_at_100%_100%,_rgba(245,158,11,0.12),_transparent_38%),linear-gradient(180deg,_#19110b,_#090909)] text-stone-100"
+      : "min-h-screen bg-[radial-gradient(circle_at_20%_0%,_rgba(251,191,36,0.16),_transparent_32%),radial-gradient(circle_at_100%_100%,_rgba(245,158,11,0.10),_transparent_36%),linear-gradient(180deg,_#fcf5e8,_#fffdf8)] text-stone-900";
+  const shellClass =
+    resolvedTheme === "dark"
+      ? "border-amber-950/60 bg-[linear-gradient(180deg,rgba(41,24,13,0.96),rgba(10,10,10,0.96))] shadow-[0_24px_80px_rgba(0,0,0,0.5)]"
+      : "border-amber-300 bg-[linear-gradient(180deg,rgba(255,255,255,0.99),rgba(255,247,232,0.98))] shadow-[0_24px_64px_rgba(180,120,0,0.10)]";
+  const panelClass =
+    resolvedTheme === "dark"
+      ? "border-stone-800 bg-stone-950/60"
+      : "border-amber-300 bg-white";
+
   return (
-    <main className="min-h-screen bg-[radial-gradient(circle_at_20%_0%,_rgba(251,191,36,0.16),_transparent_34%),radial-gradient(circle_at_100%_100%,_rgba(245,158,11,0.12),_transparent_38%),linear-gradient(180deg,_#19110b,_#090909)] px-6 py-10 text-stone-100">
+    <main className={`${pageClass} px-6 py-10`}>
       <div className="mx-auto max-w-3xl">
-        <section className="rounded-[32px] border border-amber-950/60 bg-[linear-gradient(180deg,rgba(41,24,13,0.96),rgba(10,10,10,0.96))] p-8 shadow-[0_24px_80px_rgba(0,0,0,0.5)]">
+        <section className={`rounded-[32px] border p-8 ${shellClass}`}>
           <div className="text-center">
             <BrandWordmark size="xl" align="center" />
-            <p className="mt-4 text-lg text-stone-400">
+            <p
+              className={`mt-4 text-lg ${
+                resolvedTheme === "dark" ? "text-stone-400" : "text-stone-700"
+              }`}
+            >
               Automatically sync your accepted LeetCode and Programmers solutions to GitHub.
             </p>
           </div>
 
-          <section className="mx-auto mt-10 max-w-2xl rounded-[24px] border border-stone-800 bg-stone-950/60 p-6">
-            <p className="text-center text-xl font-semibold text-stone-50">
+          <section className={`mx-auto mt-10 max-w-2xl rounded-[24px] border p-6 ${panelClass}`}>
+            <p
+              className={`text-center text-xl font-semibold ${
+                resolvedTheme === "dark" ? "text-stone-50" : "text-stone-900"
+              }`}
+            >
               Connect a repository to get started
             </p>
 
@@ -229,7 +271,11 @@ export default function Welcome() {
               </label>
               <select
                 id="setupMode"
-                className="mt-2 w-full rounded-[16px] border border-stone-800 bg-stone-900/80 px-4 py-3 text-sm text-stone-100 outline-none transition focus:border-amber-400"
+                className={`mt-2 w-full rounded-[16px] border px-4 py-3 text-sm outline-none transition ${
+                  resolvedTheme === "dark"
+                    ? "border-stone-800 bg-stone-900/80 text-stone-100 focus:border-amber-400"
+                    : "border-amber-300 bg-white text-stone-900 focus:border-amber-600"
+                }`}
                 value={mode}
                 onChange={(event) => {
                   const nextMode = event.target.value as RepoMode;
@@ -259,7 +305,11 @@ export default function Welcome() {
                 </label>
                 <input
                   id="repositoryName"
-                  className="mt-2 w-full rounded-[16px] border border-stone-800 bg-stone-900/80 px-4 py-3 text-sm text-stone-100 outline-none transition placeholder:text-stone-600 focus:border-amber-400"
+                  className={`mt-2 w-full rounded-[16px] border px-4 py-3 text-sm outline-none transition placeholder:text-stone-500 ${
+                    resolvedTheme === "dark"
+                      ? "border-stone-800 bg-stone-900/80 text-stone-100 focus:border-amber-400"
+                      : "border-amber-300 bg-white text-stone-900 focus:border-amber-600"
+                  }`}
                   value={repositoryName}
                   onChange={(event) => setRepositoryName(event.target.value)}
                   placeholder="algorithm"
@@ -270,8 +320,18 @@ export default function Welcome() {
             {mode === "link" ? (
               <div className="mt-5">
                 {!settings.github.token.trim() ? (
-                  <div className="rounded-[16px] border border-stone-800 bg-stone-900/70 p-4">
-                    <p className="text-sm text-stone-300">
+                  <div
+                    className={`rounded-[16px] border p-4 ${
+                      resolvedTheme === "dark"
+                        ? "border-stone-800 bg-stone-900/70"
+                        : "border-amber-300 bg-amber-50"
+                    }`}
+                  >
+                    <p
+                      className={`text-sm ${
+                        resolvedTheme === "dark" ? "text-stone-300" : "text-stone-700"
+                      }`}
+                    >
                       Authenticate with GitHub to load your repositories.
                     </p>
                     <button
@@ -291,7 +351,11 @@ export default function Welcome() {
                         Existing repository
                       </label>
                       <button
-                        className="rounded-full border border-stone-800 bg-stone-900/80 px-3 py-1.5 text-[11px] font-semibold text-stone-300 transition hover:border-amber-400 hover:text-amber-200"
+                        className={`rounded-full border px-3 py-1.5 text-[11px] font-semibold transition ${
+                          resolvedTheme === "dark"
+                            ? "border-stone-800 bg-stone-900/80 text-stone-300 hover:border-amber-400 hover:text-amber-200"
+                            : "border-amber-300 bg-white text-stone-700 hover:border-amber-500 hover:text-amber-800"
+                        }`}
                         onClick={() => void handleAuthenticateGitHub()}
                         type="button"
                       >
@@ -300,7 +364,11 @@ export default function Welcome() {
                     </div>
                     <select
                       id="existingRepository"
-                      className="mt-2 w-full rounded-[16px] border border-stone-800 bg-stone-900/80 px-4 py-3 text-sm text-stone-100 outline-none transition focus:border-amber-400"
+                      className={`mt-2 w-full rounded-[16px] border px-4 py-3 text-sm outline-none transition ${
+                        resolvedTheme === "dark"
+                          ? "border-stone-800 bg-stone-900/80 text-stone-100 focus:border-amber-400"
+                          : "border-amber-300 bg-white text-stone-900 focus:border-amber-600"
+                      }`}
                       value={selectedRepository}
                       onChange={(event) => setSelectedRepository(event.target.value)}
                     >
@@ -318,7 +386,11 @@ export default function Welcome() {
 
             <div className="mt-6 flex flex-wrap items-center gap-3">
               <button
-                className="rounded-[16px] bg-stone-100 px-5 py-3 text-sm font-semibold text-stone-950 transition hover:bg-white disabled:cursor-not-allowed disabled:opacity-60"
+                className={`rounded-[16px] px-5 py-3 text-sm font-semibold transition disabled:cursor-not-allowed disabled:opacity-60 ${
+                  resolvedTheme === "dark"
+                    ? "bg-stone-100 text-stone-950 hover:bg-white"
+                    : "bg-amber-500 text-white hover:bg-amber-600"
+                }`}
                 onClick={() => void handleContinue()}
                 disabled={isGetStartedDisabled}
               >
@@ -327,7 +399,13 @@ export default function Welcome() {
             </div>
 
             {message ? (
-              <p className="mt-4 text-sm text-stone-300">{message}</p>
+              <p
+                className={`mt-4 text-sm ${
+                  resolvedTheme === "dark" ? "text-stone-300" : "text-stone-700"
+                }`}
+              >
+                {message}
+              </p>
             ) : null}
           </section>
         </section>
diff --git a/src/core/storage/settings.ts b/src/core/storage/settings.ts
index 6bff462..f82a4f3 100644
--- a/src/core/storage/settings.ts
+++ b/src/core/storage/settings.ts
@@ -26,6 +26,7 @@ function createDefaultTemplateConfig() {
 
 export const DEFAULT_SETTINGS: ExtensionSettings = {
   locale: "en",
+  themeMode: "system",
   github: {
     oauthClientId: DEFAULT_GITHUB_OAUTH_CLIENT_ID,
     token: "",
@@ -59,6 +60,7 @@ function mergeSettings(
 ): ExtensionSettings {
   return {
     locale: patch.locale ?? current.locale,
+    themeMode: patch.themeMode ?? current.themeMode,
     github: {
       ...current.github,
       ...patch.github,
diff --git a/src/core/types/domain.ts b/src/core/types/domain.ts
index 826e357..a39d772 100644
--- a/src/core/types/domain.ts
+++ b/src/core/types/domain.ts
@@ -1,6 +1,7 @@
 export type PlatformId = "leetcode" | "programmers";
 export type RepositoryTemplateSegment = "platform" | "level" | "id" | "title";
 export type Locale = "ko" | "en";
+export type ThemeMode = "system" | "light" | "dark";
 
 export type GitHubSettings = {
   oauthClientId: string;
@@ -19,6 +20,7 @@ export type PlatformSettings = {
 
 export type ExtensionSettings = {
   locale: Locale;
+  themeMode: ThemeMode;
   github: GitHubSettings;
   platforms: Record<PlatformId, PlatformSettings>;
   repositoryTemplate: Record<
diff --git a/src/shared/theme.ts b/src/shared/theme.ts
new file mode 100644
index 0000000..16d7864
--- /dev/null
+++ b/src/shared/theme.ts
@@ -0,0 +1,45 @@
+import { useEffect, useMemo, useState } from "react";
+import type { ThemeMode } from "../core/types/domain";
+
+export type ResolvedTheme = "light" | "dark";
+
+export function resolveThemeMode(
+  mode: ThemeMode,
+  prefersDark: boolean
+): ResolvedTheme {
+  if (mode === "system") {
+    return prefersDark ? "dark" : "light";
+  }
+
+  return mode;
+}
+
+export function useResolvedTheme(mode: ThemeMode): ResolvedTheme {
+  const getPreferred = () =>
+    typeof window !== "undefined" &&
+    window.matchMedia("(prefers-color-scheme: dark)").matches;
+
+  const [prefersDark, setPrefersDark] = useState(getPreferred);
+
+  useEffect(() => {
+    if (typeof window === "undefined") {
+      return;
+    }
+
+    const media = window.matchMedia("(prefers-color-scheme: dark)");
+    const handleChange = (event: MediaQueryListEvent) => {
+      setPrefersDark(event.matches);
+    };
+
+    media.addEventListener("change", handleChange);
+
+    return () => {
+      media.removeEventListener("change", handleChange);
+    };
+  }, []);
+
+  return useMemo(
+    () => resolveThemeMode(mode, prefersDark),
+    [mode, prefersDark]
+  );
+}