New light + dark color scheme from Figma, with contrast fixes - #276
Merged
Merged
Conversation
Replaces the warm charcoal ladder (#231F20 / #2C2829 / #353132 / #3F3A3B) with neutral greys measured from the Figma dark-mode designs: - bg/base #1A1A1A: background, card, sidebar, chat top bar, composer - bg/level1 #232323: message hover, popovers/menus - bg/level2 #2C2C2C: selected sidebar row, muted/secondary/accent fills - borders/subtle #242424: dividers, search, composer, sidebar border - borders/default #4A4A4A: border-strong (link-preview card, message action toolbar); form inputs keep #4A4A4A so fields stay visible on dialogs Text tokens and the #DE5D83 brand pink are unchanged (the Figma text greys are the existing tokens at reduced opacity). Light mode untouched. Because the sidebar now shares bg/base, active sidebar rows add dark:bg-sidebar-accent (they used bg-background, which would vanish). Boot splash and iOS theme-color updated to #1A1A1A. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01MUFbG57m3Ha4mL9uYrUfPu
The sidebar now shares the #1A1A1A base with the chat, so the fill step that used to separate them is gone; the Figma frames use a 1px borders/subtle line instead. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01MUFbG57m3Ha4mL9uYrUfPu
Light tokens measured from the Figma light-mode designs: - bg/base #FCFCFB (chat, top bar, composer, cards); sidebar #FBFBF9 - selected sidebar row #EDECE9 (sidebar-accent); hover stays #F5F5F5 - text/primary #0B0B0B (was #231F20); text/muted #898780 - borders/subtle #E3E3E2 (dividers, search, composer, link cards) - borders/default #898780 (message action toolbar) Components: - Active sidebar rows use bg-sidebar-accent in both themes (bg-background now matches the sidebar and would hide the selection). - Sidebar/chat divider now in both themes. - Message action toolbar uses border-strong in both themes. - Fix: the dark #4A4A4A outline belongs on the web link-preview card, not the internal message-preview card it was applied to earlier. Tests updated for the new active-row class and computed colors (UnfurlCard, MessageInput send button, sidebar nav). Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01MUFbG57m3Ha4mL9uYrUfPu
- Light muted text #898780 -> #6D6B64. The Figma value is 3.5:1 on the base (3.3:1 on a hovered message); #6D6B64 is >= 4.5:1 on base, hover, selected rows and popovers. - New --color-brand-strong #C15071 (hover #A9455F) for pink surfaces that carry text: unread badges, the thread "new" pill, and default buttons in dark mode. White on #DE5D83 is 3.5:1; on #C15071 it is 4.5:1. #DE5D83 stays for icon/dot uses (send button, status dots). Composer/search border contrast intentionally left as designed for now. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01MUFbG57m3Ha4mL9uYrUfPu
- Dark --color-sidebar #1A1A1A -> #1D1D1D (selected row #2C2C2C and #242424 dividers unchanged). - AppTopBar uses bg-chat-top instead of bg-sidebar, so the full-width top bar stays on the chat base (#1A1A1A dark / #FCFCFB light) as in the Figma, rather than picking up the sidebar tint. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01MUFbG57m3Ha4mL9uYrUfPu
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01MUFbG57m3Ha4mL9uYrUfPu
Matches the search bar outline; #898780 read too heavy. Dark mode keeps #4A4A4A (per the Figma), since #242424 would vanish on the hovered row. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01MUFbG57m3Ha4mL9uYrUfPu
tahatariq-DT
changed the title
lifeofguenter
approved these changes
Sep 29, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Implements the light and dark color schemes from the Figma frames (per Günter's request for a new scheme in both themes).
Dark mode — neutral greys (replaces warm charcoal)
Light mode — warm off-whites
Accessibility (WCAG AA)
brand-strong#C15071 for pink surfaces with text (unread badges, thread pill, dark default buttons): white on #DE5D83 was 3.5:1, now 4.5:1. #DE5D83 stays for icons/dots.Other
bg-sidebar-accent(bg-background now equals the sidebar)bg-chat-topText tokens and the brand pink are otherwise unchanged. Browser tests updated for the new computed colors; CI green (lint, backend, frontend incl. 100% coverage, CodeQL).