From dfce0069f1bc859c79475eb144b988e66d6f5489 Mon Sep 17 00:00:00 2001 From: Malusnow <1721487579@qq.com> Date: Sun, 16 Nov 2025 17:35:19 +0800 Subject: [PATCH] feat: Allow custom hex accent color --- packages/catppuccin-vsc/package.json | 38 ++++++++++++++++++- .../src/theme/extensions/gitlens.ts | 22 ++++------- packages/catppuccin-vsc/src/theme/index.ts | 9 +++++ .../src/theme/ui/azureDataStudio.ts | 3 +- .../src/theme/ui/customNames.ts | 3 +- packages/catppuccin-vsc/src/theme/uiColors.ts | 3 +- packages/catppuccin-vsc/src/types/index.d.ts | 10 ++++- packages/catppuccin-vsc/src/utilities.ts | 2 + 8 files changed, 67 insertions(+), 23 deletions(-) diff --git a/packages/catppuccin-vsc/package.json b/packages/catppuccin-vsc/package.json index 0163b395..43c543c0 100644 --- a/packages/catppuccin-vsc/package.json +++ b/packages/catppuccin-vsc/package.json @@ -106,9 +106,45 @@ "sky", "sapphire", "blue", - "lavender" + "lavender", + "custom" ] }, + "catppuccin.customAccentColors": { + "scope": "application", + "type": "object", + "default": { + "all": "#cba6f7" + }, + "description": "Custom accent colors as hex codes. Only used when `accentColor` is set to `custom`. Use `all` for all flavors or specify per flavor (`latte`, `frappe`, `macchiato`, `mocha`).", + "properties": { + "all": { + "type": "string", + "pattern": "^#[0-9A-Fa-f]{6}$", + "description": "Custom accent color for all flavors" + }, + "latte": { + "type": "string", + "pattern": "^#[0-9A-Fa-f]{6}$", + "description": "Custom accent color for Latte flavor" + }, + "frappe": { + "type": "string", + "pattern": "^#[0-9A-Fa-f]{6}$", + "description": "Custom accent color for Frappé flavor" + }, + "macchiato": { + "type": "string", + "pattern": "^#[0-9A-Fa-f]{6}$", + "description": "Custom accent color for Macchiato flavor" + }, + "mocha": { + "type": "string", + "pattern": "^#[0-9A-Fa-f]{6}$", + "description": "Custom accent color for Mocha flavor" + } + } + }, "catppuccin.workbenchMode": { "scope": "application", "type": "string", diff --git a/packages/catppuccin-vsc/src/theme/extensions/gitlens.ts b/packages/catppuccin-vsc/src/theme/extensions/gitlens.ts index 5a469fb3..b60b9c4c 100644 --- a/packages/catppuccin-vsc/src/theme/extensions/gitlens.ts +++ b/packages/catppuccin-vsc/src/theme/extensions/gitlens.ts @@ -2,7 +2,7 @@ import type { GitLensColors, ThemeContext } from "@/types"; import { opacity, shade, transparent } from "@/theme/utilities"; export default function colors(context: ThemeContext): Partial { - const { palette, options } = context; + const { palette, accent } = context; const graphLaneColors = [ palette.mauve, @@ -21,22 +21,16 @@ export default function colors(context: ThemeContext): Partial { palette.sky, ]; - const accentIndex = graphLaneColors.indexOf(palette[options.accent]); + const accentIndex = graphLaneColors.indexOf(accent); return { "gitlens.gutterBackgroundColor": opacity(palette.surface0, 0.3), "gitlens.gutterForegroundColor": palette.text, - "gitlens.gutterUncommittedForegroundColor": palette[options.accent], + "gitlens.gutterUncommittedForegroundColor": accent, "gitlens.trailingLineBackgroundColor": transparent, "gitlens.trailingLineForegroundColor": opacity(palette.text, 0.3), - "gitlens.lineHighlightBackgroundColor": opacity( - palette[options.accent], - 0.15, - ), - "gitlens.lineHighlightOverviewRulerColor": opacity( - palette[options.accent], - 0.8, - ), + "gitlens.lineHighlightBackgroundColor": opacity(accent, 0.15), + "gitlens.lineHighlightOverviewRulerColor": opacity(accent, 0.8), "gitlens.openAutolinkedIssueIconColor": palette.green, "gitlens.closedAutolinkedIssueIconColor": palette.mauve, "gitlens.closedPullRequestIconColor": palette.red, @@ -63,10 +57,8 @@ export default function colors(context: ThemeContext): Partial { "gitlens.decorations.statusMergingOrRebasingForegroundColor": palette.yellow, "gitlens.decorations.workspaceRepoMissingForegroundColor": palette.subtext0, - "gitlens.decorations.workspaceCurrentForegroundColor": - palette[options.accent], - "gitlens.decorations.workspaceRepoOpenForegroundColor": - palette[options.accent], + "gitlens.decorations.workspaceCurrentForegroundColor": accent, + "gitlens.decorations.workspaceRepoOpenForegroundColor": accent, "gitlens.decorations.worktreeHasUncommittedChangesForegroundColor": palette.peach, "gitlens.decorations.worktreeMissingForegroundColor": palette.maroon, diff --git a/packages/catppuccin-vsc/src/theme/index.ts b/packages/catppuccin-vsc/src/theme/index.ts index bdc6e796..e04bc6f3 100644 --- a/packages/catppuccin-vsc/src/theme/index.ts +++ b/packages/catppuccin-vsc/src/theme/index.ts @@ -21,6 +21,7 @@ export const defaultOptions: ThemeOptions = { bracketMode: "rainbow", extraBordersEnabled: false, customUIColors: {}, + customAccentColors: {}, syncWithIconPack: true, }; @@ -48,12 +49,20 @@ export const compileTheme = ( ...options.colorOverrides?.[flavor], }; + const accent = + options.accent === "custom" + ? (options.customAccentColors?.[flavor] ?? + options.customAccentColors?.all ?? + palette.mauve) + : palette[options.accent]; + const context: ThemeContext = { flavor, palette, paletteAnsi, options, isLatte: flavor === "latte", + accent, }; return { diff --git a/packages/catppuccin-vsc/src/theme/ui/azureDataStudio.ts b/packages/catppuccin-vsc/src/theme/ui/azureDataStudio.ts index dca01a8d..4e807035 100644 --- a/packages/catppuccin-vsc/src/theme/ui/azureDataStudio.ts +++ b/packages/catppuccin-vsc/src/theme/ui/azureDataStudio.ts @@ -5,8 +5,7 @@ import type { ThemeContext } from "@/types"; * deprecated in VSCode. */ const azureDataStudio = (context: ThemeContext): Record => { - const { options, palette } = context; - const accent = palette[options.accent]; + const { palette, accent } = context; return { "button.secondaryBorder": accent, diff --git a/packages/catppuccin-vsc/src/theme/ui/customNames.ts b/packages/catppuccin-vsc/src/theme/ui/customNames.ts index 1811e6e3..ab8a6905 100644 --- a/packages/catppuccin-vsc/src/theme/ui/customNames.ts +++ b/packages/catppuccin-vsc/src/theme/ui/customNames.ts @@ -47,8 +47,7 @@ const parseCustomUiColor = (k: string, v: string): [string, number] => { const hexColorRegex = /^#([\dA-Fa-f]{3,4}){1,2}$/; const customNamedColors = (context: ThemeContext): CustomNamedColors => { - const { flavor, palette, options } = context; - const accent = palette[options.accent]; + const { flavor, palette, options, accent } = context; const customUIColors = { ...options.customUIColors.all, diff --git a/packages/catppuccin-vsc/src/theme/uiColors.ts b/packages/catppuccin-vsc/src/theme/uiColors.ts index c3e43b82..3e5ab1d2 100644 --- a/packages/catppuccin-vsc/src/theme/uiColors.ts +++ b/packages/catppuccin-vsc/src/theme/uiColors.ts @@ -6,9 +6,8 @@ import uiCustomizations from "./ui"; export const getUiColors = ( context: ThemeContext, ): Partial> => { - const { palette, paletteAnsi, options, isLatte } = context; + const { palette, paletteAnsi, options, isLatte, accent } = context; - const accent = palette[options.accent]; const dropBackground = opacity(accent, 0.2); const border = options.extraBordersEnabled ? opacity(palette.overlay1, 0.15) diff --git a/packages/catppuccin-vsc/src/types/index.d.ts b/packages/catppuccin-vsc/src/types/index.d.ts index 9ebd6b4c..f2e6e25f 100644 --- a/packages/catppuccin-vsc/src/types/index.d.ts +++ b/packages/catppuccin-vsc/src/types/index.d.ts @@ -17,7 +17,7 @@ export type * from "@catppuccin/vsc-typegen/types/errorlens"; export type * from "@catppuccin/vsc-typegen/types/github-pull-request"; export type * from "@catppuccin/vsc-typegen/types/gitlens"; -export type CatppuccinAccent = AccentName; +export type CatppuccinAccent = AccentName | "custom"; export type CatppuccinFlavor = FlavorName; export { type ColorName } from "@catppuccin/palette"; export type CatppuccinWorkbenchMode = "default" | "flat" | "minimal"; @@ -41,6 +41,8 @@ export type ColorOverrides = Partial< export type CustomUIColors = Partial>>; +export type CustomAccentColors = Partial>; + export type ThemeOptions = { /** The accent color to use */ accent: CatppuccinAccent; @@ -71,6 +73,11 @@ export type ThemeOptions = { */ customUIColors: CustomUIColors; + /** + * Controls whether to sync the currently active Catppuccin flavor with the [Catppuccin Icon Pack](https://github.com/catppuccin/vscode-icons) + */ + customAccentColors: CustomAccentColors; + /** * Controls whether to sync the currently active Catppuccin flavor with the [Catppuccin Icon Pack](https://github.com/catppuccin/vscode-icons) */ @@ -90,4 +97,5 @@ export type ThemeContext = { paletteAnsi: CatppuccinPaletteAnsi; options: ThemeOptions; isLatte: boolean; + accent: string; }; diff --git a/packages/catppuccin-vsc/src/utilities.ts b/packages/catppuccin-vsc/src/utilities.ts index d9bbf478..82ce9eb4 100644 --- a/packages/catppuccin-vsc/src/utilities.ts +++ b/packages/catppuccin-vsc/src/utilities.ts @@ -18,6 +18,7 @@ import type { CatppuccinWorkbenchMode, ColorOverrides, CustomUIColors, + CustomAccentColors, ThemeOptions, ThemePaths, } from "./types"; @@ -120,6 +121,7 @@ export const getConfiguration = (): ThemeOptions => { bracketMode: config.get("bracketMode"), extraBordersEnabled: config.get("extraBordersEnabled"), customUIColors: config.get("customUIColors"), + customAccentColors: config.get("customAccentColors"), syncWithIconPack: config.get("syncWithIconPack"), } satisfies Partial; return {