feat: vesper theme (#174)

added vesper theme:

<img width="3020" height="2124" alt="image"
src="https://github.com/user-attachments/assets/376dc11c-af37-425c-b656-861b5fa069da"
/>
This commit is contained in:
Maxwell
2026-02-27 11:32:00 +10:00
committed by GitHub
parent 4d34eb8027
commit ee1b1defaf
2 changed files with 175 additions and 0 deletions
+2
View File
@@ -15,6 +15,7 @@ import {
supabase,
tailwind,
vercel,
vesper,
zinc,
LEGACY_THEME_MAP,
} from "./themes";
@@ -36,6 +37,7 @@ const themes: ThemeDefinition[] = [
rabbit,
noir,
forest,
vesper,
];
export type { ThemeColors, ThemeDefinition, ThemeVariant, ShikiTheme };
+173
View File
@@ -4565,6 +4565,179 @@ export const forest: ThemeDefinition = {
},
};
// Vesper theme: Peppermint and orange flavored dark theme
export const vesper: ThemeDefinition = {
id: "vesper",
name: "Vesper",
description: "Peppermint and orange flavored dark theme",
dark: {
accentPreview: "#FFC799",
bgPreview: "#101010",
colors: {
"--background": "#101010",
"--foreground": "#FFFFFF",
"--card": "#161616",
"--card-foreground": "#FFFFFF",
"--primary": "#FFC799",
"--primary-foreground": "#101010",
"--secondary": "#1C1C1C",
"--secondary-foreground": "#FFFFFF",
"--muted": "#1C1C1C",
"--muted-foreground": "#A0A0A0",
"--accent": "#1C1C1C",
"--accent-foreground": "#99FFE4",
"--border": "#282828",
"--input": "#282828",
"--ring": "#FFC799",
"--destructive": "#FF8080",
"--success": "#99FFE4",
"--warning": "#FFC799",
"--scrollbar-thumb": "#343434",
"--scrollbar-thumb-hover": "#454545",
"--shader-bg": "#101010",
"--shader-filter": "none",
"--hero-border": "#282828",
"--diff-add-bar": "#99FFE4",
"--diff-del-bar": "#FF8080",
"--diff-mod-bar": "#FFC799",
"--link": "#FFC799",
"--info": "#99FFE4",
"--code-bg": "#101010",
"--code-block-bg": "#161616",
"--inline-code-bg": "rgba(255, 199, 153, 0.12)",
"--line-gutter": "#505050",
"--line-highlight": "rgba(255, 199, 153, 0.10)",
"--search-highlight": "rgba(153, 255, 228, 0.15)",
"--search-highlight-active": "rgba(153, 255, 228, 0.30)",
"--selection-bg": "rgba(255, 255, 255, 0.15)",
"--table-row-alt": "#161616",
"--diff-add-bg": "rgba(153, 255, 228, 0.10)",
"--diff-del-bg": "rgba(255, 128, 128, 0.10)",
"--diff-add-text": "#99FFE4",
"--diff-del-text": "#FF8080",
"--diff-add-gutter": "rgba(153, 255, 228, 0.08)",
"--diff-del-gutter": "rgba(255, 128, 128, 0.08)",
"--diff-word-add": "rgba(153, 255, 228, 0.22)",
"--diff-word-del": "rgba(255, 128, 128, 0.22)",
"--alert-note": "#99FFE4",
"--alert-tip": "#99FFE4",
"--alert-important": "#FFC799",
"--alert-warning": "#FFC799",
"--alert-caution": "#FF8080",
"--contrib-0": "#1C1C1C",
"--contrib-1": "#3D3020",
"--contrib-2": "#6B5030",
"--contrib-3": "#A07040",
"--contrib-4": "#FFC799",
},
syntax: convertToShikiTheme(
{
foreground: "#FFFFFF",
constant: "#FFC799",
string: "#99FFE4",
comment: "#8B8B8B",
keyword: "#A0A0A0",
parameter: "#FFFFFF",
function: "#FFC799",
stringExpression: "#99FFE4",
punctuation: "#A0A0A0",
link: "#FFC799",
number: "#FFC799",
property: "#FFFFFF",
highlight: "rgba(255, 199, 153, 0.10)",
highlightHover: "rgba(255, 199, 153, 0.06)",
highlightBorder: "#FFC799",
diffInserted: "#99FFE4",
diffDeleted: "#FF8080",
},
"dark",
),
},
light: {
accentPreview: "#D98A4B",
bgPreview: "#FAFAFA",
colors: {
"--background": "#FAFAFA",
"--foreground": "#1A1A1A",
"--card": "#FFFFFF",
"--card-foreground": "#1A1A1A",
"--primary": "#D98A4B",
"--primary-foreground": "#FFFFFF",
"--secondary": "#F0F0F0",
"--secondary-foreground": "#1A1A1A",
"--muted": "#F0F0F0",
"--muted-foreground": "#707070",
"--accent": "#FFF5ED",
"--accent-foreground": "#D98A4B",
"--border": "#E0E0E0",
"--input": "#E0E0E0",
"--ring": "#D98A4B",
"--destructive": "#E05050",
"--success": "#2A9D8F",
"--warning": "#D98A4B",
"--scrollbar-thumb": "#D0D0D0",
"--scrollbar-thumb-hover": "#B0B0B0",
"--shader-bg": "#FAFAFA",
"--shader-filter": "invert(1) contrast(1.4)",
"--hero-border": "rgba(26, 26, 26, 0.08)",
"--diff-add-bar": "#2A9D8F",
"--diff-del-bar": "#E05050",
"--diff-mod-bar": "#D98A4B",
"--link": "#D98A4B",
"--info": "#2A9D8F",
"--code-bg": "#FAFAFA",
"--code-block-bg": "#F0F0F0",
"--inline-code-bg": "rgba(217, 138, 75, 0.10)",
"--line-gutter": "#A0A0A0",
"--line-highlight": "rgba(217, 138, 75, 0.08)",
"--search-highlight": "rgba(42, 157, 143, 0.12)",
"--search-highlight-active": "rgba(42, 157, 143, 0.22)",
"--selection-bg": "rgba(217, 138, 75, 0.15)",
"--table-row-alt": "#FFFFFF",
"--diff-add-bg": "rgba(42, 157, 143, 0.10)",
"--diff-del-bg": "rgba(224, 80, 80, 0.10)",
"--diff-add-text": "#1E7D71",
"--diff-del-text": "#E05050",
"--diff-add-gutter": "rgba(42, 157, 143, 0.08)",
"--diff-del-gutter": "rgba(224, 80, 80, 0.08)",
"--diff-word-add": "rgba(42, 157, 143, 0.18)",
"--diff-word-del": "rgba(224, 80, 80, 0.18)",
"--alert-note": "#2A9D8F",
"--alert-tip": "#2A9D8F",
"--alert-important": "#D98A4B",
"--alert-warning": "#D98A4B",
"--alert-caution": "#E05050",
"--contrib-0": "#F0F0F0",
"--contrib-1": "#FFE4CC",
"--contrib-2": "#FFCC99",
"--contrib-3": "#F0A060",
"--contrib-4": "#D98A4B",
},
syntax: convertToShikiTheme(
{
foreground: "#1A1A1A",
constant: "#B06820",
string: "#1E7D71",
comment: "#909090",
keyword: "#707070",
parameter: "#1A1A1A",
function: "#B06820",
stringExpression: "#1E7D71",
punctuation: "#707070",
link: "#B06820",
number: "#B06820",
property: "#1A1A1A",
highlight: "rgba(217, 138, 75, 0.08)",
highlightHover: "rgba(217, 138, 75, 0.05)",
highlightBorder: "#D98A4B",
diffInserted: "#2A9D8F",
diffDeleted: "#E05050",
},
"light",
),
},
};
/*
// Mono theme: Minimalist monochrome (similar to Noir but different gradient)
export const mono: ThemeDefinition = {