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#c49e5d
  • activityBar.background#fff8f0
  • activityBar.foreground#5a3e2b
  • activityBarBadge.background#c49e5d
  • activityBarBadge.foreground#ffffff
  • badge.background#c49e5d
  • badge.foreground#ffffff
  • button.background#c49e5d
  • button.foreground#ffffff
  • button.hoverBackground#b0804a
  • dropdown.background#fff8f0
  • dropdown.border#d4c2b5
  • dropdown.foreground#5a3e2b
  • editor.background#fafafa
  • editor.findMatchBackground#ffeb3b44
  • editor.findMatchHighlightBackground#ffeb3b22
  • editor.foreground#333333
  • editor.lineHighlightBackground#f5e9e0
  • editor.lineHighlightBorder#e0c9b3
  • editor.selectionBackground#c49e5d66
  • editor.selectionHighlightBackground#c49e5d33
  • editorBracketMatch.background#ffeb3b33
  • editorBracketMatch.border#c49e5d
  • editorCursor.foreground#3b2b20
  • editorGroupHeader.tabsBackground#fff8f0
  • editorIndentGuide.activeBackground#c49e5d
  • editorIndentGuide.background#e0c9b3
  • editorLineNumber.activeForeground#5a3e2b
  • editorLineNumber.foreground#8a7a6e
  • editorWhitespace.foreground#d4c2b5
  • focusBorder#c49e5d
  • gitDecoration.conflictingResourceForeground#ab47bc
  • gitDecoration.deletedResourceForeground#ef5350
  • gitDecoration.modifiedResourceForeground#ffca28
  • gitDecoration.untrackedResourceForeground#66bb6a
  • input.background#ffffff
  • input.border#d4c2b5
  • input.foreground#333333
  • input.placeholderForeground#a8a8a8
  • inputOption.activeBorder#c49e5d
  • list.activeSelectionBackground#c49e5d
  • list.activeSelectionForeground#ffffff
  • list.focusBackground#e0c9b3
  • list.highlightForeground#c49e5d
  • list.hoverBackground#f0e5d8
  • minimap.background#fafafa
  • minimapSlider.activeBackground#8a7a6e
  • minimapSlider.background#d4c2b5
  • minimapSlider.hoverBackground#b0804a
  • panel.background#fff8f0
  • panel.border#d4c2b5
  • panelTitle.activeBorder#c49e5d
  • panelTitle.activeForeground#5a3e2b
  • panelTitle.inactiveForeground#8a7a6e
  • scrollbar.shadow#00000033
  • scrollbarSlider.activeBackground#8a7a6e
  • scrollbarSlider.background#d4c2b5
  • scrollbarSlider.hoverBackground#b0804a
  • sideBar.background#fff8f0
  • sideBar.foreground#5a3e2b
  • sideBarSectionHeader.background#f0e5d8
  • sideBarSectionHeader.foreground#5a3e2b
  • sideBarTitle.foreground#5a3e2b
  • statusBar.background#c49e5d
  • statusBar.debuggingBackground#d9534f
  • statusBar.foreground#ffffff
  • statusBar.noFolderBackground#e0c9b3
  • statusBarItem.hoverBackground#b0804a
  • tab.activeBackground#fff8f0
  • tab.activeBorder#c49e5d
  • tab.activeForeground#5a3e2b
  • tab.border#d4c2b5
  • tab.inactiveBackground#f5e9e0
  • tab.inactiveForeground#8a7a6e
  • terminal.ansiBlue#42a5f5
  • terminal.ansiBrightBlue#64b5f6
  • terminal.ansiBrightCyan#4dd0e1
  • terminal.ansiBrightGreen#81c784
  • terminal.ansiBrightMagenta#ba68c8
  • terminal.ansiBrightRed#ef5350
  • terminal.ansiBrightYellow#ffd54f
  • terminal.ansiCyan#26c6da
  • terminal.ansiGreen#66bb6a
  • terminal.ansiMagenta#ab47bc
  • terminal.ansiRed#ef5350
  • terminal.ansiYellow#ffca28
  • terminal.background#fafafa
  • terminal.foreground#333333
  • titleBar.activeBackground#e0c9b3
  • titleBar.activeForeground#3b2b20
  • titleBar.inactiveBackground#e8d5c5
  • titleBar.inactiveForeground#8a7a6e

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#8a7a6eitalic
string, string.quoted, string.template#66bb6a
keyword, storage.type, storage.modifier#d32f2fbold
keyword.operator, punctuation.accessor#c49e5d
variable, variable.other#5a3e2b
variable.parameter#5a3e2bitalic
entity.name.function, support.function#42a5f5
meta.function-call#ab47bc
entity.name.class, entity.name.type.class, support.class#00796bbold
entity.name.type, support.type#26c6da
entity.name.type.interface#ff9800italic
constant.numeric#ab47bc
constant, constant.language, constant.character#d32f2f
constant.language.boolean#d32f2fbold
variable.other.property, support.variable.property#5a3e2b
meta.object-literal.key#00796b
entity.name.tag, punctuation.definition.tag#d32f2f
entity.other.attribute-name#5a3e2bitalic
punctuation, meta.brace#8a7a6e
string.regexp#66bb6a
constant.character.escape#ab47bc
meta.decorator, punctuation.decorator#26c6da
invalid, invalid.illegal#ff1744strikethrough
markup.heading, entity.name.section#5a3e2bbold
markup.bold#d32f2fbold
markup.italic#5a3e2bitalic
markup.underline.link#42a5f5
markup.inline.raw, markup.fenced_code#ab47bc
support.type.property-name.json#00796b
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#ff9800
support.type.property-name.css#42a5f5
support.constant.property-value.css#66bb6a