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#d97700
  • activityBar.background#f0e8d9
  • activityBar.foreground#555555
  • activityBarBadge.background#d97700
  • activityBarBadge.foreground#faf4e6
  • badge.background#d97700
  • badge.foreground#faf4e6
  • button.background#e5d8b3
  • button.foreground#333333
  • button.hoverBackground#d9c89a
  • dropdown.background#f5f0e3
  • dropdown.border#e0d8c9
  • dropdown.foreground#333333
  • editor.background#faf4e6
  • editor.findMatchBackground#ffb84a40
  • editor.findMatchHighlightBackground#ffb84a30
  • editor.foreground#333333
  • editor.lineHighlightBackground#fff9e6
  • editor.lineHighlightBorder#e5d8b3
  • editor.selectionBackground#ffd69955
  • editor.selectionHighlightBackground#ffd69933
  • editorBracketMatch.background#a8d5b340
  • editorBracketMatch.border#a8d5b3
  • editorCursor.foreground#d97700
  • editorGroupHeader.tabsBackground#e8e2d5
  • editorIndentGuide.activeBackground#b5a991
  • editorIndentGuide.background#d8d2c6
  • editorLineNumber.activeForeground#d97700
  • editorLineNumber.foreground#b5a991
  • editorWhitespace.foreground#c0b9b0
  • focusBorder#d97700
  • gitDecoration.conflictingResourceForeground#cda34f
  • gitDecoration.deletedResourceForeground#d97700
  • gitDecoration.modifiedResourceForeground#4c9a2a
  • gitDecoration.untrackedResourceForeground#2b8c7d
  • input.background#f5f0e3
  • input.border#e0d8c9
  • input.foreground#333333
  • input.placeholderForeground#999999
  • inputOption.activeBorder#d97700
  • list.activeSelectionBackground#fff9e6
  • list.activeSelectionForeground#333333
  • list.focusBackground#fff9e6
  • list.highlightForeground#d97700
  • list.hoverBackground#fff2d9
  • minimap.background#faf4e6
  • minimapSlider.activeBackground#c0b9b066
  • minimapSlider.background#c0b9b022
  • minimapSlider.hoverBackground#c0b9b044
  • panel.background#faf4e6
  • panel.border#e0d8c9
  • panelTitle.activeBorder#d97700
  • panelTitle.activeForeground#333333
  • panelTitle.inactiveForeground#777777
  • scrollbar.shadow#00000020
  • scrollbarSlider.activeBackground#d9770088
  • scrollbarSlider.background#c0b9b044
  • scrollbarSlider.hoverBackground#c0b9b066
  • sideBar.background#f5f0e3
  • sideBar.foreground#444444
  • sideBarSectionHeader.background#f0e8d9
  • sideBarSectionHeader.foreground#555555
  • sideBarTitle.foreground#555555
  • statusBar.background#f0e8d9
  • statusBar.debuggingBackground#d97700
  • statusBar.foreground#333333
  • statusBar.noFolderBackground#f0e8d9
  • statusBarItem.hoverBackground#d4cbb8
  • tab.activeBackground#f5f0e3
  • tab.activeBorder#d97700
  • tab.activeForeground#333333
  • tab.border#e0d8c9
  • tab.inactiveBackground#e8e2d5
  • tab.inactiveForeground#777777
  • terminal.ansiBlue#4a90e2
  • terminal.ansiBrightBlue#6ab0ff
  • terminal.ansiBrightCyan#5ac8a8
  • terminal.ansiBrightGreen#6fd65d
  • terminal.ansiBrightMagenta#cfa0c5
  • terminal.ansiBrightRed#e08e00
  • terminal.ansiBrightYellow#e5c46b
  • terminal.ansiCyan#2b8c7d
  • terminal.ansiGreen#4c9a2a
  • terminal.ansiMagenta#b585b7
  • terminal.ansiRed#d97700
  • terminal.ansiYellow#cda34f
  • terminal.background#faf4e6
  • terminal.foreground#333333
  • titleBar.activeBackground#f0e8d9
  • titleBar.activeForeground#333333
  • titleBar.inactiveBackground#e8e2d5
  • titleBar.inactiveForeground#777777

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#a8a8a8italic
string, string.quoted, string.template#4c9a2a
keyword, storage.type, storage.modifier#d97700bold
keyword.operator, punctuation.accessor#2b8c7d
variable, variable.other#555555
variable.parameter#2b8c7ditalic
entity.name.function, support.function#2b8c7d
meta.function-call#2b8c7d
entity.name.class, entity.name.type.class, support.class#d97700bold
entity.name.type, support.type#2b8c7d
entity.name.type.interface#2b8c7ditalic
constant.numeric#d97700
constant, constant.language, constant.character#4c9a2a
constant.language.boolean#d97700bold
variable.other.property, support.variable.property#555555
meta.object-literal.key#2b8c7d
entity.name.tag, punctuation.definition.tag#4a90e2
entity.other.attribute-name#b585b7italic
punctuation, meta.brace#555555
string.regexp#4c9a2a
constant.character.escape#b585b7
meta.decorator, punctuation.decorator#cda34f
invalid, invalid.illegal#ff6b6bstrikethrough
markup.heading, entity.name.section#d97700bold
markup.bold#d97700bold
markup.italic#2b8c7ditalic
markup.underline.link#4a90e2
markup.inline.raw, markup.fenced_code#4c9a2a
support.type.property-name.json#2b8c7d
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#cda34f
support.type.property-name.css#2b8c7d
support.constant.property-value.css#4c9a2a