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