diff --git a/extension/src/popup/popup.ts b/extension/src/popup/popup.ts
index 6d5f7cf..c08ea50 100644
--- a/extension/src/popup/popup.ts
+++ b/extension/src/popup/popup.ts
@@ -19,6 +19,7 @@ import { renderFieldHistory } from './components/field-history';
 import { teardown as teardownTrash } from './components/trash';
 import { teardown as teardownDevices } from './components/devices';
 import { teardown as teardownFieldHistory } from './components/field-history';
+import { applyColorScheme } from '../shared/color-scheme';
 
 // --- Escape HTML to prevent XSS ---
 export function escapeHtml(str: string): string {
@@ -215,6 +216,14 @@ function render(): void {
 // --- Init ---
 
 async function init(): Promise<void> {
+  await applyColorScheme();
+
+  chrome.storage.onChanged.addListener((changes, area) => {
+    if (area === 'sync' && 'password_display_scheme' in changes) {
+      void applyColorScheme();
+    }
+  });
+
   // Snapshot the active tab at popup-open — the fill path uses this
   // tabId/url pair so the SW can verify the tab hasn't navigated before
   // forwarding credentials (audit M5 + TOCTOU close via expectedHost).
diff --git a/extension/src/vault/vault.ts b/extension/src/vault/vault.ts
index 1f11f6c..d30c2c1 100644
--- a/extension/src/vault/vault.ts
+++ b/extension/src/vault/vault.ts
@@ -20,6 +20,7 @@ import { renderVaultSettings as renderVaultSettingsView } from '../popup/compone
 import { renderFieldHistory, teardown as teardownFieldHistory } from '../popup/components/field-history';
 import { renderBackupPanel, teardown as teardownBackup } from './components/backup-panel';
 import { renderImportPanel, teardown as teardownImport } from './components/import-panel';
+import { applyColorScheme } from '../shared/color-scheme';
 
 // ---------------------------------------------------------------------------
 // Helpers
@@ -608,6 +609,14 @@ async function loadManifest(): Promise<void> {
 // ---------------------------------------------------------------------------
 
 document.addEventListener('DOMContentLoaded', async () => {
+  await applyColorScheme();
+
+  chrome.storage.onChanged.addListener((changes, area) => {
+    if (area === 'sync' && 'password_display_scheme' in changes) {
+      void applyColorScheme();
+    }
+  });
+
   // Delegated handler for .error-cta buttons — set up once on the stable root.
   const app = document.getElementById('vault-app')!;
   app.addEventListener('click', (e) => {