Conversation
There was a problem hiding this comment.
Pull request overview
This PR adjusts the Chakra UI theme to make the dark mode palette less blue and closer to a GitHub-like dark scheme, and adds more explicit theming for several components.
Changes:
- Tweaks the
ui.darkandui.darkSlatecolor values to new, less-blue hex values. - Introduces semantic color tokens for body background, text, borders, and placeholders, and adds a global body style that sets the background based on
colorMode. - Adds component-level theming for
Modal,Card,Menu, andPopoverto use custom dark/light backgrounds and border colors.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
frontend/src/theme.tsx
Outdated
| "chakra-body-bg": { | ||
| _light: "white", | ||
| _dark: "#0d1117", | ||
| }, |
There was a problem hiding this comment.
You define semantic color tokens for "chakra-body-bg" here, but the global styles below set body.bg directly to ui.dark or white instead of using this token. That means the body background will not actually follow the semantic token value and you now have two separate sources of truth to keep in sync. To improve maintainability, consider wiring the global body background to this semantic token (or removing the token if it's intentionally unused).
| Modal: { | ||
| baseStyle: (props: any) => ({ | ||
| dialog: { | ||
| bg: props.colorMode === "dark" ? "#161b22" : "white", | ||
| }, |
There was a problem hiding this comment.
The new Modal, Card, Menu, and Popover baseStyle definitions all hardcode the same dark background color ("#161b22") in multiple places instead of reusing an existing theme token like ui.dark or a semantic token. This duplication makes it harder to tweak the dark theme later and increases the chance that one component diverges from the others. It would be more maintainable to centralize this color in the theme (for example via an existing color token) and reference that token from each component style.

TODO