From 1fec2bbd477b77de00a824d390271ee19139eb42 Mon Sep 17 00:00:00 2001 From: Kacper Kula Date: Wed, 13 Aug 2025 13:31:29 +0200 Subject: [PATCH] fix: dark theme improvements (#183) * fix: dark theme improvements * chore: fixing icon a bit more --- src/modules/explorer/sqlseal-bw.svg | 23 ++++++- src/modules/globalTables/GlobalTablesView.ts | 64 ++++++++++++++++---- 2 files changed, 75 insertions(+), 12 deletions(-) diff --git a/src/modules/explorer/sqlseal-bw.svg b/src/modules/explorer/sqlseal-bw.svg index a914bc5..8e8beb1 100644 --- a/src/modules/explorer/sqlseal-bw.svg +++ b/src/modules/explorer/sqlseal-bw.svg @@ -1 +1,22 @@ - \ No newline at end of file + + + + + + + + + + \ No newline at end of file diff --git a/src/modules/globalTables/GlobalTablesView.ts b/src/modules/globalTables/GlobalTablesView.ts index 2e8d1f6..81d3a3c 100644 --- a/src/modules/globalTables/GlobalTablesView.ts +++ b/src/modules/globalTables/GlobalTablesView.ts @@ -39,6 +39,7 @@ export class GlobalTablesView extends ItemView { } api: GridApi | null = null; + private themeObserver: MutationObserver | null = null; async onOpen() { const container = this.containerEl.children[1]; @@ -60,17 +61,10 @@ export class GlobalTablesView extends ItemView { // el.createDiv({ text: 'HELLO FROM SQLSEAL GLOBAL TABLES VIEW' }) const gridEl = c.createDiv({ cls: "sql-seal-csv-viewer" }); - const myTheme = themeQuartz.withParams({ - borderRadius: 0, - browserColorScheme: "light", - headerFontSize: 14, - headerRowBorder: false, - headerVerticalPaddingScale: 1, - rowBorder: false, - spacing: 16, - wrapperBorder: false, - wrapperBorderRadius: 0, - }); + + // Get theme-aware AG Grid theme + const currentTheme = this.getCurrentTheme(); + const myTheme = themeQuartz.withParams(this.getThemeParams(currentTheme)); this.api = createGrid(gridEl, { theme: myTheme, @@ -109,6 +103,7 @@ export class GlobalTablesView extends ItemView { }); this.setupResizeObserver(gridEl); + this.setupThemeObserver(); } // Vibe Coded. @@ -187,10 +182,57 @@ export class GlobalTablesView extends ItemView { this.api?.setGridOption("rowData", this.gridData); } + private getCurrentTheme() { + return document.body.classList.contains('theme-dark') ? 'dark' : 'light'; + } + + private getThemeParams(theme: 'dark' | 'light') { + return { + borderRadius: 0, + browserColorScheme: theme, + backgroundColor: "var(--color-primary)", + chromeBackgroundColor: { + ref: "foregroundColor", + mix: 0.07, + onto: "backgroundColor" + }, + foregroundColor: "var(--text-normal)", + headerFontSize: 14, + headerRowBorder: false, + headerVerticalPaddingScale: 1, + rowBorder: false, + spacing: 16, + wrapperBorder: false, + wrapperBorderRadius: 0, + }; + } + + private updateGridTheme() { + if (!this.api) return; + + const currentTheme = this.getCurrentTheme(); + const newTheme = themeQuartz.withParams(this.getThemeParams(currentTheme)); + this.api.setGridOption('theme', newTheme); + } + + private setupThemeObserver() { + this.themeObserver = new MutationObserver(() => { + this.updateGridTheme(); + }); + + this.themeObserver.observe(document.body, { + attributes: true, + attributeFilter: ['class'] + }); + } + async onClose() { if (this.resizeObserver) { this.resizeObserver.disconnect(); } + if (this.themeObserver) { + this.themeObserver.disconnect(); + } if (this.api) { this.api.destroy(); }