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—