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#4a7ddc
  • activityBar.background#f4ecd9
  • activityBar.foreground#4a7ddc
  • activityBarBadge.background#4a7ddc
  • activityBarBadge.foreground#fbf7ef
  • badge.background#4a7ddc
  • badge.foreground#fbf7ef
  • button.background#4a7ddc
  • button.foreground#fbf7ef
  • button.hoverBackground#c9e4ff
  • dropdown.background#f4ecd9
  • dropdown.border#e5d8c5
  • dropdown.foreground#40362e
  • editor.background#fbf7ef
  • editor.findMatchBackground#4a7dcf44
  • editor.findMatchHighlightBackground#4a7ddc22
  • editor.foreground#40362e
  • editor.lineHighlightBackground#e8e0d6aa
  • editor.lineHighlightBorder#4a7ddc80
  • editor.selectionBackground#4a7ddc40
  • editor.selectionHighlightBackground#4a7ddc22
  • editorBracketMatch.background#4a7ddc33
  • editorBracketMatch.border#4a7ddc
  • editorCursor.foreground#4a7ddc
  • editorGroupHeader.tabsBackground#fbf7ef
  • editorIndentGuide.activeBackground#c5bfb188
  • editorIndentGuide.background#c5bfb144
  • editorLineNumber.activeForeground#4a7ddc
  • editorLineNumber.foreground#8a7d6e
  • editorWhitespace.foreground#c5bfb1
  • focusBorder#4a7ddc
  • gitDecoration.conflictingResourceForeground#c1a75e
  • gitDecoration.deletedResourceForeground#c44d33
  • gitDecoration.modifiedResourceForeground#4a7ddc
  • gitDecoration.untrackedResourceForeground#6b8e23
  • input.background#f4ecd9
  • input.border#e5d8c5
  • input.foreground#40362e
  • input.placeholderForeground#8a7d6e
  • inputOption.activeBorder#4a7ddc
  • list.activeSelectionBackground#c9e4ff
  • list.activeSelectionForeground#40362e
  • list.focusBackground#e5d8c5
  • list.highlightForeground#4a7ddc
  • list.hoverBackground#e8e0d6
  • minimap.background#fbf7ef
  • minimapSlider.activeBackground#4a7ddc66
  • minimapSlider.background#4a7ddc22
  • minimapSlider.hoverBackground#4a7ddc44
  • panel.background#f6f0e5
  • panel.border#e5d8c5
  • panelTitle.activeBorder#4a7ddc
  • panelTitle.activeForeground#4a7ddc
  • panelTitle.inactiveForeground#8a7d6e
  • scrollbar.shadow#00000044
  • scrollbarSlider.activeBackground#4a7ddc88
  • scrollbarSlider.background#e5d8c544
  • scrollbarSlider.hoverBackground#e5d8c588
  • sideBar.background#f6f0e5
  • sideBar.foreground#40362e
  • sideBarSectionHeader.background#f4ecd9
  • sideBarSectionHeader.foreground#4a7ddc
  • sideBarTitle.foreground#4a7ddc
  • statusBar.background#e5d8c5
  • statusBar.debuggingBackground#4a7ddc
  • statusBar.foreground#40362e
  • statusBar.noFolderBackground#d9cdb8
  • statusBarItem.hoverBackground#c9e4ff
  • tab.activeBackground#fbf7ef
  • tab.activeBorder#4a7ddc
  • tab.activeForeground#40362e
  • tab.border#e5d8c5
  • tab.inactiveBackground#f2e9d8
  • tab.inactiveForeground#8a7d6e
  • terminal.ansiBlue#4a7ddc
  • terminal.ansiBrightBlue#c9e4ff
  • terminal.ansiBrightCyan#b2d8a0
  • terminal.ansiBrightGreen#b2d8a0
  • terminal.ansiBrightMagenta#d1a78c
  • terminal.ansiBrightRed#d9644f
  • terminal.ansiBrightYellow#e6c77e
  • terminal.ansiCyan#6b8e23
  • terminal.ansiGreen#6b8e23
  • terminal.ansiMagenta#b08968
  • terminal.ansiRed#c44d33
  • terminal.ansiYellow#c1a75e
  • terminal.background#fbf7ef
  • terminal.foreground#40362e
  • titleBar.activeBackground#f0e5d2
  • titleBar.activeForeground#40362e
  • titleBar.inactiveBackground#fbf7ef
  • titleBar.inactiveForeground#8a7d6e

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#a89f94italic
string, string.quoted, string.template#6b8e23
keyword, storage.type, storage.modifier#4a7ddcbold
keyword.operator, punctuation.accessor#40362e
variable, variable.other#40362e
variable.parameter#6b8e23italic
entity.name.function, support.function#6b8e23
meta.function-call#4a7ddc
entity.name.class, entity.name.type.class, support.class#4a7ddcbold
entity.name.type, support.type#4a7ddc
entity.name.type.interface#6b8e23italic
constant.numeric#6b8e23
constant, constant.language, constant.character#4a7ddc
constant.language.boolean#4a7ddcbold
variable.other.property, support.variable.property#6b8e23
meta.object-literal.key#4a7ddc
entity.name.tag, punctuation.definition.tag#4a7ddc
entity.other.attribute-name#a89f94italic
punctuation, meta.brace#40362e
string.regexp#6b8e23
constant.character.escape#a89f94
meta.decorator, punctuation.decorator#c9e4ff
invalid, invalid.illegal#c44d33strikethrough
markup.heading, entity.name.section#4a7ddcbold
markup.bold#4a7ddcbold
markup.italic#a89f94italic
markup.underline.link#4a7ddc
markup.inline.raw, markup.fenced_code#6b8e23
support.type.property-name.json#4a7ddc
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#a89f94
support.type.property-name.css#4a7ddc
support.constant.property-value.css#6b8e23