8000 Fix missing background color for dropdown panels in keycloak.v2 theme by takuyaW · Pull Request #40382 · keycloak/keycloak · GitHub
[go: up one dir, main page]
More Web Proxy on the site http://driver.im/
Skip to content

Fix missing background color for dropdown panels in keycloak.v2 theme #40382

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

Jump to bottom
Merged
merged 1 commit into from
Jun 11, 2025
Merged

Fix missing background color for dropdown panels in keycloak.v2 theme #40382

merged 1 commit into from
Jun 11, 2025

Conversation

takuyaW
Copy link
Contributor
@takuyaW takuyaW commented Jun 10, 2025

Description

Fixes missing background color for dropdown filter panels in Admin UI when using keycloak.v2 theme.

Problem

When OS color scheme is set to prefers-color-scheme: dark, dropdown panels in Admin > Events > Search events form show transparent/unreadable background. This occurs because:

  1. CSS media query applies var(--pf-v5-global--BackgroundColor--300) when OS prefers dark mode
  2. This CSS variable is only defined within .pf-v5-theme-dark scope
  3. When Keycloak uses light theme but OS prefers dark mode, the variable is undefined

Solution

Added .pf-v5-theme-dark selector to scope the media query properly:

@media (prefers-color-scheme: dark) {
  .pf-v5-theme-dark .kc-dropdown-panel-content {
    background-color: var(--pf-v5-global--BackgroundColor--300);
  }
}

This ensures the CSS rule only applies when both OS and Keycloak theme are dark, preventing reference to undefined CSS variables.

Testing

  • Tested with OS dark mode + Keycloak light theme (no longer shows transparent background)
  • Tested with OS dark mode + Keycloak dark theme (works as expected)
  • Tested with OS light mode (no regression)
  • Verified dropdown panel text remains readable in all scenarios

Files Changed

  • js/apps/admin-ui/src/components/dropdown-panel/dropdown-panel.css

Closes #40135

@takuyaW
Fix missing background color for dropdown panels in keycloak.v2 theme
a2a4cbe 
Scope CSS media query to only apply when both OS and Keycloak theme are dark.
This prevents referencing undefined CSS variables when OS prefers dark mode
but Keycloak uses light theme.

Closes keycloak#40135

Signed-off-by: Takuya <takuya@asial.co.jp>
@takuyaW takuyaW requested a review from a team as a code owner June 10, 2025 13:56
@takuyaW takuyaW mentioned this pull request Jun 10, 2025
Closed
2 tasks
@ssilvert ssilvert self-assigned this Jun 10, 2025
@edewit edewit merged commit c37e597 into keycloak:main Jun 11, 2025
54 checks passed
@takuyaW takuyaW deleted the fix-dropdown-background-keycloak-v2 branch June 17, 2025 00:05
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@ssilvert ssilvert ssilvert approved these changes

Assignees

@ssilvert ssilvert

Labels
team/ui
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

Transparent filter panel in Admin > Events > Search events form
3 participants
@takuyaW @ssilvert @edewit
0