feat(mobile): customizable sent message colors - #8155
Conversation
Adds a Sent messages section to mobile appearance settings with theme-default, preset, and custom hex swatches for the bubble and text colors. Custom bubbles derive readable text, muted, inline-code, and skill-mention tokens so markdown inside the bubble keeps its layering. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
|
Important Review skippedAuto reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the ⚙️ Run configurationConfiguration used: Repository UI Review profile: CHILL Plan: Pro Plus Run ID: You can disable this status message by setting the Use the checkbox below for a quick retry:
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
github-actions
Bot
added
vouch:unvouched
![macroscopeapp[bot]](https://avatars.githubusercontent.com/in/900172?s=60&v=4){kind=small}
![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: cbad33f05b
ℹ️ 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".
![cursor[bot]](https://avatars.githubusercontent.com/in/1210556?s=60&v=4){kind=small}
ApprovabilityVerdict: Not approved Macroscope's review found this PR not approvable — This PR adds a substantial new mobile appearance workflow with an HSV color picker, persisted preferences, and global theme overrides affecting sent messages and their markdown content. The cross-cutting user-facing behavior is beyond a small self-contained change and merits human review. You can add or adjust custom eligibility rules. Learn more. |
abcdmku
changed the title
abcdmku
changed the title
d8f38ed to
933f428
Compare
abcdmku
changed the title
Selecting Custom now toggles local state and reveals the hex field without committing a seed color, so it works even when the current color matches a preset (the auto text color is always black or white, both presets). The swatch row also wraps instead of clipping on narrow screens. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
The maxLength cap truncated pastes like " #abcdef " before the normalizer could trim them; the normalizer already rejects anything invalid, so the cap only broke valid pastes. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
933f428 to
095539d
Compare
Selecting Custom now shows an HSV picker (saturation/brightness pad plus a hue slider, drawn with SVG gradients) alongside the hex field. The color commits once on gesture release so a drag writes preferences a single time. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
github-actions
Bot
added
size:XL
Sanitizing dropped an explicit null for the message color keys, so any later preference save re-derived a blob without them and the session's initial stored snapshot bled the old color back through the optimistic merge until restart. Preserve null the same way terminalFontSize and codeFontSize do. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Dragging previously set React state per frame, re-rendering the SVG surfaces and stuttering. Thumbs now follow shared values like the font size slider, and the color commits once on release. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Horizontal-only pan activation meant brightness-only drags scrolled the page instead of moving the thumb. The pad now activates on any direction. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
There was a problem hiding this comment.
Cursor Bugbot has reviewed your changes using high effort and found 1 potential issue.
There are 2 total unresolved issues (including 1 from previous review).
❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.
Reviewed by Cursor Bugbot for commit b3212db. Configure here.
Quantizing while adopting an external hex drifted the picker's color off the typed value; adopt the parsed HSV exactly and quantize only on gesture commits. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
The fence background stayed the theme's black overlay, which fights black auto text on mid-tone custom bubbles; it now shifts the surface away from the text's pole so composited contrast only improves, with a test over the presets. Picker commits also snapshot the full HSV from the shared values at gesture time instead of reading component state when the queued callback runs. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
1 participant
Sent messages on mobile were always the theme's blue with no way to change them.
This adds a Sent messages section to mobile Settings → Appearance: bubble color and text color, each with the theme default, a few presets, or a custom color via an HSV picker and hex field. Auto text picks black or white by contrast on custom bubbles, and derived tokens (muted text, inline code, skill mentions) follow the chosen colors. Mobile only; preferences are device-local.
Built with Claude Fable 5 on Claude Code.
🤖 Generated with Claude Code
Note
Low Risk
Device-local appearance preferences and theme CSS overrides only; no auth or network paths. Main risk is contrast/readability regressions on custom colors, which tests partially guard.
Overview
Adds a Sent messages block to mobile Settings → Appearance with a live preview, theme/preset swatches, an HSV picker, and hex input for bubble and text colors.
userBubbleColoranduserBubbleTextColorare stored in device preferences (null means theme default or auto text).AppearancePreferencesProvidermergescreateUserBubbleOverridesinto Uniwind CSS variables for both light and dark sheets so chat bubbles pick up the same tokens (muted text, code blocks, fences, skill accents).normalizeUserBubbleColorand explicitnullhandling insanitizePreferencesavoid stale colors after clearing overrides.mobileThemeadds contrast-based derivation and hex/HSV helpers; tests cover normalization, overrides, and fence readability.Reviewed by Cursor Bugbot for commit 4d02613. Bugbot is set up for automated code reviews on this repo. Configure here.
Note
Add customizable sent message bubble and text colors to mobile appearance settings
HsvColorPickeror hex input; text color can be set to auto (derived for readability), white, black, or custom.AppearancePreferencesProviderexposesuserBubbleColoranduserBubbleTextColorwith setters; changes update theme variables immediately without a reload.createUserBubbleOverridesin mobileTheme.ts generates coherent CSS variable overrides for the bubble, text, and related tokens like inline code and mentions.sanitizePreferencesin mobile-preferences.ts now sanitizes new color fields and preserves explicitnull; out-of-tree callers that merge preferences without sanitization may see stale bubble colors.Macroscope summarized 4d02613.