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#d56a45
  • activityBar.background#2a1c14
  • activityBar.foreground#d56a45
  • activityBarBadge.background#8ab4a5
  • activityBarBadge.foreground#ffffff
  • badge.background#d56a45
  • badge.foreground#ffffff
  • button.background#8ab4a5
  • button.foreground#1e0f0a
  • button.hoverBackground#a0c5b5
  • dropdown.background#241712
  • dropdown.border#5a4c44
  • dropdown.foreground#f5e6e0
  • editor.background#1e0f0a
  • editor.findMatchBackground#c5a76d44
  • editor.findMatchHighlightBackground#c5a76d22
  • editor.foreground#f5e6e0
  • editor.lineHighlightBackground#8ab4a540
  • editor.lineHighlightBorder#8ab4a560
  • editor.selectionBackground#d56a4560
  • editor.selectionHighlightBackground#d56a4525
  • editorBracketMatch.background#c5a76d33
  • editorBracketMatch.border#c5a76d
  • editorCursor.foreground#d56a45
  • editorGroupHeader.tabsBackground#1e0f0a
  • editorIndentGuide.activeBackground#5a4c4488
  • editorIndentGuide.background#5a4c4450
  • editorLineNumber.activeForeground#d56a45
  • editorLineNumber.foreground#7a6050
  • editorWhitespace.foreground#5a4c44
  • focusBorder#d56a45
  • gitDecoration.conflictingResourceForeground#c5a76d
  • gitDecoration.deletedResourceForeground#c56a45
  • gitDecoration.modifiedResourceForeground#d56a45
  • gitDecoration.untrackedResourceForeground#a5c56a
  • input.background#241712
  • input.border#5a4c44
  • input.foreground#f5e6e0
  • input.placeholderForeground#7a6050
  • inputOption.activeBorder#d56a45
  • list.activeSelectionBackground#8ab4a5
  • list.activeSelectionForeground#1e0f0a
  • list.focusBackground#8ab4a5
  • list.highlightForeground#d56a45
  • list.hoverBackground#8ab4a544
  • minimap.background#1e0f0a
  • minimapSlider.activeBackground#d56a4566
  • minimapSlider.background#d56a4522
  • minimapSlider.hoverBackground#d56a4544
  • panel.background#1e0f0a
  • panel.border#8ab4a5
  • panelTitle.activeBorder#d56a45
  • panelTitle.activeForeground#d56a45
  • panelTitle.inactiveForeground#e0d5d0
  • scrollbar.shadow#00000044
  • scrollbarSlider.activeBackground#d56a4588
  • scrollbarSlider.background#5a4c4454
  • scrollbarSlider.hoverBackground#5a4c4488
  • sideBar.background#241712
  • sideBar.foreground#e0d5d0
  • sideBarSectionHeader.background#2a1c14
  • sideBarSectionHeader.foreground#d56a45
  • sideBarTitle.foreground#d56a45
  • statusBar.background#8ab4a5
  • statusBar.debuggingBackground#d56a45
  • statusBar.foreground#1e0f0a
  • statusBar.noFolderBackground#2a1c14
  • statusBarItem.hoverBackground#a07d5e
  • tab.activeBackground#3b251d
  • tab.activeBorder#d56a45
  • tab.activeForeground#ffffff
  • tab.border#1e0f0a
  • tab.inactiveBackground#241712
  • tab.inactiveForeground#e0d5d0
  • terminal.ansiBlue#6a8fb5
  • terminal.ansiBrightBlue#8ab4ee
  • terminal.ansiBrightCyan#8aeec5
  • terminal.ansiBrightGreen#c5e68a
  • terminal.ansiBrightMagenta#e68ab4
  • terminal.ansiBrightRed#e68a6a
  • terminal.ansiBrightYellow#e6c58a
  • terminal.ansiCyan#6ab5a0
  • terminal.ansiGreen#a5c56a
  • terminal.ansiMagenta#c56a8f
  • terminal.ansiRed#c56a45
  • terminal.ansiYellow#c5a76d
  • terminal.background#1e0f0a
  • terminal.foreground#f5e6e0
  • titleBar.activeBackground#2a1c14
  • titleBar.activeForeground#f5e6e0
  • titleBar.inactiveBackground#1e0f0a
  • titleBar.inactiveForeground#e0d5d0

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#5a4c44italic
string, string.quoted, string.template#c5a76d
keyword, storage.type, storage.modifier#d56a45bold
keyword.operator, punctuation.accessor#a5c56a
variable, variable.other#e0d5d0
variable.parameter#a5c56aitalic
entity.name.function, support.function#8ab4a5
meta.function-call#c5a76d
entity.name.class, entity.name.type.class, support.class#e0c5a5bold
entity.name.type, support.type#e0c5a5
entity.name.type.interface#6ab5a0italic
constant.numeric#c56a45
constant, constant.language, constant.character#c5a76d
constant.language.boolean#c56a45bold
variable.other.property, support.variable.property#d56a45
meta.object-literal.key#8ab4a5
entity.name.tag, punctuation.definition.tag#d56a45
entity.other.attribute-name#e0c5a5italic
punctuation, meta.brace#e0d5d0
string.regexp#c56a45
constant.character.escape#6ab5a0
meta.decorator, punctuation.decorator#a5c56a
invalid, invalid.illegal#e05050strikethrough
markup.heading, entity.name.section#d56a45bold
markup.bold#e0c5a5bold
markup.italic#c5a76ditalic
markup.underline.link#6ab5a0
markup.inline.raw, markup.fenced_code#a5c56a
support.type.property-name.json#d56a45
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#e0c5a5
support.type.property-name.css#8ab4a5
support.constant.property-value.css#c5a76d
themesmith by CyberBoost - VS Code Theme