diff --git a/src/background.js b/src/background.js
index e63d8fe..a4533c3 100644
--- a/src/background.js
+++ b/src/background.js
@@ -12,7 +12,7 @@
 
 chrome.runtime.onMessage.addListener((msg, sender) => {
   if (msg && msg.type === 'ft-set-badge' && sender.tab && sender.tab.id != null) {
-    chrome.action.setBadgeBackgroundColor({ tabId: sender.tab.id, color: '#4f46e5' });
+    chrome.action.setBadgeBackgroundColor({ tabId: sender.tab.id, color: '#6366f1' });
     chrome.action.setBadgeText({ tabId: sender.tab.id, text: msg.count > 0 ? String(msg.count) : '' });
   }
 });
\ No newline at end of file
diff --git a/src/content.js b/src/content.js
index 951f84b..aa8140b 100644
--- a/src/content.js
+++ b/src/content.js
@@ -20,13 +20,13 @@
     <style>
       .overlay {
         position: fixed; pointer-events: none; display: none;
-        background: rgba(79, 70, 229, 0.15);
-        outline: 2px solid #4f46e5; outline-offset: -1px;
+        background: rgba(99, 102, 241, 0.25);
+        outline: 2px solid #818cf8; outline-offset: -1px;
         border-radius: 2px;
       }
       .overlay-label {
         position: fixed; pointer-events: none; display: none;
-        background: #4f46e5; color: #fff;
+        background: #6366f1; color: #fff;
         font: 11px/1.4 ui-monospace, monospace;
         padding: 2px 6px; border-radius: 4px 4px 4px 0;
         white-space: nowrap; max-width: 320px;
@@ -35,9 +35,9 @@
       .form {
         position: fixed; display: none; pointer-events: auto;
         width: 320px; box-sizing: border-box;
-        background: #ffffff; color: #1e1b4b;
-        border: 1px solid #c7d2fe; border-radius: 10px;
-        box-shadow: 0 10px 30px rgba(30, 27, 75, 0.25);
+        background: #111827; color: #e2e8f0;
+        border: 1px solid #334155; border-radius: 10px;
+        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
         font: 13px/1.45 system-ui, sans-serif;
         padding: 10px 12px 12px;
       }
@@ -47,36 +47,37 @@
         align-items: baseline; margin-bottom: 6px;
       }
       .form-count { font-weight: 600; }
