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#cfa45e
  • activityBar.background#080808
  • activityBar.foreground#cfa45e
  • activityBarBadge.background#cfa45e
  • activityBarBadge.foreground#0b0c10
  • badge.background#cfa45e
  • badge.foreground#0b0c10
  • button.background#15181c
  • button.foreground#e0e0e0
  • button.hoverBackground#1e2328
  • dropdown.background#111317
  • dropdown.border#1a1c20
  • dropdown.foreground#e0e0e0
  • editor.background#0b0c10
  • editor.findMatchBackground#cfa45e44
  • editor.findMatchHighlightBackground#cfa45e22
  • editor.foreground#e0e0e0
  • editor.lineHighlightBackground#1a1e24
  • editor.lineHighlightBorder#1a1e24
  • editor.selectionBackground#cfa45e33
  • editor.selectionHighlightBackground#cfa45e20
  • editorBracketMatch.background#cfa45e33
  • editorBracketMatch.border#cfa45e
  • editorCursor.foreground#cfa45e
  • editorGroupHeader.tabsBackground#0b0c10
  • editorIndentGuide.activeBackground#3a3a3a88
  • editorIndentGuide.background#3a3a3a44
  • editorLineNumber.activeForeground#cfa45e
  • editorLineNumber.foreground#5a5a5a
  • editorWhitespace.foreground#3a3a3a
  • focusBorder#cfa45e
  • gitDecoration.conflictingResourceForeground#b08968
  • gitDecoration.deletedResourceForeground#d95b5b
  • gitDecoration.modifiedResourceForeground#cfa45e
  • gitDecoration.untrackedResourceForeground#4caf50
  • input.background#111317
  • input.border#1a1c20
  • input.foreground#e0e0e0
  • input.placeholderForeground#5a5a5a
  • inputOption.activeBorder#cfa45e
  • list.activeSelectionBackground#1a1e24
  • list.activeSelectionForeground#cfa45e
  • list.focusBackground#15181c
  • list.highlightForeground#cfa45e
  • list.hoverBackground#1a1e2466
  • minimap.background#0b0c10
  • minimapSlider.activeBackground#cfa45e66
  • minimapSlider.background#cfa45e22
  • minimapSlider.hoverBackground#cfa45e44
  • panel.background#0b0c10
  • panel.border#1a1c20
  • panelTitle.activeBorder#cfa45e
  • panelTitle.activeForeground#cfa45e
  • panelTitle.inactiveForeground#a0a0a0
  • scrollbar.shadow#00000044
  • scrollbarSlider.activeBackground#cfa45e88
  • scrollbarSlider.background#5a5a5a44
  • scrollbarSlider.hoverBackground#5a5a5a88
  • sideBar.background#111317
  • sideBar.foreground#b8b8b8
  • sideBarSectionHeader.background#080808
  • sideBarSectionHeader.foreground#cfa45e
  • sideBarTitle.foreground#cfa45e
  • statusBar.background#1a1c20
  • statusBar.debuggingBackground#d95b5b
  • statusBar.foreground#e0e0e0
  • statusBar.noFolderBackground#080808
  • statusBarItem.hoverBackground#2a2c30
  • tab.activeBackground#15181c
  • tab.activeBorder#cfa45e
  • tab.activeForeground#cfa45e
  • tab.border#0b0c10
  • tab.inactiveBackground#111317
  • tab.inactiveForeground#a0a0a0
  • terminal.ansiBlue#3b8eea
  • terminal.ansiBrightBlue#4a9ff2
  • terminal.ansiBrightCyan#46cfd2
  • terminal.ansiBrightGreen#5fc75e
  • terminal.ansiBrightMagenta#c85ecc
  • terminal.ansiBrightRed#e06f6f
  • terminal.ansiBrightYellow#ffd966
  • terminal.ansiCyan#33bfc1
  • terminal.ansiGreen#4caf50
  • terminal.ansiMagenta#b849b8
  • terminal.ansiRed#d95b5b
  • terminal.ansiYellow#cfa45e
  • terminal.background#0b0c10
  • terminal.foreground#e0e0e0
  • titleBar.activeBackground#0f1013
  • titleBar.activeForeground#e0e0e0
  • titleBar.inactiveBackground#0b0c10
  • titleBar.inactiveForeground#a0a0a0

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#7a7260italic
string, string.quoted, string.template#6ecb8d
keyword, storage.type, storage.modifier#cfa45ebold
keyword.operator, punctuation.accessor#b08968
variable, variable.other#c5c5c5
variable.parameter#b08968italic
entity.name.function, support.function#cfa45e
meta.function-call#c5c5c5
entity.name.class, entity.name.type.class, support.class#cfa45ebold
entity.name.type, support.type#b08968
entity.name.type.interface#6ecb8ditalic
constant.numeric#b08968
constant, constant.language, constant.character#cfa45e
constant.language.boolean#b08968bold
variable.other.property, support.variable.property#c5c5c5
meta.object-literal.key#cfa45e
entity.name.tag, punctuation.definition.tag#b08968
entity.other.attribute-name#6ecb8ditalic
punctuation, meta.brace#b08968
string.regexp#d95b5b
constant.character.escape#6ecb8d
meta.decorator, punctuation.decorator#cfa45e
invalid, invalid.illegal#d95b5bstrikethrough
markup.heading, entity.name.section#cfa45ebold
markup.bold#cfa45ebold
markup.italic#6ecb8ditalic
markup.underline.link#6ecb8d
markup.inline.raw, markup.fenced_code#4caf50
support.type.property-name.json#cfa45e
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#b08968
support.type.property-name.css#cfa45e
support.constant.property-value.css#6ecb8d