Skip to content

Dark theme fixes and dashboard cards UI improvements #1642

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
lyubov-voloshko merged 9 commits into from
Mar 5, 2026
Merged

Dark theme fixes and dashboard cards UI improvements #1642

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
5d04872
UI improvements: sidebar groups, branding dark theme, invite dialog f…
karinakharchenko Feb 26, 2026
09d6832
Fix dark theme issues: mermaid charts, widget dot, snackbar button
karinakharchenko Feb 26, 2026
f35a726
Unify dark theme background (#191919) across all pages
karinakharchenko Feb 26, 2026
c116b41
Improve dashboard cards: SVG illustration, panel previews, light them…
karinakharchenko Feb 27, 2026
c5f125e
Merge branch 'main' into dark-mode-fix
lyubov-voloshko Mar 2, 2026
c5b2fad
dark there: fix background color from variable
lyubov-voloshko Mar 3, 2026
33b1c97
dark theme: replace hardcoded colors with CSS variables and clean up UI
lyubov-voloshko Mar 5, 2026
e2c66b8
remove unused css
lyubov-voloshko Mar 5, 2026
4067c44
Merge branch 'main' into dark-mode-fix
lyubov-voloshko Mar 5, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 2 additions & 8 deletions frontend/src/app/app.component.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@
position: sticky;
top: 0;
flex-shrink: 0;
background-color: #212121;
background-color: var(--surface-dark-color);
z-index: 3;
}

Expand Down Expand Up @@ -295,12 +295,6 @@
height: 100%;
}

@media (prefers-color-scheme: dark) {
.main-menu-content_interior .content {
background-color: #212121;
}
}

.helpContainer {
position: fixed;
right: 16px;
Expand All @@ -319,7 +313,7 @@

@media (prefers-color-scheme: dark) {
.footer {
background: #212121;
background: var(--surface-dark-color);
border-top: 1px solid #303030;
}
}
Expand Down
1 change: 1 addition & 0 deletions frontend/src/app/components/api-keys/api-keys.component.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@

.profile-main {
flex: 1;
background-color: var(--mat-sidenav-content-background-color);
overflow-y: auto;
}

Expand Down
3 changes: 2 additions & 1 deletion frontend/src/app/components/branding/branding.component.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@

.profile-main {
flex: 1;
background-color: var(--mat-sidenav-content-background-color);
overflow-y: auto;
}

Expand Down Expand Up @@ -123,7 +124,7 @@

@media (prefers-color-scheme: dark) {
.white-label-settings__overlay {
background-color: rgba(0,0,0,0.64);
background-color: rgba(25,25,25,0.64);
}
}

Expand Down
2 changes: 1 addition & 1 deletion frontend/src/app/components/branding/branding.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -180,7 +180,7 @@ <h1 class="mat-h1 branding-page-header">Branding</h1>
<path *ngIf="!whiteLabelSettings.favicon" d="M1490.41 415.663H1458.31C1453.55 415.663 1451.18 411.963 1452.96 407.647L1464.85 379.283C1467.23 373.117 1463.66 366.951 1457.12 366.951H1427.4C1423.83 366.951 1420.86 369.418 1419.67 372.501L1404.81 406.414C1402.43 412.58 1405.4 416.896 1411.34 416.896H1442.26C1445.83 416.896 1448.8 418.746 1449.99 421.829L1464.26 455.742C1466.04 460.058 1463.66 463.758 1458.31 463.758H1386.97C1384 463.758 1381.03 466.224 1379.24 468.691L1366.76 501.987C1363.79 508.153 1366.76 514.319 1373.89 514.319H1444.04C1447.01 514.319 1449.99 511.236 1451.18 508.153L1467.23 471.157C1468.42 467.458 1471.39 465.608 1474.36 465.608H1505.87C1511.82 465.608 1514.79 460.675 1511.82 455.125L1498.74 421.212C1497.55 418.746 1493.98 416.279 1491.01 416.279L1490.41 415.663Z" fill="white"/>
</g>

<rect x="0" y="1482" width="100%" height="600" fill="#212121" />
<rect x="0" y="1482" width="100%" height="600" fill="#191919" />

<image *ngIf="whiteLabelSettings.logo"
x="100"
Expand Down
12 changes: 10 additions & 2 deletions frontend/src/app/components/charts/chart-edit/chart-edit.component.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@
overflow-y: auto;
display: flex;
flex-direction: column;
background-color: var(--mat-sidenav-content-background-color);
}

