feat: Allow custom hex accent color

Author: Malusnow

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",

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<GitLensColors> {
-  const { palette, options } = context;
+  const { palette, accent } = context;
 
   const graphLaneColors = [
     palette.mauve,
@@ -21,22 +21,16 @@ export default function colors(context: ThemeContext): Partial<GitLensColors> {
     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<GitLensColors> {
     "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,

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 {

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<string, string> => {
-  const { options, palette } = context;
-  const accent = palette[options.accent];
+  const { palette, accent } = context;
 
   return {
     "button.secondaryBorder": accent,

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,

packages/catppuccin-vsc/src/theme/uiColors.ts

@@ -6,9 +6,8 @@ import uiCustomizations from "./ui";
 export const getUiColors = (
   context: ThemeContext,
 ): Partial<Record<keyof WorkbenchColors, string>> => {
-  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)

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<FlavorsPlusAll<Record<string, string>>>;
 
+export type CustomAccentColors = Partial<FlavorsPlusAll<string>>;
+
 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;
 };

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<CatppuccinBracketMode>("bracketMode"),
     extraBordersEnabled: config.get<boolean>("extraBordersEnabled"),
     customUIColors: config.get<CustomUIColors>("customUIColors"),
+    customAccentColors: config.get<CustomAccentColors>("customAccentColors"),
     syncWithIconPack: config.get<boolean>("syncWithIconPack"),
   } satisfies Partial<ThemeOptions>;
   return {