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#a8a8a8
  • activityBar.background#151515
  • activityBar.foreground#c0c0c0
  • activityBarBadge.background#0a2342
  • activityBarBadge.foreground#ffffff
  • badge.background#5a7fa0
  • badge.foreground#ffffff
  • button.background#0a2342
  • button.foreground#ffffff
  • button.hoverBackground#1f3a5c
  • dropdown.background#2a2a2a
  • dropdown.border#444444
  • dropdown.foreground#e0e0e0
  • editor.background#1e1e1e
  • editor.findMatchBackground#5a7fa0
  • editor.findMatchHighlightBackground#3b557a
  • editor.foreground#d4d4d4
  • editor.lineHighlightBackground#2c2c2c
  • editor.lineHighlightBorder#444444
  • editor.selectionBackground#0a2242
  • editor.selectionHighlightBackground#1f3a5c
  • editorBracketMatch.background#2c3e50
  • editorBracketMatch.border#a8a8a8
  • editorCursor.foreground#e0e0e0
  • editorGroupHeader.tabsBackground#1b1b1b
  • editorIndentGuide.activeBackground#777777
  • editorIndentGuide.background#333333
  • editorLineNumber.activeForeground#ffffff
  • editorLineNumber.foreground#777777
  • editorWhitespace.foreground#555555
  • focusBorder#0a2342
  • gitDecoration.conflictingResourceForeground#af5faf
  • gitDecoration.deletedResourceForeground#d75f5f
  • gitDecoration.modifiedResourceForeground#5a7fa0
  • gitDecoration.untrackedResourceForeground#5fd75f
  • input.background#2a2a2a
  • input.border#444444
  • input.foreground#e0e0e0
  • input.placeholderForeground#777777
  • inputOption.activeBorder#a8a8a8
  • list.activeSelectionBackground#0a2242
  • list.activeSelectionForeground#ffffff
  • list.focusBackground#0a2342
  • list.highlightForeground#a8a8a8
  • list.hoverBackground#1f3a5c
  • minimap.background#1e1e1e
  • minimapSlider.activeBackground#999999
  • minimapSlider.background#505050
  • minimapSlider.hoverBackground#777777
  • panel.background#1e1e1e
  • panel.border#333333
  • panelTitle.activeBorder#a8a8a8
  • panelTitle.activeForeground#e0e0e0
  • panelTitle.inactiveForeground#999999
  • scrollbar.shadow#000000
  • scrollbarSlider.activeBackground#999999
  • scrollbarSlider.background#505050
  • scrollbarSlider.hoverBackground#777777
  • sideBar.background#212121
  • sideBar.foreground#cccccc
  • sideBarSectionHeader.background#2a2a2a
  • sideBarSectionHeader.foreground#ffffff
  • sideBarTitle.foreground#e0e0e0
  • statusBar.background#0a2342
  • statusBar.debuggingBackground#3c3c3c
  • statusBar.foreground#ffffff
  • statusBar.noFolderBackground#2c2c2c
  • statusBarItem.hoverBackground#1f3a5c
  • tab.activeBackground#1b1b1b
  • tab.activeBorder#a8a8a8
  • tab.activeForeground#e0e0e0
  • tab.border#333333
  • tab.inactiveBackground#2d2d2d
  • tab.inactiveForeground#999999
  • terminal.ansiBlue#5f87d7
  • terminal.ansiBrightBlue#7faaff
  • terminal.ansiBrightCyan#a0ffd0
  • terminal.ansiBrightGreen#7fff7f
  • terminal.ansiBrightMagenta#d07fff
  • terminal.ansiBrightRed#ff7f7f
  • terminal.ansiBrightYellow#ffd27f
  • terminal.ansiCyan#87d7d7
  • terminal.ansiGreen#5fd75f
  • terminal.ansiMagenta#af5faf
  • terminal.ansiRed#d75f5f
  • terminal.ansiYellow#d7af5f
  • terminal.background#1e1e1e
  • terminal.foreground#d4d4d4
  • titleBar.activeBackground#0a2342
  • titleBar.activeForeground#ffffff
  • titleBar.inactiveBackground#1a1a1a
  • titleBar.inactiveForeground#aaaaaa

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#6a6a6aitalic
string, string.quoted, string.template#87d7d7
keyword, storage.type, storage.modifier#5f87d7bold
keyword.operator, punctuation.accessor#5f87d7
variable, variable.other#d4d4d4
variable.parameter#a8a8a8italic
entity.name.function, support.function#5fd75f
meta.function-call#5fd75f
entity.name.class, entity.name.type.class, support.class#d7af5fbold
entity.name.type, support.type#af5faf
entity.name.type.interface#5f87d7italic
constant.numeric#d7af5f
constant, constant.language, constant.character#d7af5f
constant.language.boolean#5f87d7bold
variable.other.property, support.variable.property#e0e0e0
meta.object-literal.key#5f87d7
entity.name.tag, punctuation.definition.tag#d75f5f
entity.other.attribute-name#a8a8a8italic
punctuation, meta.brace#cccccc
string.regexp#af5faf
constant.character.escape#d75f5f
meta.decorator, punctuation.decorator#5f87d7
invalid, invalid.illegal#ff0000strikethrough
markup.heading, entity.name.section#5f87d7bold
markup.bold#5f87d7bold
markup.italic#a8a8a8italic
markup.underline.link#5fd75f
markup.inline.raw, markup.fenced_code#5f87d7
support.type.property-name.json#5f87d7
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#5fd75f
support.type.property-name.css#d7af5f
support.constant.property-value.css#af5faf