Variable PRIMER_VSCODE_COLOR_MAPConst

Type Declaration

• Readonlyaccent: {
      emphasis: "--vscode-button-background";
      fg: "--vscode-button-background";
      muted: "--vscode-button-secondaryBackground";
      subtle: "--vscode-button-secondaryBackground";
  }

  Accent colors - primary brand color (buttons, links)

  • Readonlyemphasis: "--vscode-button-background"

    Accent emphasis - primary button color

  • Readonlyfg: "--vscode-button-background"

    Accent foreground - button background color

  • Readonlymuted: "--vscode-button-secondaryBackground"

    Muted accent - secondary button background

  • Readonlysubtle: "--vscode-button-secondaryBackground"

    Subtle accent - secondary button background

• Readonlyattention: {
      emphasis: "--vscode-inputValidation-warningBackground";
      fg: "--vscode-editorWarning-foreground";
      muted: "--vscode-inputValidation-warningBorder";
      subtle: "--vscode-editorWarning-foreground";
  }

  Attention colors - warnings

  • Readonlyemphasis: "--vscode-inputValidation-warningBackground"

    Attention emphasis - warning background color

  • Readonlyfg: "--vscode-editorWarning-foreground"

    Attention foreground - warning text color

  • Readonlymuted: "--vscode-inputValidation-warningBorder"

    Attention muted - warning border color

  • Readonlysubtle: "--vscode-editorWarning-foreground"

    Attention subtle - warning foreground color

• Readonlyborder: {
      default: "--vscode-panel-border";
      muted: "--vscode-editorWidget-border";
      subtle: "--vscode-input-border";
  }

  Border colors

  • Readonlydefault: "--vscode-panel-border"

    Default border - panel border color

  • Readonlymuted: "--vscode-editorWidget-border"

    Muted border - widget border color

  • Readonlysubtle: "--vscode-input-border"

    Subtle border - input border color

• Readonlycanvas: {
      default: "--vscode-editor-background";
      inset: "--vscode-input-background";
      overlay: "--vscode-editorWidget-background";
      subtle: "--vscode-sideBar-background";
  }

  Canvas backgrounds - main surface colors

  • Readonlydefault: "--vscode-editor-background"

    Default canvas background - editor background

  • Readonlyinset: "--vscode-input-background"

    Canvas inset - input background

  • Readonlyoverlay: "--vscode-editorWidget-background"

    Canvas overlay - widget background

  • Readonlysubtle: "--vscode-sideBar-background"

    Subtle canvas - sidebar background

• Readonlydanger: {
      emphasis: "--vscode-inputValidation-errorBackground";
      fg: "--vscode-errorForeground";
      muted: "--vscode-inputValidation-errorBorder";
      subtle: "--vscode-errorForeground";
  }

  Danger colors - errors, destructive actions

  • Readonlyemphasis: "--vscode-inputValidation-errorBackground"

    Danger emphasis - error background color

  • Readonlyfg: "--vscode-errorForeground"

    Danger foreground - error text color

  • Readonlymuted: "--vscode-inputValidation-errorBorder"

    Danger muted - error border color

  • Readonlysubtle: "--vscode-errorForeground"

    Danger subtle - error foreground color

• Readonlydone: {
      emphasis: "--vscode-terminal-ansiBlue";
      fg: "--vscode-terminal-ansiBlue";
      muted: "--vscode-terminal-ansiBlue";
      subtle: "--vscode-terminal-ansiBlue";
  }

  Done colors - completed states

  • Readonlyemphasis: "--vscode-terminal-ansiBlue"

    Done emphasis - blue terminal color

  • Readonlyfg: "--vscode-terminal-ansiBlue"

    Done foreground - blue terminal color

  • Readonlymuted: "--vscode-terminal-ansiBlue"

    Done muted - blue terminal color

  • Readonlysubtle: "--vscode-terminal-ansiBlue"

    Done subtle - blue terminal color

• Readonlyfg: {
      default: "--vscode-editor-foreground";
      muted: "--vscode-descriptionForeground";
      onEmphasis: "--vscode-button-foreground";
      subtle: "--vscode-disabledForeground";
  }

  Foreground colors - text and icons

  • Readonlydefault: "--vscode-editor-foreground"

    Default foreground - editor text color

  • Readonlymuted: "--vscode-descriptionForeground"

    Muted foreground - description text color

  • ReadonlyonEmphasis: "--vscode-button-foreground"

    Foreground on emphasis - button text color

  • Readonlysubtle: "--vscode-disabledForeground"

    Subtle foreground - disabled text color

• Readonlystate: {
      focus: {
          border: "--vscode-focusBorder";
          shadow: "--vscode-focusBorder";
      };
      hover: {
          primaryBg: "--vscode-list-hoverBackground";
          primaryBorder: "--vscode-list-hoverBackground";
          secondaryBg: "--vscode-button-hoverBackground";
      };
      selected: {
          primaryBg: "--vscode-list-activeSelectionBackground";
          primaryBorder: "--vscode-list-activeSelectionBackground";
      };
  }

  Interactive state colors - hover, active, selected

  • Readonlyfocus: { border: "--vscode-focusBorder"; shadow: "--vscode-focusBorder" }

    • Readonlyborder: "--vscode-focusBorder"

      Focus border - focus border color

    • Readonlyshadow: "--vscode-focusBorder"

      Focus shadow - focus border color

  • Readonlyhover: {
        primaryBg: "--vscode-list-hoverBackground";
        primaryBorder: "--vscode-list-hoverBackground";
        secondaryBg: "--vscode-button-hoverBackground";
    }

    • ReadonlyprimaryBg: "--vscode-list-hoverBackground"

      Hover primary background - list hover background

    • ReadonlyprimaryBorder: "--vscode-list-hoverBackground"

      Hover primary border - list hover background

    • ReadonlysecondaryBg: "--vscode-button-hoverBackground"

      Hover secondary background - button hover background

  • Readonlyselected: {
        primaryBg: "--vscode-list-activeSelectionBackground";
        primaryBorder: "--vscode-list-activeSelectionBackground";
    }

    • ReadonlyprimaryBg: "--vscode-list-activeSelectionBackground"

      Selected primary background - active selection background

    • ReadonlyprimaryBorder: "--vscode-list-activeSelectionBackground"

      Selected primary border - active selection background

• Readonlysuccess: {
      emphasis: "--vscode-terminal-ansiGreen";
      fg: "--vscode-terminal-ansiGreen";
      muted: "--vscode-terminal-ansiGreen";
      subtle: "--vscode-terminal-ansiGreen";
  }

  Success colors - successful states

  • Readonlyemphasis: "--vscode-terminal-ansiGreen"

    Success emphasis - green terminal color

  • Readonlyfg: "--vscode-terminal-ansiGreen"

    Success foreground - green terminal color

  • Readonlymuted: "--vscode-terminal-ansiGreen"

    Success muted - green terminal color

  • Readonlysubtle: "--vscode-terminal-ansiGreen"

    Success subtle - green terminal color