-      .form-hint { color: #6d28d9; font-size: 11px; }
+      .form-hint { color: #818cf8; font-size: 11px; }
       .targets {
         list-style: none; margin: 0 0 8px; padding: 0;
         max-height: 96px; overflow-y: auto;
       }
       .targets li {
         font: 11px/1.4 ui-monospace, monospace;
-        color: #3730a3; background: #eef2ff;
+        color: #a5b4fc; background: rgba(99, 102, 241, 0.14);
         border-radius: 5px; padding: 3px 6px; margin: 2px 0;
         overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
       }
       textarea {
         width: 100%; min-height: 64px; resize: vertical;
-        font: 13px/1.45 system-ui, sans-serif; color: #1e1b4b;
-        border: 1px solid #c7d2fe; border-radius: 7px;
+        font: 13px/1.45 system-ui, sans-serif; color: #e2e8f0;
+        background: #0b1120;
+        border: 1px solid #334155; border-radius: 7px;
         padding: 7px 8px; margin: 0 0 8px;
       }
-      textarea:focus { outline: 2px solid #a5b4fc; border-color: #6366f1; }
+      textarea:focus { outline: 2px solid #6366f1; border-color: #6366f1; }
       .form-row { display: flex; gap: 8px; }
       button {
         font: 12px/1 system-ui, sans-serif; cursor: pointer;
-        border-radius: 7px; padding: 7px 12px; border: 1px solid #c7d2fe;
-        background: #fff; color: #3730a3;
+        border-radius: 7px; padding: 7px 12px; border: 1px solid #334155;
+        background: #1e293b; color: #cbd5e1;
       }
       button.save {
-        background: #4f46e5; border-color: #4f46e5; color: #fff;
+        background: #6366f1; border-color: #6366f1; color: #fff;
         font-weight: 600;
       }
-      button.save:hover { background: #4338ca; }
-      button.cancel:hover { background: #eef2ff; }
+      button.save:hover { background: #4f46e5; }
+      button.cancel:hover { background: #26334d; }
     </style>
     <div class="overlay"></div>
     <div class="overlay-label"></div>
diff --git a/src/popup.css b/src/popup.css
index a855187..c56326a 100644
--- a/src/popup.css
+++ b/src/popup.css
@@ -1,8 +1,16 @@
 :root {
-  --indigo: #4f46e5;
-  --indigo-dark: #3730a3;
-  --bg: #eef2ff;
-  color-scheme: light;
+  --bg: #0b1120;
+  --surface: #111827;
+  --surface-2: #1e293b;
+  --border: #334155;
+  --border-soft: #293548;
+  --text: #e2e8f0;
+  --muted: #94a3b8;
+  --accent: #6366f1;
+  --accent-strong: #4f46e5;
+  --accent-soft: rgba(99, 102, 241, 0.14);
+  --accent-text: #a5b4fc;
+  color-scheme: dark;
 }
 
 * { box-sizing: border-box; }
@@ -15,8 +23,8 @@
   margin: 0;
   padding: 12px;
   font: 13px/1.45 system-ui, sans-serif;
-  color: #1e1b4b;
-  background: #fff;
+  color: var(--text);
+  background: var(--bg);
 }
 
 .head h1 {
@@ -25,7 +33,7 @@
   font-weight: 700;
 }
 .page-url {
-  color: #6d28d9;
+  color: var(--accent-text);
   font-size: 11px;
   white-space: nowrap;
   overflow: hidden;
@@ -39,26 +47,26 @@
   gap: 8px;
   margin: 10px 0;
   padding: 7px 10px;
-  border: 1px solid #c7d2fe;
+  border: 1px solid var(--border);
   border-radius: 8px;
-  background: var(--bg);
-  color: var(--indigo-dark);
+  background: var(--surface-2);
+  color: #c7d2fe;
   font-weight: 600;
   cursor: pointer;
 }
 .toggle.on {
-  background: var(--indigo);
-  border-color: var(--indigo);
+  background: var(--accent);
+  border-color: var(--accent);
   color: #fff;
 }
 .toggle:disabled { opacity: 0.5; cursor: default; }
 .toggle kbd {
   font: 10px/1 ui-monospace, monospace;
   padding: 3px 5px;
-  border: 1px solid #c7d2fe;
+  border: 1px solid var(--border);
   border-radius: 4px;
-  background: #fff;
-  color: #6366f1;
+  background: var(--bg);
+  color: var(--accent-text);
 }
 .toggle.on kbd {
   border-color: rgba(255, 255, 255, 0.5);
@@ -73,21 +81,26 @@
 }
 
 .item {
-  border: 1px solid #e0e7ff;
+  border: 1px solid var(--border-soft);
   border-radius: 9px;
   padding: 8px 10px;
   margin-bottom: 8px;
-  background: var(--bg);
+  background: var(--surface);
 }
 .item textarea {
   width: 100%;
   min-height: 40px;
   resize: vertical;
   font: 13px/1.45 system-ui, sans-serif;
-  color: #1e1b4b;
-  border: 1px solid #c7d2fe;
+  color: var(--text);
+  border: 1px solid var(--border);
   border-radius: 7px;
   padding: 6px 8px;
+  background: var(--bg);
+}
+.item textarea:focus {
+  outline: 2px solid var(--accent);
+  border-color: var(--accent);
 }
 .item .targets {
   margin: 6px 0 4px;
@@ -96,7 +109,7 @@
 }
 .item .targets li {
   font: 11px/1.4 ui-monospace, monospace;
-  color: var(--indigo-dark);
+  color: var(--accent-text);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -105,15 +118,15 @@
   float: right;
   border: none;
   background: none;
-  color: #b91c1c;
+  color: #f87171;
   cursor: pointer;
   font-size: 14px;
   padding: 0 2px;
 }
-.item .del:hover { color: #ef4444; }
+.item .del:hover { color: #fca5a5; }
 
 .empty {
-  color: #64748b;
+  color: var(--muted);
   padding: 12px 4px;
 }
 
@@ -125,22 +138,22 @@
   flex: 1;
   padding: 8px 10px;
   border-radius: 8px;
-  border: 1px solid #c7d2fe;
+  border: 1px solid var(--border);
   cursor: pointer;
   font-weight: 600;
 }
 .primary {
-  background: var(--indigo);
-  border-color: var(--indigo);
+  background: var(--accent);
+  border-color: var(--accent);
   color: #fff;
 }
-.primary:hover { background: #4338ca; }
+.primary:hover { background: var(--accent-strong); }
 .primary:disabled { opacity: 0.45; cursor: default; }
 .danger {
-  background: #fff;
-  color: #b91c1c;
+  background: transparent;
+  color: #f87171;
 }
-.danger:hover { background: #fef2f2; }
+.danger:hover { background: rgba(185, 28, 28, 0.15); }
 .danger.confirming {
   background: #b91c1c;
   border-color: #b91c1c;
@@ -150,7 +163,7 @@
 .others {
   margin-top: 8px;
   font-size: 11px;
-  color: #64748b;
+  color: var(--muted);
 }
 
 .toast {
@@ -158,7 +171,7 @@
   bottom: 10px;
   left: 50%;
   transform: translateX(-50%);
-  background: var(--indigo-dark);
+  background: var(--accent-strong);
   color: #fff;
   padding: 5px 12px;
   border-radius: 20px;
diff --git a/src/popup.js b/src/popup.js
index 76d428c..a4a28d6 100644
--- a/src/popup.js
+++ b/src/popup.js
@@ -217,7 +217,7 @@
 
   function updateBadge(count) {
     if (tab && tab.id != null) {
-      chrome.action.setBadgeBackgroundColor({ tabId: tab.id, color: '#4f46e5' });
+      chrome.action.setBadgeBackgroundColor({ tabId: tab.id, color: '#6366f1' });
       chrome.action.setBadgeText({ tabId: tab.id, text: count > 0 ? String(count) : '' });
     }
   }