.chart-edit-page {
Expand Down Expand Up @@ -395,17 +396,24 @@
justify-content: space-between;
gap: 16px;
padding: 0 clamp(40px, 5vw, 100px);
background-color: var(--mat-sidenav-content-background-color);
background-color: var(--background-color);
box-shadow: var(--shadow);
height: 64px;
flex-shrink: 0;
z-index: 10;
--shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
}

@media (prefers-color-scheme: dark) {
.actions {
--shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.5), 0 2px 2px 0 rgba(0, 0, 0, 0.64), 0 1px 5px 0 rgba(0, 0, 0, 0.85);
--background-color: var(--surface-dark-color);
}
}

@media (prefers-color-scheme: light) {
.actions {
--shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
--background-color: #fff;
}
}

Expand Down
1 change: 1 addition & 0 deletions frontend/src/app/components/charts/charts-list/charts-list.component.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@
.charts-main {
flex: 1;
overflow-y: auto;
background-color: var(--mat-sidenav-content-background-color);
}

.charts-page {
Expand Down
1 change: 1 addition & 0 deletions frontend/src/app/components/company/company.component.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@

.profile-main {
flex: 1;
background-color: var(--mat-sidenav-content-background-color);
overflow-y: auto;
}

Expand Down
2 changes: 1 addition & 1 deletion frontend/src/app/components/company/company.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -246,7 +246,7 @@ <h2 class="heading-2 tableHeader__heading">Members <span *ngIf="currentPlan ===
[disabled]="isDemo"
[(ngModel)]="company.show_test_connections"
(change)="changeShowTestConnections($event.checked)">
Show demo admin panels
Show Demo panels for all members
Copy link

Copilot AI Feb 27, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

UI copy uses title-case mid-sentence ("Show Demo..."). If the product copy standard is sentence case elsewhere, consider changing this to "Show demo panels for all members" for consistency/readability.

Suggested change
Show Demo panels for all members
Show demo panels for all members

Copilot uses AI. Check for mistakes.
</mat-slide-toggle>
</div>
</div>
Expand Down
6 changes: 6 additions & 0 deletions frontend/src/app/components/company/invite-member-dialog/invite-member-dialog.component.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,3 +36,9 @@
margin-top: 2px;
}

@media (prefers-color-scheme: dark) {
.role-option__description {
color: rgba(255,255,255,0.7);
}
}

4 changes: 3 additions & 1 deletion frontend/src/app/components/connection-settings/connection-settings.component.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -137,7 +137,7 @@
display: flex;
align-items: center;
justify-content: space-between;
background-color: var(--mat-sidenav-content-background-color);
background-color: var(--background-color);
box-shadow: var(--shadow);
height: 64px;
padding: 0 max(calc(50vw - 325px), 10%);
Expand All @@ -147,12 +147,14 @@
@media (prefers-color-scheme: dark) {
.actions {
--shadow: 0 3px 1px -2px rgba(0,0,0,.5),0 2px 2px 0 rgba(0,0,0,.64),0 1px 5px 0 rgba(0,0,0,0.85);
--background-color: var(--surface-dark-color);
}
}

@media (prefers-color-scheme: light) {
.actions {
--shadow: 0 3px 1px -2px rgba(0,0,0,.2),0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12);
--background-color: #fff;
}
}

Expand Down
2 changes: 1 addition & 1 deletion frontend/src/app/components/connections-list/demo-connections/demo-connections.component.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -63,7 +63,7 @@
}

.testConnectionLink:hover {
background: #212121;
background: var(--surface-dark-color);
border: 1px solid rgba(255, 255, 255, 0.75);
box-shadow:
0px 1px 3px 0px rgba(255, 255, 255, 0.1),
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/app/components/connections-list/own-connections/own-connections.component.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -87,7 +87,7 @@
}

