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#ffb400
  • activityBar.background#2a1c0a
  • activityBar.foreground#ffb400
  • activityBarBadge.background#c48a00
  • activityBarBadge.foreground#1b1205
  • badge.background#c48a00
  • badge.foreground#1b1205
  • button.background#8c945b
  • button.foreground#1b1205
  • button.hoverBackground#c48a00
  • dropdown.background#231a0c
  • dropdown.border#5f4b2c
  • dropdown.foreground#f5e8d0
  • editor.background#1b1205
  • editor.findMatchBackground#ffb40044
  • editor.findMatchHighlightBackground#ffb40022
  • editor.foreground#f5e8d0
  • editor.lineHighlightBackground#ffb40020
  • editor.lineHighlightBorder#ffb40040
  • editor.selectionBackground#c48a0040
  • editor.selectionHighlightBackground#c48a0025
  • editorBracketMatch.background#ffb40033
  • editorBracketMatch.border#ffb400
  • editorCursor.foreground#ffb400
  • editorGroupHeader.tabsBackground#1b1205
  • editorIndentGuide.activeBackground#5f4b2c88
  • editorIndentGuide.background#5f4b2c44
  • editorLineNumber.activeForeground#ffb400
  • editorLineNumber.foreground#7a6a44
  • editorWhitespace.foreground#5f4b2c
  • focusBorder#c48a00
  • gitDecoration.conflictingResourceForeground#ff6abf
  • gitDecoration.deletedResourceForeground#ff6a6a
  • gitDecoration.modifiedResourceForeground#ffb400
  • gitDecoration.untrackedResourceForeground#b5ff6a
  • input.background#231a0c
  • input.border#5f4b2c
  • input.foreground#f5e8d0
  • input.placeholderForeground#7a6a44
  • inputOption.activeBorder#ffb400
  • list.activeSelectionBackground#8c945b
  • list.activeSelectionForeground#1b1205
  • list.focusBackground#8c945b
  • list.highlightForeground#ffb400
  • list.hoverBackground#c48a0044
  • minimap.background#1b1205
  • minimapSlider.activeBackground#ffb40066
  • minimapSlider.background#ffb40022
  • minimapSlider.hoverBackground#ffb40044
  • panel.background#1b1205
  • panel.border#8c945b
  • panelTitle.activeBorder#ffb400
  • panelTitle.activeForeground#ffb400
  • panelTitle.inactiveForeground#e8d8b5
  • scrollbar.shadow#00000044
  • scrollbarSlider.activeBackground#ffb40088
  • scrollbarSlider.background#7a6a4444
  • scrollbarSlider.hoverBackground#7a6a4488
  • sideBar.background#231a0c
  • sideBar.foreground#e8d8b5
  • sideBarSectionHeader.background#2a1c0a
  • sideBarSectionHeader.foreground#ffb400
  • sideBarTitle.foreground#ffb400
  • statusBar.background#8c945b
  • statusBar.debuggingBackground#ffb400
  • statusBar.foreground#1b1205
  • statusBar.noFolderBackground#2a1c0a
  • statusBarItem.hoverBackground#c48a00
  • tab.activeBackground#332114
  • tab.activeBorder#ffb400
  • tab.activeForeground#fffbf0
  • tab.border#1b1205
  • tab.inactiveBackground#231a0c
  • tab.inactiveForeground#e8d8b5
  • terminal.ansiBlue#6a9fff
  • terminal.ansiBrightBlue#8ab8ff
  • terminal.ansiBrightCyan#8affff
  • terminal.ansiBrightGreen#d0ff8a
  • terminal.ansiBrightMagenta#ff8abf
  • terminal.ansiBrightRed#ff8a8a
  • terminal.ansiBrightYellow#ffcc66
  • terminal.ansiCyan#6affff
  • terminal.ansiGreen#b5ff6a
  • terminal.ansiMagenta#ff6abf
  • terminal.ansiRed#ff6a6a
  • terminal.ansiYellow#ffb400
  • terminal.background#1b1205
  • terminal.foreground#f5e8d0
  • titleBar.activeBackground#2a1c0a
  • titleBar.activeForeground#f5e8d0
  • titleBar.inactiveBackground#1b1205
  • titleBar.inactiveForeground#e8d8b5

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#6e5c39italic
string, string.quoted, string.template#ffd66b
keyword, storage.type, storage.modifier#ffb400bold
keyword.operator, punctuation.accessor#ffe066
variable, variable.other#e0d5b5
variable.parameter#ff9e40italic
entity.name.function, support.function#ffd66b
meta.function-call#e8d8b5
entity.name.class, entity.name.type.class, support.class#ffa000bold
entity.name.type, support.type#ffb400
entity.name.type.interface#8c945bitalic
constant.numeric#ff9e40
constant, constant.language, constant.character#ffcb6b
constant.language.boolean#ff9e40bold
variable.other.property, support.variable.property#e8d8b5
meta.object-literal.key#ffd66b
entity.name.tag, punctuation.definition.tag#ffb400
entity.other.attribute-name#ffa000italic
punctuation, meta.brace#ffe066
string.regexp#ff9e40
constant.character.escape#8c945b
meta.decorator, punctuation.decorator#ff9e40
invalid, invalid.illegal#ff6a6astrikethrough
markup.heading, entity.name.section#ffb400bold
markup.bold#ffa000bold
markup.italic#ffd66bitalic
markup.underline.link#8c945b
markup.inline.raw, markup.fenced_code#b5ff6a
support.type.property-name.json#ffb400
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#ffa000
support.type.property-name.css#ffd66b
support.constant.property-value.css#ffe066
themesmith by CyberBoost - VS Code Theme