Skip to content

feat: add vesper theme #220

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
nexxeln wants to merge 3 commits into
base: main
Choose a base branch
from
Open

feat: add vesper theme #220

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
53d73e9
feat: add vesper theme
nexxeln May 7, 2026
6e498f8
fix: use vesper syntax highlighting
nexxeln May 7, 2026
cdecbb7
Merge branch 'main' into nxl/add-vesper-theme
benvinegar May 8, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,8 @@ All notable user-visible changes to Hunk are documented in this file.

### Added

- Added the Vesper theme as a built-in diff viewer theme.

### Changed

### Fixed
Expand Down
2 changes: 1 addition & 1 deletion README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -110,7 +110,7 @@ You can persist preferences to a config file:
Example:

```toml
theme = "graphite" # graphite, midnight, paper, ember
theme = "graphite" # graphite, vesper, midnight, paper, ember
mode = "auto" # auto, split, stack
exclude_untracked = false
line_numbers = true
Expand Down
26 changes: 13 additions & 13 deletions docs/opentui-component.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -99,19 +99,19 @@ if (!metadata) {

## Props

| Prop | Type | Default | Notes |
| ------------------- | ------------------------------------------------ | ------------ | ------------------------------------------------------------------------- |
| `diff` | `HunkDiffFile` | `undefined` | File to render. When omitted, the component shows an empty-state message. |
| `layout` | `"split" \| "stack"` | `"split"` | Chooses side-by-side or stacked rendering. |
| `width` | `number` | — | Required content width in terminal columns. |
| `theme` | `"graphite" \| "midnight" \| "paper" \| "ember"` | `"graphite"` | Matches Hunk's built-in themes. |
| `showLineNumbers` | `boolean` | `true` | Toggles line-number columns. |
| `showHunkHeaders` | `boolean` | `true` | Toggles `@@ ... @@` hunk header rows. |
| `wrapLines` | `boolean` | `false` | Wraps long lines instead of clipping horizontally. |
| `horizontalOffset` | `number` | `0` | Scroll offset for non-wrapped code rows. |
| `highlight` | `boolean` | `true` | Enables syntax highlighting. |
| `scrollable` | `boolean` | `true` | Set to `false` if your parent view owns scrolling. |
| `selectedHunkIndex` | `number` | `0` | Highlights one hunk as the active target. |
| Prop | Type | Default | Notes |
| ------------------- | ------------------------------------------------------------ | ------------ | ------------------------------------------------------------------------- |
| `diff` | `HunkDiffFile` | `undefined` | File to render. When omitted, the component shows an empty-state message. |
| `layout` | `"split" \| "stack"` | `"split"` | Chooses side-by-side or stacked rendering. |
| `width` | `number` | — | Required content width in terminal columns. |
| `theme` | `"graphite" \| "vesper" \| "midnight" \| "paper" \| "ember"` | `"graphite"` | Matches Hunk's built-in themes. |
| `showLineNumbers` | `boolean` | `true` | Toggles line-number columns. |
| `showHunkHeaders` | `boolean` | `true` | Toggles `@@ ... @@` hunk header rows. |
| `wrapLines` | `boolean` | `false` | Wraps long lines instead of clipping horizontally. |
| `horizontalOffset` | `number` | `0` | Scroll offset for non-wrapped code rows. |
| `highlight` | `boolean` | `true` | Enables syntax highlighting. |
| `scrollable` | `boolean` | `true` | Set to `false` if your parent view owns scrolling. |
| `selectedHunkIndex` | `number` | `0` | Highlights one hunk as the active target. |

## Other exports

Expand Down
2 changes: 1 addition & 1 deletion src/opentui/HunkDiffView.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,6 +61,6 @@ describe("HunkDiffView", () => {
});

test("exports the documented built-in theme names", () => {
expect(HUNK_DIFF_THEME_NAMES).toEqual(["graphite", "midnight", "paper", "ember"]);
expect(HUNK_DIFF_THEME_NAMES).toEqual(["graphite", "vesper", "midnight", "paper", "ember"]);
});
});
2 changes: 1 addition & 1 deletion src/opentui/themes.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
export const HUNK_DIFF_THEME_NAMES = ["graphite", "midnight", "paper", "ember"] as const;
export const HUNK_DIFF_THEME_NAMES = ["graphite", "vesper", "midnight", "paper", "ember"] as const;

export type HunkDiffThemeName = (typeof HUNK_DIFF_THEME_NAMES)[number];
2 changes: 1 addition & 1 deletion src/ui/diff/pierre.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -229,7 +229,7 @@ describe("Pierre diff rows", () => {
const file = createMarkdownDiffFile();
const highlighted = await loadHighlightedDiff(file, "dark");

for (const themeId of ["graphite", "midnight", "ember"] as const) {
for (const themeId of ["graphite", "vesper", "midnight", "ember"] as const) {
const theme = resolveTheme(themeId, null);
const rows = buildStackRows(file, highlighted, theme).filter(
(row): row is Extract<DiffRow, { type: "stack-line" }> =>
Expand Down
4 changes: 2 additions & 2 deletions src/ui/lib/ui-lib.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -169,7 +169,7 @@ describe("ui helpers", () => {
menus.theme
.filter((entry): entry is Extract<MenuEntry, { kind: "item" }> => entry.kind === "item")
.map((entry) => entry.label),
).toEqual(["Graphite", "Midnight", "Paper", "Ember"]);
).toEqual(["Graphite", "Vesper", "Midnight", "Paper", "Ember"]);
expect(
menus.theme.some(
(entry) => entry.kind === "item" && entry.label === "Graphite" && entry.checked,
Expand Down Expand Up @@ -367,6 +367,6 @@ describe("ui helpers", () => {
expect(midnight.id).toBe("midnight");
expect(missingLight.id).toBe("graphite");
expect(missingDark.id).toBe("graphite");
expect(resolveTheme("ember", null).syntaxStyle).toBeDefined();
expect(resolveTheme("vesper", null).syntaxStyle).toBeDefined();
});
});
49 changes: 49 additions & 0 deletions src/ui/themes.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -137,6 +137,55 @@ export const THEMES: AppTheme[] = [
punctuation: "#7f8b97",
},
),
withLazySyntaxStyle(
{
id: "vesper",
label: "Vesper",
appearance: "dark",
background: "#101010",
panel: "#1A1A1A",
panelAlt: "#232323",
border: "#282828",
accent: "#FFC799",
accentMuted: "#575757",
text: "#FFFFFF",
muted: "#A0A0A0",
addedBg: "#1A1A1A",
removedBg: "#1A1A1A",
contextBg: "#101010",
addedContentBg: "#232323",
removedContentBg: "#232323",
contextContentBg: "#1A1A1A",
Comment thread
greptile-apps[bot] marked this conversation as resolved.
Outdated
addedSignColor: "#99FFE4",
removedSignColor: "#FF8080",
lineNumberBg: "#101010",
lineNumberFg: "#505050",
selectedHunk: "#282828",
badgeAdded: "#99FFE4",
badgeRemoved: "#FF8080",
badgeNeutral: "#B0B0B0",
fileNew: "#99FFE4",
fileDeleted: "#FF8080",
fileRenamed: "#FFD1A8",
fileModified: "#FFC799",
fileUntracked: "#B3FFE4",
noteBorder: "#FFC799",
noteBackground: "#1A1A1A",
noteTitleBackground: "#232323",
noteTitleText: "#FFFFFF",
},
{
default: "#FFFFFF",
keyword: "#FFC799",
string: "#99FFE4",
comment: "#5C5C5C",
number: "#FFD1A8",
function: "#FFFFFF",
property: "#B0B0B0",
type: "#FFD1A8",
punctuation: "#7E7E7E",
},
),
withLazySyntaxStyle(
{
id: "midnight",
Expand Down