.addConnectionLink:hover {
background: #212121;
background: var(--surface-dark-color);
border: 1px solid rgba(255, 255, 255, 0.75);
box-shadow:
0px 1px 3px 0px rgba(255, 255, 255, 0.1),
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/app/components/dashboard/dashboard.component.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@

@media (prefers-color-scheme: dark) {
.table-list-sidenav {
background-color: #202020;
background-color: var(--surface-dark-color);
}
}

Expand Down
6 changes: 3 additions & 3 deletions ...rc/app/components/dashboard/db-table-view/db-table-actions/db-table-actions.component.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -201,11 +201,11 @@
@media (prefers-color-scheme: dark) {
.code-snippet-box {
border-color: rgba(255, 255, 255, 0.12);
background-color: #202020;
background-color: var(--surface-dark-color);
}

.copy-button {
background-color: #202020;
background-color: var(--surface-dark-color);
}
}

Expand Down Expand Up @@ -302,7 +302,7 @@
@media (prefers-color-scheme: dark) {
.rule-example {
border-color: rgba(255, 255, 255, 0.12);
background-color: #202020;
background-color: var(--surface-dark-color);
}
}

Expand Down
23 changes: 17 additions & 6 deletions .../app/components/dashboard/db-table-view/db-table-ai-panel/db-table-ai-panel.component.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,12 +34,6 @@
width 400ms cubic-bezier(0.4, 0, 0.2, 1);
}

@media (prefers-color-scheme: dark) {
.ai-panel-sidebar_open {
background-color: #202020;
}
}

@media (width <= 600px) {
.ai-panel-sidebar_open {
width: 0;
Expand Down Expand Up @@ -911,3 +905,20 @@
background-color: rgba(99, 132, 255, 0.25) !important;
}
}

@media (prefers-color-scheme: dark) {
.ai-message ::ng-deep svg text,
.ai-message ::ng-deep svg .legend text,
.ai-message ::ng-deep svg .title text,
.ai-message ::ng-deep svg .label text,
.ai-message ::ng-deep svg .tick text,
.ai-message ::ng-deep svg .axis text,
.ai-message ::ng-deep svg .pieCircle text,
.ai-message ::ng-deep svg .slice text {
fill: rgba(255, 255, 255, 0.87) !important;
}

.ai-message ::ng-deep svg .title {
fill: rgba(255, 255, 255, 0.87) !important;
}
}
8 changes: 7 additions & 1 deletion ...c/app/components/dashboard/db-table-view/db-table-ai-panel/db-table-ai-panel.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -109,8 +109,14 @@ export class DbTableAiPanelComponent implements OnInit, AfterViewInit, OnDestroy

async ngAfterViewInit() {
const mermaid = await import('mermaid');
const mermaidAPI: any = mermaid.default ?? mermaid;
const isDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
mermaidAPI.initialize({
startOnLoad: false,
theme: isDark ? 'dark' : 'default',
});
Comment on lines +113 to +117
Copy link

Copilot AI Feb 27, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

window.matchMedia is called without an existence check. In some environments (unit tests / older browsers / non-window contexts) this can throw and prevent the AI panel from rendering. Align with other code in the repo (e.g. window.matchMedia?.(...)) and fall back to light/default when unavailable.

Copilot uses AI. Check for mistakes.
//@ts-expect-error dynamic load of mermaid
window.mermaid = mermaid.default ?? mermaid;
window.mermaid = mermaidAPI;
}

ngOnDestroy() {
Expand Down
2 changes: 1 addition & 1 deletion .../app/components/dashboard/db-table-view/db-table-row-view/db-table-row-view.component.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@
@media (prefers-color-scheme: dark) {
.row-preview-sidebar_open {
border-left: 1px solid var(--mat-sidenav-container-divider-color);
background-color: #202020;
background-color: var(--surface-dark-color);
}
}

Expand Down
4 changes: 3 additions & 1 deletion .../app/components/dashboard/db-table-view/db-table-settings/db-table-settings.component.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -200,7 +200,7 @@
display: flex;
align-items: center;
justify-content: space-between;
background-color: var(--mat-sidenav-content-background-color);
background-color: var(--background-color);
box-shadow: var(--shadow);
height: 64px;
padding: 0 max(calc(50vw - 325px), 10%);
Expand All @@ -211,12 +211,14 @@
@media (prefers-color-scheme: dark) {
.actions {
--shadow: 0 3px 1px -2px rgba(0,0,0,.5),0 2px 2px 0 rgba(0,0,0,.64),0 1px 5px 0 rgba(0,0,0,0.85);
--background-color: var(--surface-dark-color);
}
}

@media (prefers-color-scheme: light) {
.actions {
--shadow: 0 3px 1px -2px rgba(0,0,0,.2),0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12);
--background-color: #fff;
}
}

