mirror of
https://github.com/better-auth/better-hub
synced 2026-08-09 12:26:04 +00:00
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:
@@ -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 };
|
||||
|
||||
@@ -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 = {
|
||||
|
||||
Reference in New Issue
Block a user