@@ -49,6 +49,7 @@ describe("style()", () => {
     expect(style.bold("hello")).toBe("\u001b[1mhello\u001b[0m");
     expect(style.cyan("hello")).toBe("\u001b[36mhello\u001b[0m");
     expect(style.gray("hello")).toBe("\u001b[90mhello\u001b[0m");
+    expect(style.rgb("38;5;036")("hello")).toBe("\u001b[38;5;036mhello\u001b[0m");
     expect(style.bold(" Add plugin " + style.yellow("hello"))).toBe(
       "\u001b[1m Add plugin \u001b[33mhello\u001b[0m\u001b[0m"
     );
 
@@ -59,6 +59,7 @@ inquirer
     {
       type: "search-checkbox",
       name: "cz",
+      themeColorCode: "38;5;036",
       message: "Select scope:",
       source: function (answers, input) {
         return fuzzyFilter(input, testArr3);
 
@@ -1,5 +1,5 @@
 /**
- * @description: inquirer plugin - ComplateCheckbox
+ * @description: inquirer plugin - Search Checkbox
  * @author: @Zhengqbbb (zhengqbbb@gmail.com)
  * @license MIT
  */
@@ -24,6 +24,7 @@ export class SearchCheckbox extends Base {
   private firstRender = true;
   private searching = false;
   private haveSearched = false;
+  private themeColorCode?: string;
   private initialValue: any = -1;
   private lastSearchInput?: string;
   private paginator: Paginator = new Paginator(this.screen, { isInfinite: true });
@@ -33,10 +34,12 @@ export class SearchCheckbox extends Base {
 
   constructor(questions: Question, readline: ReadlineInterface, answers: Answers) {
     super(questions, readline, answers);
-    const { source, separator, isInitDefault } = this.opt as unknown as CZPromptQuestionOptions;
+    const { source, separator, isInitDefault, themeColorCode } = this
+      .opt as unknown as CZPromptQuestionOptions;
     if (!source) this.throwParamError("source");
     if (typeof separator === "string") this.separator = separator;
     if (isInitDefault) this.initialValue = this.opt.default;
+    if (themeColorCode) this.themeColorCode = themeColorCode;
     this.renderChoices = new Choices([], {});
   }
 
@@ -72,12 +75,18 @@ export class SearchCheckbox extends Base {
 
     // Render choices or answer depending on the state
     if (this.status === "answered") {
-      content += style.cyan(this.selection.join(this.separator));
+      this.themeColorCode
+        ? (content += style.rgb(this.themeColorCode)(this.selection.join(this.separator)))
+        : (content += style.cyan(this.selection.join(this.separator)));
     } else if (this.searching) {
       content += this.rl.line;
       bottomContent += "  " + style.dim("Searching...");
     } else if (this.choicesLen) {
-      const choicesStr = choicesRender(this.renderChoices.choices, this.pointer);
+      const choicesStr = choicesRender(
+        this.renderChoices.choices,
+        this.pointer,
+        this.themeColorCode
+      );
       content += this.rl.line;
       const indexPosition = this.pointer;
       let realIndexPosition = 0;
@@ -99,11 +108,12 @@ export class SearchCheckbox extends Base {
     if (this.firstRender) {
       content += style.dim("Press <space>|<right> to select, <enter> to submit");
     }
+    this.firstRender = false;
+
     if (error) {
       bottomContent = style.red(">> ") + error;
     }
 
-    this.firstRender = false;
     this.screen.render(content, bottomContent);
   }
 
@@ -265,7 +275,11 @@ export class SearchCheckbox extends Base {
  * @param  {Number} pointer Position of the pointer
  * @return {String}         Rendered content
  */
-const choicesRender = (choices: ChoicesType["choices"], pointer: number): string => {
+const choicesRender = (
+  choices: ChoicesType["choices"],
+  pointer: number,
+  themeColorCode?: string
+): string => {
   let output = "";
   let separatorOffset = 0;
 
@@ -286,7 +300,11 @@ const choicesRender = (choices: ChoicesType["choices"], pointer: number): string
           ? figures.squareSmallFilled + " " + choice.name
           : getCheckbox(choice.checked || false) + " " + choice.name;
       if (i - separatorOffset === pointer) {
-        output += style.cyan(" " + figures.pointer + style.cyan(line));
+        themeColorCode
+          ? (output += style.rgb(themeColorCode)(
+              " " + figures.pointer + style.rgb(themeColorCode)(line)
+            ))
+          : (output += style.cyan(" " + figures.pointer + line));
       } else {
         output += "  " + line;
       }
 
@@ -35,17 +35,25 @@ export interface CZPromptQuestionOptions<T extends Answers = Answers> extends Qu
   separator: string;
 
   /**
+   * @description: support rgb color code. e.g: `38;5;036`
+   * @default: cyan
+   */
+  themeColorCode?: string;
+
+  /**
+   * @description:
    * Function to determine what options to display to user.
    * Called with previous answers object and the current user input each time the user types, it must return a promise.
    */
   source: (answersSoFar: T, input: string | undefined) => Promise<any[]>;
 
   /**
-   * The number of elements to show on each page.
+   * @description: The number of elements to show on each page.
    */
   pageSize?: number | undefined;
 
   /**
+   * @description:
    * default false. Setting it to true turns the input into a normal text input.
    */
   isInitDefault?: boolean | undefined;
 
@@ -59,6 +59,8 @@ const styleFn = (enabled = isColorizenSupport()) => ({
   cyan: enabled ? formatter("\u001b[36m", "\u001b[0m") : String,
   white: enabled ? formatter("\u001b[37m", "\u001b[0m") : String,
   gray: enabled ? formatter("\u001b[90m", "\u001b[0m") : String,
+  rgb: (rgbColor = "38;5;036") =>
+    enabled ? formatter(`\u001b[${rgbColor}m`, "\u001b[0m") : String,
   bgBlack: enabled ? formatter("\u001b[40m", "\u001b[0m") : String,
   bgRed: enabled ? formatter("\u001b[41m", "\u001b[0m") : String,
   bgGreen: enabled ? formatter("\u001b[42m", "\u001b[0m") : String,
Original file line number	Diff line number	Diff line change
`@@ -59,6 +59,7 @@ inquirer`
`59`	`59`	`{`
`60`	`60`	`type: "search-checkbox",`
`61`	`61`	`name: "cz",`
	`62`	`+ themeColorCode: "38;5;036",`
`62`	`63`	`message: "Select scope:",`
`63`	`64`	`source: function (answers, input) {`
`64`	`65`	`return fuzzyFilter(input, testArr3);`