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#b8860b
  • activityBar.background#2c3e70
  • activityBar.foreground#f0e5c9
  • activityBarBadge.background#b8860b
  • activityBarBadge.foreground#1e1e2f
  • badge.background#4a7c8c
  • badge.foreground#f0e5c9
  • button.background#b8860b
  • button.foreground#1e1e2f
  • button.hoverBackground#c89b3c
  • dropdown.background#2b2b3c
  • dropdown.border#4a7c8c
  • dropdown.foreground#c0c0d0
  • editor.background#1e1e2f
  • editor.findMatchBackground#b8860b80
  • editor.findMatchHighlightBackground#b8860b40
  • editor.foreground#c0c0d0
  • editor.lineHighlightBackground#2c3e70
  • editor.lineHighlightBorder#4a7c8c
  • editor.selectionBackground#4a7c8c80
  • editor.selectionHighlightBackground#4a7c8c40
  • editorBracketMatch.background#4a7c8c30
  • editorBracketMatch.border#b8860b
  • editorCursor.foreground#f0e5c9
  • editorGroupHeader.tabsBackground#252531
  • editorIndentGuide.activeBackground#b8860b
  • editorIndentGuide.background#444456
  • editorLineNumber.activeForeground#f0e5c9
  • editorLineNumber.foreground#555566
  • editorWhitespace.foreground#444456
  • focusBorder#b8860b
  • gitDecoration.conflictingResourceForeground#ff4500
  • gitDecoration.deletedResourceForeground#b22222
  • gitDecoration.modifiedResourceForeground#4a7c8c
  • gitDecoration.untrackedResourceForeground#6b8e23
  • input.background#2b2b3c
  • input.border#4a7c8c
  • input.foreground#c0c0d0
  • input.placeholderForeground#555566
  • inputOption.activeBorder#b8860b
  • list.activeSelectionBackground#2c3e70
  • list.activeSelectionForeground#f0e5c9
  • list.focusBackground#2c3e70
  • list.highlightForeground#b8860b
  • list.hoverBackground#252531
  • minimap.background#1e1e2f
  • minimapSlider.activeBackground#444456
  • minimapSlider.background#44445680
  • minimapSlider.hoverBackground#444456b0
  • panel.background#252531
  • panel.border#2c3e70
  • panelTitle.activeBorder#b8860b
  • panelTitle.activeForeground#f0e5c9
  • panelTitle.inactiveForeground#c0c0d0
  • scrollbar.shadow#1e1e2f
  • scrollbarSlider.activeBackground#444456
  • scrollbarSlider.background#44445680
  • scrollbarSlider.hoverBackground#444456b0
  • sideBar.background#252531
  • sideBar.foreground#c0c0d0
  • sideBarSectionHeader.background#2c3e70
  • sideBarSectionHeader.foreground#f0e5c9
  • sideBarTitle.foreground#f0e5c9
  • statusBar.background#2c3e70
  • statusBar.debuggingBackground#4a7c8c
  • statusBar.foreground#f0e5c9
  • statusBar.noFolderBackground#252531
  • statusBarItem.hoverBackground#b8860b
  • tab.activeBackground#2c3e70
  • tab.activeBorder#b8860b
  • tab.activeForeground#f0e5c9
  • tab.border#1e1e2f
  • tab.inactiveBackground#252531
  • tab.inactiveForeground#c0c0d0
  • terminal.ansiBlue#2c3e70
  • terminal.ansiBrightBlue#4169e1
  • terminal.ansiBrightCyan#66cdaa
  • terminal.ansiBrightGreen#9acd32
  • terminal.ansiBrightMagenta#da70d6
  • terminal.ansiBrightRed#ff4500
  • terminal.ansiBrightYellow#ffd700
  • terminal.ansiCyan#4a7c8c
  • terminal.ansiGreen#6b8e23
  • terminal.ansiMagenta#8b5c7a
  • terminal.ansiRed#b22222
  • terminal.ansiYellow#b8860b
  • terminal.background#1e1e2f
  • terminal.foreground#c0c0d0
  • titleBar.activeBackground#2c3e70
  • titleBar.activeForeground#f0e5c9
  • titleBar.inactiveBackground#252531
  • titleBar.inactiveForeground#c0c0d0

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#5c7d8aitalic
string, string.quoted, string.template#c89b3c
keyword, storage.type, storage.modifier#2c3e70bold
keyword.operator, punctuation.accessor#c0c0d0
variable, variable.other#f0e5c9
variable.parameter#5c7d8aitalic
entity.name.function, support.function#d2691e
meta.function-call#ffd700
entity.name.class, entity.name.type.class, support.class#4a7c8cbold
entity.name.type, support.type#b8860b
entity.name.type.interface#5c7d8aitalic
constant.numeric#6b8e23
constant, constant.language, constant.character#8b5c7a
constant.language.boolean#b22222bold
variable.other.property, support.variable.property#4a7c8c
meta.object-literal.key#c89b3c
entity.name.tag, punctuation.definition.tag#b22222
entity.other.attribute-name#5c7d8aitalic
punctuation, meta.brace#c0c0d0
string.regexp#6b8e23
constant.character.escape#8b5c7a
meta.decorator, punctuation.decorator#b8860b
invalid, invalid.illegal#ff0000strikethrough
markup.heading, entity.name.section#c89b3cbold
markup.bold#ffd700bold
markup.italic#5c7d8aitalic
markup.underline.link#2c3e70
markup.inline.raw, markup.fenced_code#b8860b
support.type.property-name.json#c89b3c
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#4a7c8c
support.type.property-name.css#b8860b
support.constant.property-value.css#6b8e23