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#1A1A1A
  • activityBar.border#DC0000
  • activityBar.foreground#FFD200
  • activityBar.inactiveForeground#888888
  • activityBarBadge.background#DC0000
  • activityBarBadge.foreground#FFFFFF
  • badge.background#DC0000
  • badge.foreground#FFFFFF
  • button.background#B89000
  • button.foreground#FFFFFF
  • button.hoverBackground#D0A820
  • descriptionForeground#6A6050
  • dropdown.background#FFFFFF
  • dropdown.border#D0B888
  • dropdown.foreground#1A1A1A
  • editor.background#FFF8EC
  • editor.findMatchBackground#FFB52866
  • editor.findMatchHighlightBackground#FFB52844
  • editor.foreground#1A1A1A
  • editor.inactiveSelectionBackground#FFD20033
  • editor.lineHighlightBackground#F5E8D0
  • editor.selectionBackground#FFD20055
  • editor.wordHighlightBackground#FFD20033
  • editor.wordHighlightStrongBackground#FFD20055
  • editorBracketMatch.background#FFD20044
  • editorBracketMatch.border#B89000
  • editorCursor.foreground#B00000
  • editorError.foreground#B00000
  • editorGroupHeader.tabsBackground#F3E6D0
  • editorGutter.background#FFF8EC
  • editorHint.foreground#6A6050
  • editorIndentGuide.activeBackground#B8900055
  • editorIndentGuide.background#E8DCC0
  • editorInfo.foreground#6A5000
  • editorLineNumber.activeForeground#B00000
  • editorLineNumber.foreground#8A7858
  • editorWarning.foreground#8A6800
  • editorWhitespace.foreground#C8B898
  • focusBorder#B89000
  • foreground#1A1A1A
  • gitDecoration.deletedResourceForeground#B00000
  • gitDecoration.ignoredResourceForeground#8A7858
  • gitDecoration.modifiedResourceForeground#8A6800
  • gitDecoration.untrackedResourceForeground#6A5000
  • input.background#FFFFFF
  • input.border#D0B888
  • input.foreground#1A1A1A
  • input.placeholderForeground#8A7858
  • list.activeSelectionBackground#FFD20055
  • list.activeSelectionForeground#000000
  • list.highlightForeground#B00000
  • list.hoverBackground#FFD20033
  • list.inactiveSelectionBackground#E8D8B8
  • panel.background#FFF8EC
  • panel.border#E8D8B8
  • scrollbarSlider.activeBackground#C8985088
  • scrollbarSlider.background#C8985044
  • scrollbarSlider.hoverBackground#C8985066
  • sideBar.background#F3E6D0
  • sideBar.border#E0D0B0
  • sideBar.foreground#1A1A1A
  • sideBarSectionHeader.background#E8D8B8
  • sideBarSectionHeader.foreground#6A5000
  • sideBarTitle.foreground#B00000
  • statusBar.background#1A1A1A
  • statusBar.border#DC0000
  • statusBar.debuggingBackground#DC0000
  • statusBar.debuggingForeground#FFFFFF
  • statusBar.foreground#FFD200
  • statusBar.noFolderBackground#1A1A1A
  • tab.activeBackground#FFF8EC
  • tab.activeBorderTop#DC0000
  • tab.activeForeground#B00000
  • tab.border#E8D8B8
  • tab.inactiveBackground#F3E6D0
  • tab.inactiveForeground#6A6050
  • terminal.ansiBlue#6A5000
  • terminal.ansiCyan#6A5000
  • terminal.ansiGreen#8A6800
  • terminal.ansiMagenta#DC0000
  • terminal.ansiRed#B00000
  • terminal.ansiYellow#8A6800
  • terminal.background#FFF8EC
  • terminal.foreground#1A1A1A
  • textLink.activeForeground#B00000
  • textLink.foreground#8A6800
  • titleBar.activeBackground#000000
  • titleBar.activeForeground#FFFFFF
  • titleBar.inactiveBackground#1A1A1A
  • titleBar.inactiveForeground#A0A0A0

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#7A7060italic
keyword, storage.type, storage.modifier, keyword.control#B00000bold
string, constant.other.symbol#6A3800—
constant.numeric, constant.language#8A5000bold
constant.language.boolean#2A2020bold
entity.name.function, support.function, meta.function-call#6A5000—
entity.name.type, entity.name.class, support.type, support.class#8A1000bold
variable, variable.other, variable.parameter#1A1A1A—
variable.other.property, support.variable.property#3A2A20—
entity.name.tag#B00000bold
entity.other.attribute-name#6A3800—
keyword.operator#6A6050—
punctuation, meta.brace#7A7060—
entity.name.namespace, support.type.namespace#8A1000bold
meta.decorator, entity.name.function.decorator#B00000italic
keyword.control.import, keyword.control.export, keyword.control.from#6A5000bold
string.regexp#8A1000—
constant.character.escape#8A6800—
invalid, invalid.illegal#B00000bold underline
markup.heading, entity.name.section.markdown#B00000bold
markup.bold#6A3800bold
markup.italic#8A6800italic
markup.underline.link#6A5000—
markup.inline.raw, markup.fenced_code.block#8A5000—
support.type.property-name.json#B00000bold
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#B00000bold
support.type.property-name.css#6A5000—
support.constant.property-value.css#8A5000—