Restyle: color scheme warm-ish + serif font#1052
Conversation
- add self-hosted fonts: Mona Sans (body), Mozilla Text (headings), Space Mono (code) - introduce full light and dark color palette with a cohesive slate dark theme - fix dark-mode border visibility across form controls (input, select, switch, toggle, etc.) - make chat-input font size responsive and match its background/outline to slate - darken the user message bubble slightly in light mode - remove sidebar section dividers
- Remap Tailwind --color-white to #fafafa and --color-black to #1a2329 so nothing renders as #ffffff/#000000; apply the same in provider-icon SVG fills and theme-provider hardcoded colors - Swap heading font from Mozilla Text to EB Garamond and drop DM Sans from the body stack - Set explicit 14px on chat message bubbles - Restyle skill-form Description/Instructions labels (responsive 14px, new foreground colors)
![cursor[bot]](https://avatars.githubusercontent.com/in/1210556?s=60&v=4){kind=small}
| root.classList.add(theme) | ||
|
|
||
| const bgColor = theme === 'dark' ? '#0a0a0a' : '#fff' | ||
| const bgColor = theme === 'dark' ? '#1a2329' : '#fafafa' |
There was a problem hiding this comment.
Theme chrome colors mismatch tokens
Medium Severity
The same PR sets page backgrounds in index.css to #f5f2ee (light) and #1b1e1f (dark), but theme-provider still paints the document root and theme-color meta tag with #fafafa and #1a2329. Mobile browser chrome and overscroll areas can show a different color than the app body.
Additional Locations (1)
Reviewed by Cursor Bugbot for commit 11c1818. Configure here.
| .filter((part) => part.type === 'text') | ||
| .map((part, j) => ( | ||
| <div key={j} className="px-4 rounded-2xl max-w-3/4 bg-muted dark:bg-secondary/60 ml-auto mt-6"> | ||
| <div key={j} className="px-4 rounded-2xl max-w-3/4 bg-accent dark:bg-secondary/60 ml-auto mt-6 text-[14px]"> |
There was a problem hiding this comment.
User bubble size ignores body scale
Low Severity
User message bubbles now force text-[14px] while the same PR moves the prompt input and overlay to var(--font-size-body) (16px on mobile, 14px from 768px up). On phones, user chat text renders smaller than the rest of the chat UI.
Reviewed by Cursor Bugbot for commit 11c1818. Configure here.
There was a problem hiding this comment.
Cursor Bugbot has reviewed your changes and found 1 potential issue.
There are 3 total unresolved issues (including 2 from previous reviews).
❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, have a team admin enable autofix in the Cursor dashboard.
Reviewed by Cursor Bugbot for commit 6ab47c1. Configure here.
| background-color: var(--color-background); | ||
| color: var(--color-foreground); | ||
| } | ||
| h1, |
There was a problem hiding this comment.
Sans font not on body
Medium Severity
The PR adds DM Sans via @fontsource, defines --font-sans in @theme, and documents it as the default UI font, but the base layer only sets font-family: var(--font-heading) on headings—not on body. Most chat and form text may keep the system sans stack instead of DM Sans.
Reviewed by Cursor Bugbot for commit 6ab47c1. Configure here.
1 participant
Note
Low Risk
Visual and theme-token changes only; no auth, data, or business-logic impact beyond slightly larger font bundles.
Overview
Restyles the app with a warmer light/dark palette in
index.css, remapping Tailwindwhite/blackto off-white and slate so surfaces avoid pure#fff/#000. Sidebar, card, border, and destructive tokens are updated for both themes; native/meta chrome intheme-providernow uses#fafafa/#1a2329instead of white and near-black.Typography adds self-hosted DM Sans (UI/body), Radley on headings and dialog/card titles, and Space Mono for code via new
@fontsourcedeps and imports inindex.tsx. Chat prompt overlay/textarea use--font-size-bodyinstead of hardcodedtext-base.Component tweaks align borders to
border-borderon inputs, selects, combobox, textarea, and toggle outline; chat prompt shell usesbg-sidebar; user message bubbles usebg-accentand 14px text; sidebar drops header/footer borders and internal separators; calendar SVG fills shift to#fafafa; skill form labels get explicit light/dark text colors.Reviewed by Cursor Bugbot for commit 6ab47c1. Bugbot is set up for automated code reviews on this repo. Configure here.