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.activeBorder#b58949
  • activityBar.background#2b2d31
  • activityBar.foreground#d1d5da
  • activityBarBadge.background#8a4b38
  • activityBarBadge.foreground#ffffff
  • badge.background#3a5f9e
  • badge.foreground#ffffff
  • button.background#8a4b38
  • button.foreground#ffffff
  • button.hoverBackground#b58949
  • dropdown.background#21252b
  • dropdown.border#2b2d31
  • dropdown.foreground#e0e0e0
  • editor.background#0d0d0d
  • editor.findMatchBackground#b5894970
  • editor.findMatchHighlightBackground#b5894930
  • editor.foreground#e0e0e0
  • editor.lineHighlightBackground#2b2d31
  • editor.lineHighlightBorder#3a5f9e
  • editor.selectionBackground#3a5f9e80
  • editor.selectionHighlightBackground#8a4b3840
  • editorBracketMatch.background#8a4b3830
  • editorBracketMatch.border#b58949
  • editorCursor.foreground#e0e0e0
  • editorGroupHeader.tabsBackground#21252b
  • editorIndentGuide.activeBackground#b58949
  • editorIndentGuide.background#3a5f9e30
  • editorLineNumber.activeForeground#c9c9c9
  • editorLineNumber.foreground#555555
  • editorWhitespace.foreground#555555
  • focusBorder#3a5f9e
  • gitDecoration.conflictingResourceForeground#a75b9c
  • gitDecoration.deletedResourceForeground#b5534d
  • gitDecoration.modifiedResourceForeground#3a5f9e
  • gitDecoration.untrackedResourceForeground#7a9c55
  • input.background#21252b
  • input.border#2b2d31
  • input.foreground#e0e0e0
  • input.placeholderForeground#555555
  • inputOption.activeBorder#b58949
  • list.activeSelectionBackground#3a5f9e
  • list.activeSelectionForeground#ffffff
  • list.focusBackground#3a5f9e
  • list.highlightForeground#b58949
  • list.hoverBackground#2b2d31
  • minimap.background#0d0d0d
  • minimapSlider.activeBackground#999999dd
  • minimapSlider.background#55555588
  • minimapSlider.hoverBackground#777777aa
  • panel.background#0d0d0d
  • panel.border#2b2d31
  • panelTitle.activeBorder#b58949
  • panelTitle.activeForeground#e0e0e0
  • panelTitle.inactiveForeground#8a8a8a
  • scrollbar.shadow#000000
  • scrollbarSlider.activeBackground#999999cc
  • scrollbarSlider.background#55555555
  • scrollbarSlider.hoverBackground#777777aa
  • sideBar.background#1e2127
  • sideBar.foreground#c9c9c9
  • sideBarSectionHeader.background#2b2d31
  • sideBarSectionHeader.foreground#e0e0e0
  • sideBarTitle.foreground#d1d5da
  • statusBar.background#21252b
  • statusBar.debuggingBackground#8a4b38
  • statusBar.foreground#c9c9c9
  • statusBar.noFolderBackground#2b2d31
  • statusBarItem.hoverBackground#3a5f9e
  • tab.activeBackground#21252b
  • tab.activeBorder#b58949
  • tab.activeForeground#e0e0e0
  • tab.border#2b2d31
  • tab.inactiveBackground#0d0d0d
  • tab.inactiveForeground#8a8a8a
  • terminal.ansiBlue#3a5f9e
  • terminal.ansiBrightBlue#6a8edb
  • terminal.ansiBrightCyan#70bfbf
  • terminal.ansiBrightGreen#95c580
  • terminal.ansiBrightMagenta#c57fcb
  • terminal.ansiBrightRed#e06c75
  • terminal.ansiBrightYellow#d7a65f
  • terminal.ansiCyan#5fa3a3
  • terminal.ansiGreen#7a9c55
  • terminal.ansiMagenta#a75b9c
  • terminal.ansiRed#b5534d
  • terminal.ansiYellow#b58949
  • terminal.background#0d0d0d
  • terminal.foreground#e0e0e0
  • titleBar.activeBackground#21252b
  • titleBar.activeForeground#d1d5da
  • titleBar.inactiveBackground#0d0d0d
  • titleBar.inactiveForeground#8a8a8a

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#8a4b38italic
string, string.quoted, string.template#b58949
keyword, storage.type, storage.modifier#3a5f9ebold
keyword.operator, punctuation.accessor#2b2d31
variable, variable.other#e0e0e0
variable.parameter#8a4b38italic
entity.name.function, support.function#b58949
meta.function-call#3a5f9e
entity.name.class, entity.name.type.class, support.class#8a4b38bold
entity.name.type, support.type#5fa3a3
entity.name.type.interface#5fa3a3italic
constant.numeric#7a9c55
constant, constant.language, constant.character#a75b9c
constant.language.boolean#3a5f9ebold
variable.other.property, support.variable.property#8a4b38
meta.object-literal.key#d7a65f
entity.name.tag, punctuation.definition.tag#b5534d
entity.other.attribute-name#8a4b38italic
punctuation, meta.brace#2b2d31
string.regexp#7a9c55
constant.character.escape#a75b9c
meta.decorator, punctuation.decorator#3a5f9e
invalid, invalid.illegal#b5534dstrikethrough
markup.heading, entity.name.section#b58949bold
markup.bold#2b2d31bold
markup.italic#8a4b38italic
markup.underline.link#3a5f9e
markup.inline.raw, markup.fenced_code#7a9c55
support.type.property-name.json#3a5f9e
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#8a4b38
support.type.property-name.css#5fa3a3
support.constant.property-value.css#7a9c55