mirror of
https://github.com/coder/coder.git
synced 2026-09-24 15:04:27 +08:00
Danielle Maywood
7e8559aac0
## Problem The git diff on the `/agents` page had color issues: the editor background followed light mode but the syntax highlighting used dark mode (`github-dark-high-contrast`), and the filename header used light-colored text on a light background. The root cause was hardcoded dark theme options in the `FileDiff` component: ```tsx themeType: "dark", theme: "github-dark-high-contrast", ``` ## Fix Uses the same theme-aware pattern as every other diff/file viewer in the codebase (`WriteFileTool`, `EditFilesTool`, `ReadFileTool`, `Tool`, `response.tsx`): 1. `useTheme()` from `@emotion/react` to read `palette.mode` 2. `getDiffViewerOptions(isDark)` from the shared `utils.ts` module — returns `github-light` theme for light mode, `github-dark-high-contrast` for dark mode 3. Reuses `DIFFS_FONT_STYLE` and `diffViewerCSS` constants instead of inlining duplicates ## Storybook coverage Added four new stories with real unified diff content: - **WithDiffDark** — dark mode with a PR link - **WithDiffLight** — light mode with a PR link - **NoPullRequestDark** — dark mode, "Files Changed" header - **NoPullRequestLight** — light mode, "Files Changed" header The existing stories only covered empty and parse-error states with no rendered diff.