Glass dialogs (the frosted look for pop-up windows, and its off switch)

What it is

With Glass dialogs on (the default), a dialog's panel is slightly see-through, with two soft glows in your accent color at its top corners, a faint highlight along its top edge, and a soft accent-colored halo around it. The header and footer lose their divider lines, so the dialog reads as one piece of glass instead of three boxed-off bands.

It follows your theme. The look is built only from your theme's own background and accent colors, so it fits every built-in and custom theme, light or dark. On light themes the panel is more solid and the glow softer, so it never looks washed out.

It always stays readable. Where the app turns off background blur — Low Power Mode, software rendering (a computer without a graphics card), and phone-sized screens — the panel turns fully solid. Bottom sheets keep their own slightly different background, so their buttons stay visible.

It never moves on its own: there is no pulsing or drifting glow.

Where to find it

Settings → Appearance → Theme & Visual tab, the Glass dialogs card just below the visual theme picker. Searching Settings for "glass", "dialog", "frosted" or "classic" finds it too.

How it behaves

How to use it

1. Open Settings → Appearance.
2. Find the Glass dialogs card.
3. Turn it off for the classic flat dialogs, or on for the glass look.

The change applies at once — including to a dialog that is already open — in the main window and in every popped-out window. There is nothing to save and no restart.

For agents

How it works

One boolean setting, glassDialogsEnabled (default true; a settings file saved before the key existed reads as on), toggles one class, glass-dialogs, on <html> through applyGlassDialogsClass in /src/renderer/src/lib/glass-dialogs.ts. The main window applies it with useGlassDialogs (mounted in App.tsx); popped-out windows apply it from their theme bootstrap (applyWindowTheme, at boot and on every settings push) and the detached session window from its live appearance sync.

The look lives once in /src/renderer/src/styles/globals.css, in a block where every rule is scoped under html.glass-dialogs. The three shared dialog frames (DialogShell, CommandPaletteShell, DrawerShell) keep their classic classes and also carry inert marker classes (amc-dialog-panel, amc-dialog-divider, and amc-dialog-sheet on the drawer), defined in /src/renderer/src/lib/styles.ts. With the class removed, nothing in the recipe matches, so the classic dialog is exactly what renders — that is the whole revert. Every strength (see-through amount, glow, halo) is a CSS variable, set once for dark and once for light; the readability floor sets --amc-glass-floor: 1 under html.low-power, html.software-render and max-width: 640px.

To flip it for a user: PATCH /settings/glassDialogsEnabled with true or false (the session-scoped token is allowed). Dialogs that do not use a shared frame — a few one-off dialogs, plugin dialogs and full-screen workspaces — do not get the look yet; they adopt it in later steps.

The promises and the tests that lock them are in /.claude/memory/contracts/glass-dialog-style-contract.md.

Related

• chat-depth.md — the separate Flat / Soft / Glass dial for chat bubbles.
• visual-themes.md — the themes whose colors the glass look follows.