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#d9a712
  • activityBar.background#4a162c
  • activityBar.foreground#f5c6c6
  • activityBarBadge.background#3fa7a0
  • activityBarBadge.foreground#0a0a13
  • badge.background#3fa7a0
  • badge.foreground#0a0a13
  • button.background#5c2121
  • button.foreground#f5c6c6
  • button.hoverBackground#7a3c3c
  • dropdown.background#1c2738
  • dropdown.border#2c3e50
  • dropdown.foreground#dcdcdc
  • editor.background#0a0a13
  • editor.findMatchBackground#5c2121
  • editor.findMatchHighlightBackground#5c2121
  • editor.foreground#c8c8c8
  • editor.lineHighlightBackground#1c2738
  • editor.lineHighlightBorder#2c3e50
  • editor.selectionBackground#2c3e50
  • editor.selectionHighlightBackground#2c3e50
  • editorBracketMatch.background#2c3e50
  • editorBracketMatch.border#d9a712
  • editorCursor.foreground#d9a712
  • editorGroupHeader.tabsBackground#151522
  • editorIndentGuide.activeBackground#5c2121
  • editorIndentGuide.background#3d3d4d
  • editorLineNumber.activeForeground#dcdcdc
  • editorLineNumber.foreground#7a7a7a
  • editorWhitespace.foreground#3d3d4d
  • focusBorder#d9a712
  • gitDecoration.conflictingResourceForeground#5c2121
  • gitDecoration.deletedResourceForeground#d9534f
  • gitDecoration.modifiedResourceForeground#3fa7a0
  • gitDecoration.untrackedResourceForeground#6abf44
  • input.background#1c2738
  • input.border#2c3e50
  • input.foreground#dcdcdc
  • input.placeholderForeground#7a7a7a
  • inputOption.activeBorder#d9a712
  • list.activeSelectionBackground#2c3e50
  • list.activeSelectionForeground#dcdcdc
  • list.focusBackground#2c3e50
  • list.highlightForeground#d9a712
  • list.hoverBackground#2c3e50
  • minimap.background#0a0a13
  • minimapSlider.activeBackground#5fb3a4
  • minimapSlider.background#2c3e50
  • minimapSlider.hoverBackground#3fa7a0
  • panel.background#151522
  • panel.border#1e1e2f
  • panelTitle.activeBorder#d9a712
  • panelTitle.activeForeground#dcdcdc
  • panelTitle.inactiveForeground#7a7a7a
  • scrollbar.shadow#0a0a13
  • scrollbarSlider.activeBackground#5fb3a4
  • scrollbarSlider.background#2c3e50
  • scrollbarSlider.hoverBackground#3fa7a0
  • sideBar.background#151522
  • sideBar.foreground#dcdcdc
  • sideBarSectionHeader.background#1e1e2f
  • sideBarSectionHeader.foreground#f5c6c6
  • sideBarTitle.foreground#dcdcdc
  • statusBar.background#1e1e2f
  • statusBar.debuggingBackground#5c2121
  • statusBar.foreground#dcdcdc
  • statusBar.noFolderBackground#1e1e2f
  • statusBarItem.hoverBackground#2c3e50
  • tab.activeBackground#151522
  • tab.activeBorder#d9a712
  • tab.activeForeground#dcdcdc
  • tab.border#1e1e2f
  • tab.inactiveBackground#0a0a13
  • tab.inactiveForeground#7a7a7a
  • terminal.ansiBlue#3fa7a0
  • terminal.ansiBrightBlue#5fb3a4
  • terminal.ansiBrightCyan#8be9d8
  • terminal.ansiBrightGreen#8ecc5c
  • terminal.ansiBrightMagenta#7a3c3c
  • terminal.ansiBrightRed#ff6c6c
  • terminal.ansiBrightYellow#ffb86c
  • terminal.ansiCyan#6fd3c1
  • terminal.ansiGreen#6abf44
  • terminal.ansiMagenta#5c2121
  • terminal.ansiRed#d9534f
  • terminal.ansiYellow#d9a712
  • terminal.background#0a0a13
  • terminal.foreground#c8c8c8
  • titleBar.activeBackground#1e1e2f
  • titleBar.activeForeground#dcdcdc
  • titleBar.inactiveBackground#151522
  • titleBar.inactiveForeground#7a7a7a

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#567b73italic
string, string.quoted, string.template#d9a712
keyword, storage.type, storage.modifier#5c2121bold
keyword.operator, punctuation.accessor#3fa7a0
variable, variable.other#c8c8c8
variable.parameter#3fa7a0italic
entity.name.function, support.function#5fb3a4
meta.function-call#5fb3a4
entity.name.class, entity.name.type.class, support.class#5c2121bold
entity.name.type, support.type#0b3d5c
entity.name.type.interface#3fa7a0italic
constant.numeric#d9a712
constant, constant.language, constant.character#d9a712
constant.language.boolean#5c2121bold
variable.other.property, support.variable.property#0b3d5c
meta.object-literal.key#d9a712
entity.name.tag, punctuation.definition.tag#5c2121
entity.other.attribute-name#3fa7a0italic
punctuation, meta.brace#7a7a7a
string.regexp#d9a712
constant.character.escape#3fa7a0
meta.decorator, punctuation.decorator#5c2121
invalid, invalid.illegal#ff6c6cstrikethrough
markup.heading, entity.name.section#5c2121bold
markup.bold#5c2121bold
markup.italic#3fa7a0italic
markup.underline.link#3fa7a0
markup.inline.raw, markup.fenced_code#d9a712
support.type.property-name.json#d9a712
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#5c2121
support.type.property-name.css#0b3d5c
support.constant.property-value.css#d9a712