Dark theme fixes and dashboard cards UI improvements by karinakharchenko · Pull Request #1642 · rocket-admin/rocketadmin

karinakharchenko · 2026-02-27T09:47:51Z

Summary

Unified dark theme background (#191919) across all pages (dashboards, panels, profile, company, etc.)
Fixed dark theme issues: mermaid chart labels, widget indicator dot, snackbar button contrast, invite dialog text
Grouped profile sidebar items by category (General, Customization, Security, Developer) with labels and dividers
Improved dashboard cards: glassmorphism styling, SVG empty state illustration, panel preview thumbnails, light/dark theme adaptation

Test plan

Verify dark theme background consistency across all pages (tables, dashboards, panels, profile, company, API keys, secrets, SSO, zapier)
Check dashboard cards render correctly in both light and dark themes
Verify empty dashboard state shows SVG illustration with correct colors per theme
Confirm dashboard cards with panels show line chart mini-preview
Test profile sidebar grouping and mobile responsiveness (hidden at ≤600px)
Verify invite member dialog role descriptions are visible in dark theme
Check AI chat mermaid chart labels are readable in dark theme
Confirm snackbar buttons have sufficient contrast in dark theme

🤖 Generated with Claude Code

…ixes - Group profile sidebar items by category (General, Customization, Security, Developer) with labels and dividers - Hide profile sidebar on mobile (≤600px) to match tables sidebar behavior - Fix branding dark theme preview color (#212121 → #191919) and overlay (rgba(25,25,25,0.64)) - Fix invite member dialog role description color in dark theme - Rename "Show demo admin panels" to "Show Demo panels for all members" Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

- Initialize mermaid with dark theme when OS prefers dark mode - Add CSS fallback for chart text/labels visibility in dark theme - Change widget indicator dot to accent color in both themes - Make snackbar button use accent color in dark theme for contrast Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

- Add #191919 background to dashboards list, dashboard view, panels list, panel edit - Add #191919 background to profile pages: account, company, branding, SSO, secrets, API keys, upgrade, zapier - Update dashboards sidebar to #212121 and hide on mobile (≤600px) - Set snackbar button to accent color in dark theme Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

…e styling Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

CLAassistant · 2026-02-27T09:48:02Z

Thank you for your submission! We really appreciate it. Like many open source projects, we ask that you sign our Contributor License Agreement before we can accept your contribution.
_{You have signed the CLA already but the status is still pending? Let us recheck it.}

Copilot

Pull request overview

This PR focuses on dark theme consistency and readability fixes across the frontend, while also improving dashboard list card visuals (empty state + previews) and reorganizing the profile sidebar navigation.

Changes:

Standardized dark theme page backgrounds (notably #191919) and improved dark-mode contrast for several UI elements (snackbar action button, invite dialog role descriptions, AI/mermaid chart labels, etc.).
Reorganized the profile sidebar into labeled groups with dividers and updated mobile responsiveness behavior.
Upgraded dashboards list cards with a richer empty state illustration and a mini chart preview when dashboards contain widgets.

Reviewed changes

Copilot reviewed 24 out of 24 changed files in this pull request and generated 4 comments.

Show a summary per file

File	Description
frontend/src/custom-theme.scss	Adds a dark-mode snackbar action button color token override.
frontend/src/app/components/zapier/zapier.component.css	Sets dark-mode background for `.profile-main`.
frontend/src/app/components/user-settings/user-settings.component.css	Sets dark-mode background for `.profile-main` and forces SVG icon paths to render white in dark mode.
frontend/src/app/components/upgrade/upgrade.component.css	Sets dark-mode background for `.profile-main`.
frontend/src/app/components/sso/sso.component.css	Sets dark-mode background for `.profile-main`.
frontend/src/app/components/secrets/secrets.component.css	Sets dark-mode background for `.profile-main`.
frontend/src/app/components/profile/profile-sidebar/profile-sidebar.component.html	Adds group labels/dividers and moves API Keys into a “Developer” section.
frontend/src/app/components/profile/profile-sidebar/profile-sidebar.component.css	Updates dark sidebar background and adds styles for group labels/dividers; adjusts mobile breakpoint behavior.
frontend/src/app/components/dashboards/dashboards-sidebar/dashboards-sidebar.component.css	Updates dark sidebar background and changes mobile breakpoint behavior.
frontend/src/app/components/dashboards/dashboards-list/dashboards-list.component.ts	Imports `ChartMiniPreviewComponent` for dashboard preview thumbnails.
frontend/src/app/components/dashboards/dashboards-list/dashboards-list.component.html	Replaces empty state icon with inline SVG illustration; adds preview placeholder vs mini chart preview; renames “widgets” to “panels” in UI.
frontend/src/app/components/dashboards/dashboards-list/dashboards-list.component.css	Adds dark background for dashboards page, refines card styling, placeholder styling, and adds illustration theming.
frontend/src/app/components/dashboards/dashboard-view/dashboard-view.component.css	Sets dark-mode background for the dashboard view page.
frontend/src/app/components/dashboard/db-table-view/db-table-view.component.css	Adjusts indicator dot styling to use the accent palette in dark mode.
frontend/src/app/components/dashboard/db-table-view/db-table-ai-panel/db-table-ai-panel.component.ts	Initializes Mermaid with a dark/light theme based on `prefers-color-scheme` and stores Mermaid API on `window`.
frontend/src/app/components/dashboard/db-table-view/db-table-ai-panel/db-table-ai-panel.component.css	Forces Mermaid/SVG text fills to be readable in dark mode.
frontend/src/app/components/company/invite-member-dialog/invite-member-dialog.component.css	Improves role description text contrast in dark mode.
frontend/src/app/components/company/company.component.html	Updates the copy for the “show test connections” toggle.
frontend/src/app/components/company/company.component.css	Sets dark-mode background for `.profile-main`.
frontend/src/app/components/charts/charts-list/charts-list.component.css	Sets dark-mode background for `.charts-main`.
frontend/src/app/components/charts/chart-edit/chart-edit.component.css	Sets dark-mode background for `.chart-edit-main`.
frontend/src/app/components/branding/branding.component.html	Updates branding preview SVG background fill to `#191919`.
frontend/src/app/components/branding/branding.component.css	Sets dark-mode background for `.profile-main` and adjusts overlay color for dark mode.
frontend/src/app/components/api-keys/api-keys.component.css	Sets dark-mode background for `.profile-main`.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2026-02-27T09:52:00Z

frontend/src/app/components/company/company.component.html

        [(ngModel)]="company.show_test_connections"
        (change)="changeShowTestConnections($event.checked)">
-        Show demo admin panels
+        Show Demo panels for all members


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 · 2026-02-27T09:52:01Z

frontend/src/app/components/profile/profile-sidebar/profile-sidebar.component.css

 @media (prefers-color-scheme: dark) {
 	.profile-sidebar {
-		background-color: var(--color-primaryPalette-900);
+		background-color: #212121;


PR description says dark theme background is unified to #191919 across all pages, but this sidebar dark background is set to #212121. If #212121 is intentional for sidebars, it may be worth updating the PR description; otherwise consider switching to #191919 for consistency.

Copilot · 2026-02-27T09:52:01Z

.../src/app/components/dashboard/db-table-view/db-table-ai-panel/db-table-ai-panel.component.ts

+		const isDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+		mermaidAPI.initialize({
+			startOnLoad: false,
+			theme: isDark ? 'dark' : 'default',
+		});


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 · 2026-02-27T09:52:01Z

frontend/src/app/components/dashboard/db-table-view/db-table-view.component.css

+@media (prefers-color-scheme: dark) {
+	.action_active::after {
+		background: var(--color-accentedPalette-500);
+	}
+}
+


The @media (prefers-color-scheme: dark) override for .action_active::after sets the same background value as the base rule, making it redundant and harder to maintain. Consider removing the media block or changing the base/dark values so the override is meaningful.

Suggested change

@media (prefers-color-scheme: dark) {

.action_active::after {

background: var(--color-accentedPalette-500);

}

}

karinakharchenko and others added 4 commits February 26, 2026 12:59

Improve dashboard cards: SVG illustration, panel previews, light them…

c116b41

…e styling Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Copilot AI review requested due to automatic review settings February 27, 2026 09:47

Copilot started reviewing on behalf of karinakharchenko February 27, 2026 09:48 View session

Copilot AI reviewed Feb 27, 2026

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Dark theme fixes and dashboard cards UI improvements#1642

Dark theme fixes and dashboard cards UI improvements#1642
karinakharchenko wants to merge 4 commits intorocket-admin:mainfrom
karinakharchenko:dark-mode-fix

karinakharchenko commented Feb 27, 2026

Uh oh!

CLAassistant commented Feb 27, 2026

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Feb 27, 2026

Uh oh!

Copilot AI Feb 27, 2026

Uh oh!

Copilot AI Feb 27, 2026

Uh oh!

Copilot AI Feb 27, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

	Show Demo panels for all members
	Show demo panels for all members

Uh oh!

Conversation

karinakharchenko commented Feb 27, 2026

Summary

Test plan

Uh oh!

CLAassistant commented Feb 27, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Feb 27, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 27, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 27, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 27, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants