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#D84315
  • activityBar.background#F5EED9
  • activityBar.foreground#4E342E
  • activityBarBadge.background#D84315
  • activityBarBadge.foreground#FAF3E0
  • badge.background#D84315
  • badge.foreground#FAF3E0
  • button.background#D84315
  • button.foreground#FAF3E0
  • button.hoverBackground#E64A19
  • dropdown.background#F0E8D5
  • dropdown.border#D8C7A9
  • dropdown.foreground#4E342E
  • editor.background#FAF3E0
  • editor.findMatchBackground#FF572240
  • editor.findMatchHighlightBackground#FF572224
  • editor.foreground#4E342E
  • editor.lineHighlightBackground#FAF3E080
  • editor.lineHighlightBorder#D84315
  • editor.selectionBackground#FF8F0040
  • editor.selectionHighlightBackground#FFAB4014
  • editorBracketMatch.background#FF8F0044
  • editorBracketMatch.border#D84315
  • editorCursor.foreground#D84315
  • editorGroupHeader.tabsBackground#FAF3E0
  • editorIndentGuide.activeBackground#9E9E9E88
  • editorIndentGuide.background#9E9E9E44
  • editorLineNumber.activeForeground#D84315
  • editorLineNumber.foreground#9E9E9E
  • editorWhitespace.foreground#9E9E9E
  • focusBorder#D84315
  • gitDecoration.conflictingResourceForeground#BF360C
  • gitDecoration.deletedResourceForeground#E53935
  • gitDecoration.modifiedResourceForeground#D84315
  • gitDecoration.untrackedResourceForeground#FF8F00
  • input.background#F0E8D5
  • input.border#D8C7A9
  • input.foreground#4E342E
  • input.placeholderForeground#9E9E9E
  • inputOption.activeBorder#D84315
  • list.activeSelectionBackground#FF8F0040
  • list.activeSelectionForeground#4E342E
  • list.focusBackground#FF8F0030
  • list.highlightForeground#D84315
  • list.hoverBackground#FF8F0040
  • minimap.background#FAF3E0
  • minimapSlider.activeBackground#D8430066
  • minimapSlider.background#D8430022
  • minimapSlider.hoverBackground#D8430044
  • panel.background#FAF3E0
  • panel.border#D8C7A9
  • panelTitle.activeBorder#D84315
  • panelTitle.activeForeground#4E342E
  • panelTitle.inactiveForeground#5D4037
  • scrollbar.shadow#00000044
  • scrollbarSlider.activeBackground#D8430088
  • scrollbarSlider.background#9E9E9444
  • scrollbarSlider.hoverBackground#9E9E9488
  • sideBar.background#F0E8D5
  • sideBar.foreground#4E342E
  • sideBarSectionHeader.background#E9DDC5
  • sideBarSectionHeader.foreground#D84315
  • sideBarTitle.foreground#D84315
  • statusBar.background#D84315
  • statusBar.debuggingBackground#BF360C
  • statusBar.foreground#FAF3E0
  • statusBar.noFolderBackground#E9DDC5
  • statusBarItem.hoverBackground#FF8F00
  • tab.activeBackground#FAF3E0
  • tab.activeBorder#D84315
  • tab.activeForeground#4E342E
  • tab.border#D8C7A9
  • tab.inactiveBackground#F0E8D5
  • tab.inactiveForeground#5D4037
  • terminal.ansiBlue#5C6BC0
  • terminal.ansiBrightBlue#7986CB
  • terminal.ansiBrightCyan#80DEEA
  • terminal.ansiBrightGreen#AED581
  • terminal.ansiBrightMagenta#CE93D8
  • terminal.ansiBrightRed#FF7043
  • terminal.ansiBrightYellow#FFD54F
  • terminal.ansiCyan#4DD0E1
  • terminal.ansiGreen#81C784
  • terminal.ansiMagenta#BA68C8
  • terminal.ansiRed#E53935
  • terminal.ansiYellow#FFB300
  • terminal.background#FAF3E0
  • terminal.foreground#4E342E
  • titleBar.activeBackground#E9DDC5
  • titleBar.activeForeground#4E342E
  • titleBar.inactiveBackground#D8C7A9
  • titleBar.inactiveForeground#5D4037

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#757575italic
string, string.quoted, string.template#FF8F00
keyword, storage.type, storage.modifier#E53935bold
keyword.operator, punctuation.accessor#D84315
variable, variable.other#4E342E
variable.parameter#FF5722italic
entity.name.function, support.function#D84315
meta.function-call#FF5722
entity.name.class, entity.name.type.class, support.class#BF360Cbold
entity.name.type, support.type#E53935
entity.name.type.interface#FF5722italic
constant.numeric#FF5722
constant, constant.language, constant.character#FF8F00
constant.language.boolean#E53935bold
variable.other.property, support.variable.property#D84315
meta.object-literal.key#D84315
entity.name.tag, punctuation.definition.tag#E53935
entity.other.attribute-name#BF360Citalic
punctuation, meta.brace#9E9E9E
string.regexp#D84315
constant.character.escape#BF360C
meta.decorator, punctuation.decorator#FF5722
invalid, invalid.illegal#D50000strikethrough
markup.heading, entity.name.section#E53935bold
markup.bold#D84315bold
markup.italic#FF5722italic
markup.underline.link#D84315
markup.inline.raw, markup.fenced_code#FF8F00
support.type.property-name.json#E53935
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#D84315
support.type.property-name.css#FF5722
support.constant.property-value.css#FF8F00