Skip to content

feat: add --zen-dialog-background for proper dialog theming#67

Open
salmonumbrella wants to merge 1 commit intocatppuccin:mainfrom
salmonumbrella:fix/dialog-background-theming
Open

feat: add --zen-dialog-background for proper dialog theming#67
salmonumbrella wants to merge 1 commit intocatppuccin:mainfrom
salmonumbrella:fix/dialog-background-theming

Conversation

@salmonumbrella
Copy link

Summary

  • Add --zen-dialog-background CSS variable to the userChrome.tera template
  • Regenerate all theme variants with the new variable

This fixes dialogs (like History popup, Clear cookies modal, and other subdialogs) not receiving Catppuccin colors. These UI elements were appearing in light mode because Zen Browser uses --zen-dialog-background for the canvas background of dialog boxes.

What's fixed

  • History popup window
  • Clear cookies and site data modal
  • Other browser subdialogs and panels that use --background-color-canvas

Technical details

Zen Browser's zen-theme.css defines:

--zen-dialog-background: light-dark(rgb(244, 244, 244), rgb(31, 31, 31));

This variable is then used for:

  • --background-color-canvas (dialog root elements)
  • --arrowpanel-background (already set by Catppuccin theme)

Without setting --zen-dialog-background, dialogs that inherit from --background-color-canvas fall back to Zen's default colors instead of the Catppuccin palette.

Test plan

  • Open History popup (Ctrl+Shift+H or History menu)
  • Open Clear cookies modal (Settings → Privacy → Clear Data)
  • Verify both have Catppuccin background colors instead of light/default theme

🤖 Generated with Claude Code

Add the --zen-dialog-background CSS variable to all theme variants.
This fixes dialogs (like History popup, Clear cookies modal, and other
subdialogs) not receiving Catppuccin colors.

Zen Browser uses --zen-dialog-background for the canvas background of
dialog boxes. Without this variable set, these dialogs fall back to the
default Zen colors instead of the Catppuccin palette.

Fixes theming for:
- History popup window
- Clear cookies and site data modal
- Other browser subdialogs and panels

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
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