🍕 chore(theme): unify accent on blue across panel + page + popup + badge

src/background/service-worker.ts

@@ -1,6 +1,11 @@
 import type { CaptureResponse, RuntimeMessage } from '@/lib/types';
 
-const BADGE_BG = '#e22c2c';
+// Toolbar badge color — matches the unified inspector accent
+// (`--cs-accent` in the panel theme, `ACCENT_RGB` in the highlighter).
+// Chrome doesn't switch theme on the badge, so we pick the lighter
+// blue-400 variant which stays readable against either a light or dark
+// browser-toolbar background.
+const BADGE_BG = '#60a5fa';
 const POPUP_PATH = 'src/popup/index.html';
 
 chrome.runtime.onInstalled.addListener(() => {

src/content/panel/theme.ts

@@ -26,8 +26,11 @@ export const lightTheme: ThemeTokens = {
   text: '#0f172a',
   textMuted: '#475569',
   textSubtle: '#94a3b8',
-  accent: '#e22c2c',
-  accentBg: 'rgba(226, 44, 44, 0.08)',
+  // Single inspector accent — matches `ACCENT_RGB` in `src/content/highlighter.ts`
+  // so the on-page selection outline and the in-panel selection chrome
+  // tell one consistent visual story. Tailwind blue-600.
+  accent: '#2563eb',
+  accentBg: 'rgba(37, 99, 235, 0.10)',
   success: '#16a34a',
   warning: '#d97706',
   danger: '#dc2626',
@@ -43,8 +46,10 @@ export const darkTheme: ThemeTokens = {
   text: '#e6e8ee',
   textMuted: '#9aa3b2',
   textSubtle: '#5f6776',
-  accent: '#ff5c5c',
-  accentBg: 'rgba(255, 92, 92, 0.12)',
+  // Lighter blue-400 in dark mode to keep WCAG AA contrast on dark backgrounds.
+  // Same hue family as light theme so the visual identity stays coherent.
+  accent: '#60a5fa',
+  accentBg: 'rgba(96, 165, 250, 0.16)',
   success: '#34d399',
   warning: '#fbbf24',
   danger: '#f87171',

src/options/options.css

@@ -5,7 +5,8 @@
   --text: #0f172a;
   --text-muted: #475569;
   --border: #e5e7eb;
-  --accent: #e22c2c;
+  /* Unified inspector accent — see src/content/panel/theme.ts. */
+  --accent: #2563eb;
 }
 
 @media (prefers-color-scheme: dark) {
@@ -15,7 +16,7 @@
     --text: #e6e8ee;
     --text-muted: #9aa3b2;
     --border: #252a36;
-    --accent: #ff5c5c;
+    --accent: #60a5fa;
   }
 }
 

src/popup/popup.css

@@ -47,11 +47,18 @@ body {
 .popup-link {
   display: inline-block;
   font-size: 12px;
-  color: #e22c2c;
+  /* Match the inspector accent everywhere else in the extension. */
+  color: #2563eb;
   text-decoration: none;
   font-weight: 500;
 }
 
+@media (prefers-color-scheme: dark) {
+  .popup-link {
+    color: #60a5fa;
+  }
+}
+
 .popup-link:hover {
   text-decoration: underline;
 }