From b928ed407bc0447cc567b2532add60df66331f42 Mon Sep 17 00:00:00 2001
From: adlee-was-taken <aaron.daniel.lee@gmail.com>
Date: Sat, 2 May 2026 18:55:28 -0400
Subject: [PATCH] feat(ext): apply color scheme on popup + vault startup

Import applyColorScheme in popup.ts and vault.ts, await it at boot,
and register a chrome.storage.onChanged listener so live color-picker
changes take effect without a reload.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 extension/src/popup/popup.ts | 9 +++++++++
 extension/src/vault/vault.ts | 9 +++++++++
 2 files changed, 18 insertions(+)

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) => {