Add support for custom accent color theming

Enable users to set an accent color in the extension settings for improved theming customization. This change applies the accent color throughout the UI using CSS variables.

Author: inderdeep-singh-zomato

packages/types/src/global-settings.ts

@@ -184,6 +184,7 @@ export const globalSettingsSchema = z.object({
 	hasOpenedModeSelector: z.boolean().optional(),
 	lastModeExportPath: z.string().optional(),
 	lastModeImportPath: z.string().optional(),
+	accentColor: z.string().optional(),
 })
 
 export type GlobalSettings = z.infer<typeof globalSettingsSchema>

src/core/webview/webviewMessageHandler.ts

@@ -1692,6 +1692,10 @@ export const webviewMessageHandler = async (
 			await updateGlobalState("reasoningBlockCollapsed", message.bool ?? true)
 			// No need to call postStateToWebview here as the UI already updated optimistically
 			break
+		case "setAccentColor":
+			await updateGlobalState("accentColor", message.text ?? undefined)
+			await provider.postStateToWebview()
+			break
 		case "toggleApiConfigPin":
 			if (message.text) {
 				const currentPinned = getGlobalState("pinnedApiConfigs") ?? {}

src/shared/WebviewMessage.ts

@@ -199,6 +199,7 @@ export interface WebviewMessage {
 		| "profileThresholds"
 		| "setHistoryPreviewCollapsed"
 		| "setReasoningBlockCollapsed"
+		| "setAccentColor"
 		| "openExternal"
 		| "filterMarketplaceItems"
 		| "marketplaceButtonClicked"

webview-ui/src/App.tsx

@@ -79,6 +79,7 @@ const App = () => {
 		cloudOrganizations,
 		renderContext,
 		mdmCompliant,
+		accentColor,
 	} = useExtensionState()
 
 	// Create a persistent state manager
@@ -233,6 +234,18 @@ const App = () => {
 			}
 		}, [renderContext]),
 	)
+
+	// Apply accent color to CSS custom property
+	useEffect(() => {
+		if (accentColor) {
+			document.documentElement.style.setProperty("--accent", accentColor)
+			document.documentElement.style.setProperty("--color-accent", accentColor)
+		} else {
+			// Reset to default when no accent color is set
+			document.documentElement.style.removeProperty("--accent")
+			document.documentElement.style.removeProperty("--color-accent")
+		}
+	}, [accentColor])
 	// Track marketplace tab views
 	useEffect(() => {
 		if (tab === "marketplace") {

webview-ui/src/components/settings/SettingsView.tsx

@@ -791,6 +791,7 @@ const SettingsView = forwardRef<SettingsViewRef, SettingsViewProps>(({ onDone, t
 					{activeTab === "ui" && (
 						<UISettings
 							reasoningBlockCollapsed={reasoningBlockCollapsed ?? true}
+							accentColor={extensionState.accentColor}
 							setCachedStateField={setCachedStateField}
 						/>
 					)}

webview-ui/src/components/settings/UISettings.tsx

@@ -1,6 +1,6 @@
-import { HTMLAttributes } from "react"
+import { HTMLAttributes, useState, useEffect } from "react"
 import { useAppTranslation } from "@/i18n/TranslationContext"
-import { VSCodeCheckbox } from "@vscode/webview-ui-toolkit/react"
+import { VSCodeCheckbox, VSCodeTextField } from "@vscode/webview-ui-toolkit/react"
 import { Glasses } from "lucide-react"
 import { telemetryClient } from "@/utils/TelemetryClient"
 
@@ -11,11 +11,18 @@ import { ExtensionStateContextType } from "@/context/ExtensionStateContext"
 
 interface UISettingsProps extends HTMLAttributes<HTMLDivElement> {
 	reasoningBlockCollapsed: boolean
+	accentColor?: string
 	setCachedStateField: SetCachedStateField<keyof ExtensionStateContextType>
 }
 
-export const UISettings = ({ reasoningBlockCollapsed, setCachedStateField, ...props }: UISettingsProps) => {
+export const UISettings = ({ reasoningBlockCollapsed, accentColor, setCachedStateField, ...props }: UISettingsProps) => {
 	const { t } = useAppTranslation()
+	const [colorValue, setColorValue] = useState(accentColor || "")
+
+	// Sync local state with prop changes
+	useEffect(() => {
+		setColorValue(accentColor || "")
+	}, [accentColor])
 
 	const handleReasoningBlockCollapsedChange = (value: boolean) => {
 		setCachedStateField("reasoningBlockCollapsed", value)
@@ -26,6 +33,20 @@ export const UISettings = ({ reasoningBlockCollapsed, setCachedStateField, ...pr
 		})
 	}
 
+	const handleAccentColorChange = (value: string) => {
+		setColorValue(value)
+		// Only update if it's a valid color or empty
+		const trimmedValue = value.trim()
+		if (trimmedValue === "" || /^#[0-9A-Fa-f]{6}$/.test(trimmedValue)) {
+			setCachedStateField("accentColor", trimmedValue || undefined)
+
+			// Track telemetry event
+			telemetryClient.capture("ui_settings_accent_color_changed", {
+				hasColor: trimmedValue !== "",
+			})
+		}
+	}
+
 	return (
 		<div {...props}>
 			<SectionHeader>
@@ -49,6 +70,33 @@ export const UISettings = ({ reasoningBlockCollapsed, setCachedStateField, ...pr
 							{t("settings:ui.collapseThinking.description")}
 						</div>
 					</div>
+
+					{/* Accent Color Setting */}
+					<div className="flex flex-col gap-2">
+						<label className="font-medium" htmlFor="accent-color-input">
+							Accent Color
+						</label>
+						<div className="flex items-center gap-2">
+							<VSCodeTextField
+								id="accent-color-input"
+								value={colorValue}
+								placeholder="#007ACC"
+								onInput={(e: any) => handleAccentColorChange(e.target.value)}
+								data-testid="accent-color-input"
+								style={{ flex: 1 }}
+							/>
+							<input
+								type="color"
+								value={colorValue && /^#[0-9A-Fa-f]{6}$/.test(colorValue) ? colorValue : "#007ACC"}
+								onChange={(e) => handleAccentColorChange(e.target.value)}
+								className="h-8 w-16 cursor-pointer rounded border border-vscode-input-border"
+								data-testid="accent-color-picker"
+							/>
+						</div>
+						<div className="text-vscode-descriptionForeground text-sm">
+							Customize the accent color used throughout the extension. Leave empty to use the default theme color. Enter a hex color code (e.g., #007ACC) or use the color picker.
+						</div>
+					</div>
 				</div>
 			</Section>
 		</div>

webview-ui/src/context/ExtensionStateContext.tsx

@@ -165,6 +165,8 @@ export interface ExtensionStateContextType extends ExtensionState {
 	setIncludeCurrentTime: (value: boolean) => void
 	includeCurrentCost?: boolean
 	setIncludeCurrentCost: (value: boolean) => void
+	accentColor?: string
+	setAccentColor: (value: string | undefined) => void
 }
 
 export const ExtensionStateContext = createContext<ExtensionStateContextType | undefined>(undefined)
@@ -298,6 +300,7 @@ export const ExtensionStateContextProvider: React.FC<{ children: React.ReactNode
 	const [prevCloudIsAuthenticated, setPrevCloudIsAuthenticated] = useState(false)
 	const [includeCurrentTime, setIncludeCurrentTime] = useState(true)
 	const [includeCurrentCost, setIncludeCurrentCost] = useState(true)
+	const [accentColor, setAccentColor] = useState<string | undefined>(undefined)
 
 	const setListApiConfigMeta = useCallback(
 		(value: ProviderSettingsEntry[]) => setState((prevState) => ({ ...prevState, listApiConfigMeta: value })),
@@ -343,6 +346,10 @@ export const ExtensionStateContextProvider: React.FC<{ children: React.ReactNode
 					if ((newState as any).includeCurrentCost !== undefined) {
 						setIncludeCurrentCost((newState as any).includeCurrentCost)
 					}
+					// Update accentColor if present in state message
+					if ((newState as any).accentColor !== undefined) {
+						setAccentColor((newState as any).accentColor)
+					}
 					// Handle marketplace data if present in state message
 					if (newState.marketplaceItems !== undefined) {
 						setMarketplaceItems(newState.marketplaceItems)
@@ -596,6 +603,11 @@ export const ExtensionStateContextProvider: React.FC<{ children: React.ReactNode
 		setIncludeCurrentTime,
 		includeCurrentCost,
 		setIncludeCurrentCost,
+		accentColor,
+		setAccentColor: (value: string | undefined) => {
+			setAccentColor(value)
+			vscode.postMessage({ type: "setAccentColor", text: value })
+		},
 	}
 
 	return <ExtensionStateContext.Provider value={contextValue}>{children}</ExtensionStateContext.Provider>