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#2c5f7d
  • activityBar.background#f0d8c4
  • activityBar.foreground#3b3832
  • activityBarBadge.background#2c5f7d
  • activityBarBadge.foreground#ffffff
  • badge.background#2c5f7d
  • badge.foreground#ffffff
  • button.background#2c5f7d
  • button.foreground#ffffff
  • button.hoverBackground#2c5f7daa
  • dropdown.background#ffffff
  • dropdown.border#a39890
  • dropdown.foreground#3b3832
  • editor.background#fff9f2
  • editor.findMatchBackground#d4a35a40
  • editor.findMatchHighlightBackground#d4a35a20
  • editor.foreground#3b3832
  • editor.lineHighlightBackground#2c5f7d20
  • editor.lineHighlightBorder#2c5f7d
  • editor.selectionBackground#2c5f7d30
  • editor.selectionHighlightBackground#2c5f7d20
  • editorBracketMatch.background#2c5f7d20
  • editorBracketMatch.border#2c5f7d
  • editorCursor.foreground#2c5f7d
  • editorGroupHeader.tabsBackground#fef4e9
  • editorIndentGuide.activeBackground#b0a9a180
  • editorIndentGuide.background#b0a9a140
  • editorLineNumber.activeForeground#2c5f7d
  • editorLineNumber.foreground#a39890
  • editorWhitespace.foreground#b0a9a180
  • focusBorder#2c5f7d
  • gitDecoration.conflictingResourceForeground#d4a35a
  • gitDecoration.deletedResourceForeground#c84e4e
  • gitDecoration.modifiedResourceForeground#2c5f7d
  • gitDecoration.untrackedResourceForeground#8caf60
  • input.background#ffffff
  • input.border#a39890
  • input.foreground#3b3832
  • input.placeholderForeground#a39890
  • inputOption.activeBorder#2c5f7d
  • list.activeSelectionBackground#2c5f7d20
  • list.activeSelectionForeground#3b3832
  • list.focusBackground#2c5f7d20
  • list.highlightForeground#2c5f7d
  • list.hoverBackground#2c5f7d10
  • minimap.background#fff9f2
  • minimapSlider.activeBackground#b0a9a160
  • minimapSlider.background#b0a9a120
  • minimapSlider.hoverBackground#b0a9a140
  • panel.background#fff9f2
  • panel.border#a39890
  • panelTitle.activeBorder#2c5f7d
  • panelTitle.activeForeground#2c5f7d
  • panelTitle.inactiveForeground#8a857d
  • scrollbar.shadow#00000044
  • scrollbarSlider.activeBackground#b0a9a180
  • scrollbarSlider.background#b0a9a140
  • scrollbarSlider.hoverBackground#b0a9a160
  • sideBar.background#fef4e9
  • sideBar.foreground#3b3832
  • sideBarSectionHeader.background#f2e8de
  • sideBarSectionHeader.foreground#2c5f7d
  • sideBarTitle.foreground#2c5f7d
  • statusBar.background#2c5f7d
  • statusBar.debuggingBackground#924c63
  • statusBar.foreground#ffffff
  • statusBar.noFolderBackground#2c5f7d
  • statusBarItem.hoverBackground#2c5f7d80
  • tab.activeBackground#ffffff
  • tab.activeBorder#2c5f7d
  • tab.activeForeground#3b3832
  • tab.border#e8e1d9
  • tab.inactiveBackground#f7f2ed
  • tab.inactiveForeground#8a857d
  • terminal.ansiBlue#2c5f7d
  • terminal.ansiBrightBlue#5b8abf
  • terminal.ansiBrightCyan#6bc2b2
  • terminal.ansiBrightGreen#9fdc9e
  • terminal.ansiBrightMagenta#b96a8e
  • terminal.ansiBrightRed#e06c75
  • terminal.ansiBrightYellow#e5c07b
  • terminal.ansiCyan#5a9b8e
  • terminal.ansiGreen#8caf60
  • terminal.ansiMagenta#924c63
  • terminal.ansiRed#c84e4e
  • terminal.ansiYellow#d4a35a
  • terminal.background#fff9f2
  • terminal.foreground#3b3832
  • titleBar.activeBackground#f0d8c4
  • titleBar.activeForeground#3b3832
  • titleBar.inactiveBackground#e8e1d9
  • titleBar.inactiveForeground#3b3832

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#a39890italic
string, string.quoted, string.template#8caf60
keyword, storage.type, storage.modifier#2c5f7dbold
keyword.operator, punctuation.accessor#d4a35a
variable, variable.other#3b3832
variable.parameter#d4a35aitalic
entity.name.function, support.function#2c5f7d
meta.function-call#2c5f7d
entity.name.class, entity.name.type.class, support.class#2c5f7dbold
entity.name.type, support.type#d4a35a
entity.name.type.interface#2c5f7ditalic
constant.numeric#d4a35a
constant, constant.language, constant.character#2c5f7d
constant.language.boolean#2c5f7dbold
variable.other.property, support.variable.property#3b3832
meta.object-literal.key#2c5f7d
entity.name.tag, punctuation.definition.tag#2c5f7d
entity.other.attribute-name#d4a35aitalic
punctuation, meta.brace#3b3832
string.regexp#2c5f7d
constant.character.escape#d4a35a
meta.decorator, punctuation.decorator#2c5f7d
invalid, invalid.illegal#c84e4estrikethrough
markup.heading, entity.name.section#2c5f7dbold
markup.bold#2c5f7dbold
markup.italic#d4a35aitalic
markup.underline.link#2c5f7d
markup.inline.raw, markup.fenced_code#8caf60
support.type.property-name.json#2c5f7d
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#2c5f7d
support.type.property-name.css#d4a35a
support.constant.property-value.css#8caf60