feat: native liquid glass tinting and theme-controlled appearance#39
feat: native liquid glass tinting and theme-controlled appearance#39OpenSource03 merged 2 commits intomasterfrom
Conversation
…ocus veil Use electron-liquid-glass tintColor API to tint the glass material natively on macOS instead of CSS overlays. Switch to darkkatarsis fork which adds hasKeyAppearance isa-swizzle to prevent glass state change on window blur. - Add OKLCh-to-hex-RGBA color conversion utility (src/lib/color-utils.ts) - Add glass IPC: set-tint-color (native tint) and set-theme (nativeTheme.themeSource) - Sync app theme to main process so glass light/dark follows app setting, not OS - Bootstrap theme from localStorage in preload for correct first-frame appearance - Add subtle unfocused veil overlay on macOS (darken/brighten when window inactive) - Unify light mode glass sidebar to use dark text (same as Windows) - Fall back to CSS overlay tinting on non-macOS platforms Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 4d07c1e70a
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
There was a problem hiding this comment.
Pull request overview
This PR upgrades the app’s “glass” theming on macOS by moving space tinting into the native electron-liquid-glass layer, syncing app theme to Electron’s nativeTheme, and adjusting UI styling/overlays for focused vs unfocused windows.
Changes:
- Adds native macOS glass tinting via IPC (
glass:set-tint-color) and a new OKLCh→hex conversion utility. - Syncs the app theme option (
light/dark/system) tonativeTheme.themeSourceand pushes an initial theme from preload. - Updates glass-related CSS and adds an unfocused veil overlay on macOS native glass.
Reviewed changes
Copilot reviewed 9 out of 11 changed files in this pull request and generated 6 comments.
Show a summary per file
| File | Description |
|---|---|
| src/types/window.d.ts | Extends the preload bridge typings with window.claude.glass methods. |
| src/lib/color-utils.ts | New OKLCh→sRGB hex RGBA conversion + native tint color computation. |
| src/index.css | Removes prior light-glass white-text overrides; keeps dark text in light glass. |
| src/hooks/useTheme.ts | Sends theme option to main so native glass appearance follows app setting. |
| src/hooks/useSpaceTheme.ts | Sends native tint color on macOS; keeps CSS overlay tint for non-macOS. |
| src/components/AppLayout.tsx | Tracks window focus and renders an unfocused veil overlay on macOS native glass. |
| electron/src/preload.ts | Sends stored theme early; exposes claude.glass IPC helpers. |
| electron/src/main.ts | Adds IPC handlers for tint updates and themeSource syncing. |
| electron/src/lib/glass.ts | Refactors glass init + adds applyGlass/setGlassTint to recreate view with tint. |
| package.json | Switches electron-liquid-glass dependency to a GitHub fork. |
| pnpm-lock.yaml | Locks electron-liquid-glass to a specific tarball commit URL. |
Files not reviewed (1)
- pnpm-lock.yaml: Language not supported
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
- Guard clampByte against NaN/Infinity inputs (corrupted space data)
- Validate tintColor hex format in IPC handler before passing to native
- Fix unfocused veil transition: keep element mounted, toggle opacity
- Align preload theme default with useSettings ("dark") to avoid flash
- Add unit tests for oklchToHexRGBA and computeGlassTintColor
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: e30bf9acea
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
| if (!liquidGlass || !storedHandle) return -1; | ||
| return liquidGlass.addView(storedHandle, tintColor ? { tintColor } : {}); |
There was a problem hiding this comment.
setGlassTint returns immediately when storedHandle is still null, which drops early tint IPC events instead of replaying them later. On startup, useSpaceTheme can emit glass:set-tint-color before createWindow’s did-finish-load callback runs applyGlass, so the initial space tint is lost and the window stays untinted until another space/theme change triggers a new tint update. Caching the latest tint and applying it once applyGlass sets the handle would avoid this startup race.
Useful? React with 👍 / 👎.
…enSource03#39) * feat: native liquid glass tinting, theme-controlled appearance, and focus veil Use electron-liquid-glass tintColor API to tint the glass material natively on macOS instead of CSS overlays. Switch to darkkatarsis fork which adds hasKeyAppearance isa-swizzle to prevent glass state change on window blur. - Add OKLCh-to-hex-RGBA color conversion utility (src/lib/color-utils.ts) - Add glass IPC: set-tint-color (native tint) and set-theme (nativeTheme.themeSource) - Sync app theme to main process so glass light/dark follows app setting, not OS - Bootstrap theme from localStorage in preload for correct first-frame appearance - Add subtle unfocused veil overlay on macOS (darken/brighten when window inactive) - Unify light mode glass sidebar to use dark text (same as Windows) - Fall back to CSS overlay tinting on non-macOS platforms Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com> * fix: harden glass tinting from PR review feedback - Guard clampByte against NaN/Infinity inputs (corrupted space data) - Validate tintColor hex format in IPC handler before passing to native - Fix unfocused veil transition: keep element mounted, toggle opacity - Align preload theme default with useSettings ("dark") to avoid flash - Add unit tests for oklchToHexRGBA and computeGlassTintColor Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com> --------- Co-authored-by: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Summary
electron-liquid-glassnativetintColorAPI to tint glass material directly on macOS, replacing CSS overlays for higher-quality visual blendinghasKeyAppearanceisa-swizzle to prevent glass state change on window blurnativeTheme.themeSourceso glass appearance follows the app setting, not just macOS system preferenceTest plan