fix: sync Quick Prompt popup theme with main app

The popup window has its own document and never received the
data-theme attribute. Pass the current theme setting from the main
process via the show event, resolve 'system' to effective dark/light,
and apply to document.documentElement.dataset.theme so all CSS
variables match the main app's appearance.

- Add getCurrentTheme() to AryxAppService
- Pass theme in toggleQuickPromptWindow / showQuickPromptWindow
- Update onShow listener signature to receive theme string
- Apply theme to documentElement on each popup activation

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
This commit is contained in:
David Kaya
2026-04-13 12:36:35 +02:00
co-authored by Copilot
parent d3fb0a64c5
commit b02a90a15f
6 changed files with 18 additions and 8 deletions
+4
View File
@@ -836,6 +836,10 @@ export class AryxAppService extends EventEmitter<AppServiceEvents> {
return this.workspace?.settings.quickPrompt ?? createDefaultQuickPromptSettings();
}
getCurrentTheme(): AppearanceTheme {
return this.workspace?.settings.theme ?? 'dark';
}
async setQuickPromptSettings(patch: Partial<QuickPromptSettings>): Promise<WorkspaceState> {
const workspace = await this.loadWorkspace();
const current = workspace.settings.quickPrompt ?? createDefaultQuickPromptSettings();
+1 -1
View File
@@ -83,7 +83,7 @@ async function bootstrap(): Promise<void> {
const hotkeySettings = workspace.settings.quickPrompt ?? createDefaultQuickPromptSettings();
globalHotkeyService.register(hotkeySettings, () => {
const win = ensureQuickPromptWindow();
if (win) void toggleQuickPromptWindow(win);
if (win) void toggleQuickPromptWindow(win, appService!.getCurrentTheme());
});
// Re-register hotkey when settings change
+4 -4
View File
@@ -57,7 +57,7 @@ export function createQuickPromptWindow(): BrowserWindowType {
return window;
}
export async function toggleQuickPromptWindow(window: BrowserWindowType): Promise<void> {
export async function toggleQuickPromptWindow(window: BrowserWindowType, theme?: string): Promise<void> {
if (window.isVisible()) {
window.webContents.send('quick-prompt:hide');
window.hide();
@@ -73,14 +73,14 @@ export async function toggleQuickPromptWindow(window: BrowserWindowType): Promis
}
centerOnActiveDisplay(window);
window.webContents.send('quick-prompt:show');
window.webContents.send('quick-prompt:show', theme ?? 'dark');
window.show();
window.focus();
}
export function showQuickPromptWindow(window: BrowserWindowType): void {
export function showQuickPromptWindow(window: BrowserWindowType, theme?: string): void {
centerOnActiveDisplay(window);
window.webContents.send('quick-prompt:show');
window.webContents.send('quick-prompt:show', theme ?? 'dark');
window.show();
window.focus();
}
+1 -1
View File
@@ -36,7 +36,7 @@ const api: QuickPromptElectronApi = {
return () => ipcRenderer.off(ch.sessionEvent, handler);
},
onShow: (listener) => {
const handler = () => listener();
const handler = (_event: Electron.IpcRendererEvent, theme: string) => listener(theme);
ipcRenderer.on(ch.show, handler);
return () => ipcRenderer.off(ch.show, handler);
},
@@ -46,7 +46,13 @@ export function QuickPromptApp() {
// Subscribe to show/hide events from main process
useEffect(() => {
const offShow = api.onShow(() => {
const offShow = api.onShow((theme: string) => {
// Apply theme to document root so CSS variables match the main app
const effective = theme === 'system'
? (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light')
: theme;
document.documentElement.dataset.theme = effective;
setVisible(true);
resetState();
});
+1 -1
View File
@@ -419,6 +419,6 @@ export interface QuickPromptElectronApi {
getCapabilities(): Promise<QuickPromptCapabilities>;
setSettings(settings: Partial<QuickPromptSettings>): Promise<void>;
onSessionEvent(listener: (event: SessionEventRecord) => void): () => void;
onShow(listener: () => void): () => void;
onShow(listener: (theme: string) => void): () => void;
onHide(listener: () => void): () => void;
}