Expand Down
6 changes: 3 additions & 3 deletions frontend/src/app/components/dashboard/db-table-view/db-table-view.component.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -150,7 +150,7 @@
top: 9px;
right: 3px;
display: block;
background: rgba(0, 0, 0, 0.87);
background: var(--color-accentedPalette-500);
border-radius: 50%;
height: 5px;
width: 5px;
Expand Down Expand Up @@ -307,8 +307,8 @@

@media (prefers-color-scheme: dark) {
.table-surface {
--mat-table-background-color: #202020;
--mat-paginator-container-background-color: #202020;
--mat-table-background-color: var(--surface-dark-color);
--mat-paginator-container-background-color: var(--surface-dark-color);
}
}

Expand Down
6 changes: 4 additions & 2 deletions ...rc/app/components/dashboard/db-table-view/db-table-widgets/db-table-widgets.component.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -87,7 +87,7 @@
@media (prefers-color-scheme: dark) {
.widget-example {
border-color: rgba(255,255,255,0.12);
background-color: #202020;
background-color: var(--surface-dark-color);
}
}

Expand Down Expand Up @@ -122,7 +122,7 @@
display: flex;
align-items: center;
justify-content: space-between;
background-color: var(--mat-sidenav-content-background-color);
background-color: var(--background-color);
box-shadow: var(--shadow);
height: 64px;
/* padding: 0 max(calc(50vw - 500px), 2%); */
Expand All @@ -134,11 +134,13 @@
@media (prefers-color-scheme: dark) {
.actions {
--shadow: 0 3px 1px -2px rgba(0,0,0,.5),0 2px 2px 0 rgba(0,0,0,.64),0 1px 5px 0 rgba(0,0,0,0.85);
--background-color: var(--surface-dark-color);
}
}

@media (prefers-color-scheme: light) {
.actions {
--shadow: 0 3px 1px -2px rgba(0,0,0,.2),0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12);
--background-color: #fff;
}
}
29 changes: 0 additions & 29 deletions ...db-table-view/saved-filters-panel/saved-filters-dialog/saved-filters-dialog.component.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,35 +51,6 @@
}
}

.add-condition-button {
width: auto;
min-width: auto;
min-height: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
text-transform: none;
margin: 0 !important;
padding: 0 16px;
gap: 4px;
}

.add-condition-button.accent-button {
color: #C177FC;
}

.add-condition-button.accent-button:hover {
background-color: rgba(193, 119, 252, 0.04);
}

.add-condition-button.accent-button .add-icon {
font-size: 20px;
width: 20px;
height: 20px;
line-height: 20px;
}

.empty-conditions-container .column-name-icon {
font-size: 18px;
width: 18px;
Expand Down
6 changes: 4 additions & 2 deletions ...b-table-view/saved-filters-panel/saved-filters-dialog/saved-filters-dialog.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -212,8 +212,10 @@ <h1 mat-dialog-title class="filters-header">

<!-- Add Condition Button -->
<div class="add-condition-container">
<button *ngIf="!showAddConditionField" mat-stroked-button type="button" (click)="handleAddConditionButtonClick()" class="add-condition-button accent-button">
<mat-icon class="add-icon">add</mat-icon>
<button *ngIf="!showAddConditionField"
mat-stroked-button type="button" color="accent"
(click)="handleAddConditionButtonClick()">
<mat-icon>add</mat-icon>
<span>Add condition</span>
</button>
<mat-form-field *ngIf="showAddConditionField" class="filters-select empty-condition-input" appearance="outline" [class.mat-form-field-invalid]="showConditionsError">
Expand Down
Loading
Loading