add darkmode and migrate to semantic tokens#5495
Open
ejc wants to merge 10 commits into
Open
Conversation
👷 Deploy request for old-char pending review.Visit the deploys page to approve it
|
![cursor[bot]](https://avatars.githubusercontent.com/in/1210556?s=60&v=4){kind=small}
Wire up light/dark/system appearance preference, warm stone semantic palettes, and replace hardcoded neutral/stone colors across the desktop shell and shared UI packages. Co-authored-by: Cursor <cursoragent@cursor.com>
Replace invalid bg-muted0 and hover:bg-accent0 classes with semantic muted/accent opacity utilities so pending chips and controls render correctly. Co-authored-by: Cursor <cursoragent@cursor.com>
Use primary-foreground bubbles on the dark chat panel instead of card, keep dark text on light-blue user messages, and toggle the dark class from stored hypr-theme before React hydrates. Co-authored-by: Cursor <cursoragent@cursor.com>
Use primary-foreground surfaces on the dark chat panel so the message input and context bar stay distinct from bg-primary in dark mode. Co-authored-by: Cursor <cursoragent@cursor.com>
Drive chat panel, toolbar, bubbles, and elevated chrome from the saved light/dark/system theme instead of always using the dark stone shell, and set explicit text colors on the input surface so ProseMirror content stays readable. Co-authored-by: Cursor <cursoragent@cursor.com>
Chat floating window and sidebar always use the original stone shell regardless of app theme, with white elevated inputs and readable text. Also gate theme hydration behind settings load, align boot script tokens, and use dark drop shadows on floating chat surfaces. Co-authored-by: Cursor <cursoragent@cursor.com>
Use accent fill and ring border for selected cards so selection stays visible when primary and card share the same dark palette value. Co-authored-by: Cursor <cursoragent@cursor.com>
Apply dprint formatting and minor class-order cleanup left unstaged after the dark mode work. Co-authored-by: Cursor <cursoragent@cursor.com>
Bootstrap appearance from persisted settings before React renders and mirror theme changes into hypr-theme whenever settings load or save. Co-authored-by: Cursor <cursoragent@cursor.com>
ejc
force-pushed
the
feat/dark-mode-semantic-tokens
branch
from
ecfb435 to
22ca911
Compare
There was a problem hiding this comment.
Cursor Bugbot has reviewed your changes 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 22ca911. Configure here.
Regenerate control hover now brightens like copy, and React mounts immediately while theme bootstrap runs in parallel instead of blocking on settingsCommands.load(). Co-authored-by: Cursor <cursoragent@cursor.com>
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
1 participant
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.
Description
@hypr/ui, including alert and sidebar accent colors, with desktop dark-mode overridesTest plan
pnpm -F desktop typecheckandpnpm -F desktop testMade with Cursor
Note
Medium Risk
Very broad visual refactor across most desktop surfaces; regressions are likely in contrast or hover states, though behavior is unchanged. Theme boot and settings sync must stay aligned to avoid a flash of wrong appearance.
Overview
Adds light / dark / system appearance with flash-free startup:
theme-boot.jstogglesdarkon<html>before React, thenAppThemeProviderandbootstrapThemeFromSettingssync preference from settings intolocalStorage(hypr-theme).Across the desktop app, hardcoded
neutral-*/stone-*Tailwind classes are replaced with semantic tokens (background,card,foreground,muted-foreground,accent,primary,destructive,border, etc.) so shell areas follow the active theme—calendar, contacts, onboarding, billing dialogs, top meeting timeline, composer, changelog, and more.Chat and composer keep a dedicated dark “stone” chrome via new
chat/surface.tsanduseChatAppearance: panels usebg-primary/ elevated inputs and bubbles useprimary-foreground, independent of whether the rest of the app is light. Contact avatars gainContactFacehashwith dark-aware palette classes.Tests are updated/added for chat surfaces, input styling, timeline selection, and panel shells.
Reviewed by Cursor Bugbot for commit 800d1cb. Bugbot is set up for automated code reviews on this repo. Configure here.