feat: enable color customization

README.md

@@ -9,11 +9,14 @@
 ### Installation
 
 **npm (recommended)**
+
 ```shell
 npm install -g @microsoft/inshellisense
 is init
 ```
+
 **homebrew (macOS/linux)**
+
 ```shell
 brew tap microsoft/inshellisense https://github.com/microsoft/inshellisense
 brew install inshellisense
@@ -140,11 +143,17 @@ useNerdFont = true
 
 You can change the maximum number of suggestions displayed in the autocomplete list at one time in your config file:
 
-
 ```toml
 maxSuggestions = 10
 ```
 
+### Active Suggestion Background Color
+
+You can customize the active suggestion's background with a `#RRGGBB` hex color.
+
+```toml
+activeSuggestionBackgroundColor = "#2E7D32"
+```
 
 ## Unsupported Specs
 

src/ui/suggestionManager.ts

@@ -20,7 +20,6 @@ const suggestionWidth = 40;
 const descriptionWidth = 30;
 const descriptionHeight = 5;
 const borderWidth = 2;
-const activeSuggestionBackgroundColor = "#7D56F4";
 export const getMaxLines = () => borderWidth + Math.max(getMaxSuggestions(), descriptionHeight) + 1; // accounts when there is a unhandled newline at the end of the command
 export const MIN_WIDTH = borderWidth + descriptionWidth;
 
@@ -149,7 +148,7 @@ export class SuggestionManager {
       suggestions.map((suggestion, idx) => {
         const suggestionText = `${suggestion.icon} ${suggestion.name}`;
         const truncatedSuggestion = truncateText(suggestionText, suggestionWidth - 2);
-        return idx == activeSuggestionIdx ? chalk.bgHex(activeSuggestionBackgroundColor)(truncatedSuggestion) : truncatedSuggestion;
+        return idx == activeSuggestionIdx ? chalk.bgHex(getConfig().activeSuggestionBackgroundColor)(truncatedSuggestion) : truncatedSuggestion;
       }),
       suggestionWidth,
     );

src/utils/config.ts

@@ -32,6 +32,7 @@ type Config = {
   useAliases: boolean;
   useNerdFont: boolean;
   maxSuggestions?: number;
+  activeSuggestionBackgroundColor: string;
 };
 
 const bindingSchema: JSONSchemaType<Binding> = {
@@ -87,6 +88,12 @@ const configSchema = {
       nullable: true,
       default: 5,
     },
+    activeSuggestionBackgroundColor: {
+      type: "string",
+      nullable: true,
+      pattern: "^#[0-9A-Fa-f]{6}$",
+      default: "#7D56F4",
+    },
   },
   additionalProperties: false,
 };
@@ -110,6 +117,7 @@ let globalConfig: Config = {
   },
   useAliases: false,
   useNerdFont: false,
+  activeSuggestionBackgroundColor: "#7D56F4",
 };
 
 export const getConfig = (): Config => globalConfig;
@@ -140,6 +148,7 @@ export const loadConfig = async (program: Command) => {
         useAliases: config.useAliases ?? false,
         useNerdFont: config?.useNerdFont ?? false,
         maxSuggestions: config?.maxSuggestions ?? 5,
+        activeSuggestionBackgroundColor: config?.activeSuggestionBackgroundColor ?? "#7D56F4",
       };
     }
   }