Skip to content

fix(cdk-examples): improve dark theme visibility in menu, overlay, an…#33367

Open
BHUVANSH855 wants to merge 1 commit into
angular:mainfrom
BHUVANSH855:fix-dark-theme-example-visibility
Open

fix(cdk-examples): improve dark theme visibility in menu, overlay, an…#33367
BHUVANSH855 wants to merge 1 commit into
angular:mainfrom
BHUVANSH855:fix-dark-theme-example-visibility

Conversation

@BHUVANSH855

Copy link
Copy Markdown
Contributor

Summary

This PR improves the visibility of example components in dark theme across several CDK examples:

  • Menu examples: Standalone trigger and nested context menus now have light backgrounds to ensure buttons are visible in dark mode.
  • Overlay examples: Added color: CanvasText to ensure text is readable.
  • Portal examples: Dashed borders changed from black to white for better contrast in dark theme.

Changes

  • cdk-menu-nested-context-example.css: border color updated.
  • cdk-menu-standalone-menu-example.css: background for .example-standalone-trigger added with hover/active states.
  • cdk-overlay-basic-example.css: text color adjusted for dark theme.
  • cdk-portal-overview-example.css: border color updated for dark theme.

Motivation

These changes make example components readable and visually consistent in dark mode without affecting light theme appearance.

Verification

Tested all updated examples in both light and dark themes to ensure proper visibility and styling.

@pullapprove pullapprove Bot requested review from andrewseguin and crisbeto June 9, 2026 10:15
@BHUVANSH855 BHUVANSH855 force-pushed the fix-dark-theme-example-visibility branch from fca31c4 to 96c0837 Compare June 9, 2026 10:19
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant