feat: add icon color mode

components/FileExplorer/FileExplorerIcon.tsx

@@ -11,6 +11,7 @@ type Props = {
 		color: string;
 	};
 	iconFrameMode?: "always" | "never";
+	iconColorMode?: "status" | "theme";
 };
 
 export const FileExplorerIcon: FC<Props> = memo(
@@ -21,6 +22,7 @@ export const FileExplorerIcon: FC<Props> = memo(
 		hideUnknownStatus,
 		unknownStatusConfig,
 		iconFrameMode = "never",
+		iconColorMode = "status",
 	}) => {
 		const statusEntries = Object.entries(statuses);
 		const totalStatuses = statusEntries.reduce(
@@ -28,6 +30,8 @@ export const FileExplorerIcon: FC<Props> = memo(
 			0,
 		);
 
+		const useStatusColors = iconColorMode === "status";
+
 		const getStatusColor = (color?: string) =>
 			(color && color.trim()) || "var(--text-accent)";
 
@@ -37,13 +41,19 @@ export const FileExplorerIcon: FC<Props> = memo(
 
 			// Use config passed from integration, with fallbacks
 			const icon = unknownStatusConfig?.icon || "❓";
-			const color = unknownStatusConfig?.color?.trim() || "#8b949e";
+			const color = useStatusColors
+				? unknownStatusConfig?.color?.trim() || "#8b949e"
+				: undefined;
 
 			const shouldFrameUnknown = iconFrameMode === "always";
 
-			const unknownStyles: React.CSSProperties = { color };
+			const unknownStyles: React.CSSProperties = {};
+			if (color) {
+				unknownStyles.color = color;
+			}
 			if (shouldFrameUnknown) {
-				unknownStyles.boxShadow = `0 0 0 1px ${color}`;
+				const frameColor = color || "currentColor";
+				unknownStyles.boxShadow = `0 0 0 1px ${frameColor}`;
 				unknownStyles.borderRadius = "var(--radius-s)";
 			}
 
@@ -63,11 +73,17 @@ export const FileExplorerIcon: FC<Props> = memo(
 
 		const primaryStatus = statusEntries[0]?.[1]?.[0];
 		if (!primaryStatus) return null;
-		const iconColor = getStatusColor(primaryStatus.color);
+		const iconColor = useStatusColors
+			? getStatusColor(primaryStatus.color)
+			: undefined;
 		const shouldShowFrame = iconFrameMode === "always";
-		const iconStyles: React.CSSProperties = { color: iconColor };
+		const iconStyles: React.CSSProperties = {};
+		if (iconColor) {
+			iconStyles.color = iconColor;
+		}
 		if (shouldShowFrame) {
-			iconStyles.boxShadow = `0 0 0 1px ${iconColor}`;
+			const frameColor = iconColor || "currentColor";
+			iconStyles.boxShadow = `0 0 0 1px ${frameColor}`;
 			iconStyles.borderRadius = "var(--radius-s)";
 		}
 
@@ -85,7 +101,11 @@ export const FileExplorerIcon: FC<Props> = memo(
 					{totalStatuses > 1 && (
 						<span
 							className="status-minimal__count"
-							style={{ backgroundColor: iconColor }}
+							style={
+								iconColor
+									? { backgroundColor: iconColor }
+									: undefined
+							}
 						>
 							{totalStatuses}
 						</span>

components/SettingsUI/UISettings.tsx

@@ -240,6 +240,30 @@ export const UISettings: React.FC<Props> = ({ settings, onChange }) => {
 				/>
 			</SettingItem>
 
+			<SettingItem
+				name="Status icon color"
+				description="Decide whether icons use their configured status colors or inherit the theme default."
+			>
+				<Select
+					options={[
+						{
+							value: "status",
+							display: "Use custom status colors",
+						},
+						{
+							value: "theme",
+							display: "Use theme default colors",
+						},
+					]}
+					defaultValue={
+						settings.fileExplorerIconColorMode || "status"
+					}
+					onChange={(value) =>
+						onChange("fileExplorerIconColorMode", value)
+					}
+				/>
+			</SettingItem>
+
 			<h3>Behavior & Other</h3>
 
 			<SettingItem

constants/defaultSettings.ts

@@ -7,6 +7,7 @@ import {
 export const DEFAULT_PLUGIN_SETTINGS: PluginSettings = {
 	fileExplorerIconPosition: "absolute-right",
 	fileExplorerIconFrame: "never",
+	fileExplorerIconColorMode: "status",
 	statusColors: {
 		active: "var(--text-success)",
 		onHold: "var(--text-warning)",

integrations/file-explorer/file-explorer-integration.tsx

@@ -57,6 +57,7 @@ export class FileExplorerIntegration implements IElementProcessor {
 					key === "strictStatuses" ||
 					key === "fileExplorerIconPosition" ||
 					key === "fileExplorerIconFrame" ||
+					key === "fileExplorerIconColorMode" ||
 					key === "unknownStatusIcon" ||
 					key === "unknownStatusColor" ||
 					key === "templates"
@@ -152,6 +153,10 @@ export class FileExplorerIntegration implements IElementProcessor {
 				iconFrameMode={
 					settingsService.settings.fileExplorerIconFrame || "never"
 				}
+				iconColorMode={
+					settingsService.settings.fileExplorerIconColorMode ||
+					"status"
+				}
 			/>,
 		);
 

types/pluginSettings.ts

@@ -13,6 +13,7 @@ export type PluginSettings = {
 		| "file-name-left"
 		| "file-name-right";
 	fileExplorerIconFrame: "always" | "never";
+	fileExplorerIconColorMode: "status" | "theme";
 	statusColors: Record<string, string>;
 	showStatusBar: boolean;
 	autoHideStatusBar: boolean;