Skip to main content
Coding Theme

Color themes

VS Code preview

Full workbench mockup using this variant's colors and tokenColors.

Loading...

colors

Workbench UI color keys from the theme JSON colors map.

  • activityBar.background#1E1E3A
  • activityBar.foreground#FFD600
  • activityBar.inactiveForeground#7E74B8
  • activityBarBadge.background#FFD600
  • activityBarBadge.foreground#1E1E3A
  • badge.background#FFD600
  • badge.foreground#1E1E3A
  • breadcrumb.activeSelectionForeground#FFE082
  • breadcrumb.focusForeground#FFD600
  • breadcrumb.foreground#7E74B8
  • button.background#4D21FC
  • button.foreground#FFD600
  • button.hoverBackground#6943FF
  • dropdown.background#1E1E3A
  • dropdown.border#4D21FC
  • dropdown.foreground#FFE082
  • editor.background#2D2B55
  • editor.findMatchBackground#FFD60A44
  • editor.findMatchHighlightBackground#FFD60A22
  • editor.foreground#FFE082
  • editor.lineHighlightBackground#1E1E3A
  • editor.selectionBackground#4D21FC50
  • editor.selectionHighlightBackground#4D21FC30
  • editor.wordHighlightBackground#4D21FC30
  • editor.wordHighlightStrongBackground#4D21FC50
  • editorBracketHighlight.foreground1#FFD600
  • editorBracketHighlight.foreground2#C792EA
  • editorBracketHighlight.foreground3#80CBC4
  • editorBracketHighlight.foreground4#FF9E64
  • editorBracketHighlight.foreground5#ADFF2F
  • editorBracketHighlight.foreground6#B388FF
  • editorBracketMatch.background#4D21FC30
  • editorBracketMatch.border#FFD600
  • editorCursor.foreground#FFD600
  • editorError.foreground#EF5350
  • editorGroupHeader.tabsBackground#1E1E3A
  • editorGutter.addedBackground#ADFF2F
  • editorGutter.deletedBackground#EF5350
  • editorGutter.modifiedBackground#E2B93D
  • editorIndentGuide.activeBackground#7E74B8
  • editorIndentGuide.background#4B4775
  • editorLineNumber.activeForeground#FFD600
  • editorLineNumber.foreground#7E74B8
  • editorOverviewRuler.addedForeground#ADFF2F
  • editorOverviewRuler.deletedForeground#EF5350
  • editorOverviewRuler.modifiedForeground#E2B93D
  • editorWarning.foreground#FFD600
  • editorWhitespace.foreground#4B4775
  • gitDecoration.addedResourceForeground#ADFF2F
  • gitDecoration.conflictingResourceForeground#FF8A80
  • gitDecoration.deletedResourceForeground#EF5350
  • gitDecoration.ignoredResourceForeground#4B4775
  • gitDecoration.modifiedResourceForeground#E2B93D
  • gitDecoration.untrackedResourceForeground#ADFF2F
  • input.background#1E1E3A
  • input.border#4D21FC
  • input.foreground#FFE082
  • input.placeholderForeground#7E74B8
  • inputOption.activeBorder#FFD600
  • list.activeSelectionBackground#4D21FC
  • list.activeSelectionForeground#FFD600
  • list.focusBackground#4D21FC
  • list.focusForeground#FFD600
  • list.highlightForeground#FFD600
  • list.hoverBackground#2D2B55
  • list.hoverForeground#FFE082
  • list.inactiveSelectionBackground#2D2B55
  • list.inactiveSelectionForeground#FFE082
  • minimap.selectionHighlight#FFD60050
  • notificationCenter.border#4D21FC
  • notifications.background#1E1E3A
  • notifications.foreground#FFE082
  • panel.background#1E1E3A
  • panel.border#2D2B55
  • panelTitle.activeBorder#FFD600
  • panelTitle.activeForeground#FFD600
  • panelTitle.inactiveForeground#7E74B8
  • peekView.border#4D21FC
  • peekViewEditor.background#1E1E3A
  • peekViewResult.background#1E1E3A
  • peekViewTitle.background#1E1E3A
  • peekViewTitleLabel.foreground#FFD600
  • scrollbar.shadow#00000050
  • scrollbarSlider.activeBackground#4D21FCA0
  • scrollbarSlider.background#4D21FC40
  • scrollbarSlider.hoverBackground#4D21FC80
  • sideBar.background#1E1E3A
  • sideBar.border#1E1E3A
  • sideBar.foreground#C5BFF3
  • sideBarSectionHeader.background#2D2B55
  • sideBarSectionHeader.foreground#FFD600
  • sideBarTitle.foreground#FFD600
  • statusBar.background#1E1E3A
  • statusBar.debuggingBackground#FFD600
  • statusBar.debuggingForeground#1E1E3A
  • statusBar.foreground#FFD600
  • statusBar.noFolderBackground#2D2B55
  • tab.activeBackground#2D2B55
  • tab.activeBorderTop#FFD600
  • tab.activeForeground#FFD600
  • tab.border#1E1E3A
  • tab.inactiveBackground#1E1E3A
  • tab.inactiveForeground#7E74B8
  • terminal.ansiBlack#1E1E3A
  • terminal.ansiBlue#7C4DFF
  • terminal.ansiBrightBlack#7E74B8
  • terminal.ansiBrightBlue#B388FF
  • terminal.ansiBrightCyan#A7FFEB
  • terminal.ansiBrightGreen#B9F6CA
  • terminal.ansiBrightMagenta#EA80FC
  • terminal.ansiBrightRed#FF8A80
  • terminal.ansiBrightWhite#FFFFFF
  • terminal.ansiBrightYellow#FFE57F
  • terminal.ansiCyan#80CBC4
  • terminal.ansiGreen#ADFF2F
  • terminal.ansiMagenta#C792EA
  • terminal.ansiRed#EF5350
  • terminal.ansiWhite#FFE082
  • terminal.ansiYellow#FFD600
  • terminal.background#1E1E3A
  • terminal.foreground#FFE082
  • titleBar.activeBackground#1E1E3A
  • titleBar.activeForeground#FFD600
  • titleBar.inactiveBackground#1E1E3A
  • titleBar.inactiveForeground#7E74B8

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
source, text#FFE082—
comment, punctuation.definition.comment#7E74B8italic
string, string.quoted, string.template, punctuation.definition.string#ADFF2F—
constant.numeric#FF9E64—
constant.language#FF9E64italic
constant.character, constant.other#FF9E64—
keyword, keyword.control, keyword.operator.new#FFD600bold
keyword.operator#FFE082—
storage, storage.type#FFD600italic
storage.modifier#FFD600italic
entity.name.type, entity.name.class, support.class, entity.other.inherited-class#FFF176underline
entity.name.function, support.function, meta.function-call#FFEB3B—
variable.parameter#FF9E64italic
variable, variable.other#FFE082—
variable.language#FFD600italic
variable.other.property, variable.other.object.property, support.variable.property, meta.object-literal.key#FFF9C4—
entity.name.tag#FFD600—
entity.other.attribute-name#FFEB3Bitalic
entity.name.tag.css, entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#FFD600—
support.type.property-name.css#FFE082—
support.constant.property-value.css#FFF176—
keyword.other.unit.css#FF9E64—
punctuation.separator, punctuation.terminator, punctuation.accessor#C5BFF3—
punctuation.section, punctuation.definition.block, meta.brace#C5BFF3—
markup.heading, entity.name.section.markdown#FFD600bold
markup.bold#FFEB3Bbold
markup.italic#FFF176italic
markup.underline.link#80CBC4—
markup.inline.raw, markup.fenced_code#ADFF2F—
support.type.property-name.json#FFD600—
string.quoted.double.json#ADFF2F—
entity.name.tag.yaml#FFD600—
meta.decorator, punctuation.decorator#C792EAitalic
string.regexp#80CBC4—
constant.character.escape#80CBC4—
support.type, support.class#FFF176—
support.constant#FF9E64—
invalid#FFFFFF—
invalid.deprecated#FFFFFF—