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#5c6a30
  • activityBar.background#202020
  • activityBar.foreground#c2b280
  • activityBarBadge.background#5c754e
  • activityBarBadge.foreground#f0e0c0
  • badge.background#5c6a30
  • badge.foreground#f0e0c0
  • button.background#5c754e
  • button.foreground#f0e0c0
  • button.hoverBackground#739f6d
  • dropdown.background#1e1e1e
  • dropdown.border#5c6a30
  • dropdown.foreground#c2b280
  • editor.background#0f0f0f
  • editor.findMatchBackground#a05c5c
  • editor.findMatchHighlightBackground#a05c5c55
  • editor.foreground#d4c8a8
  • editor.lineHighlightBackground#2a2a2a
  • editor.lineHighlightBorder#5c6a30
  • editor.selectionBackground#5c754e80
  • editor.selectionHighlightBackground#5c754e33
  • editorBracketMatch.background#5c754e33
  • editorBracketMatch.border#5c754e66
  • editorCursor.foreground#c2b280
  • editorGroupHeader.tabsBackground#1a1a1a
  • editorIndentGuide.activeBackground#555555
  • editorIndentGuide.background#333333
  • editorLineNumber.activeForeground#c2b280
  • editorLineNumber.foreground#8b7d5b
  • editorWhitespace.foreground#555555
  • focusBorder#5c754e
  • gitDecoration.conflictingResourceForeground#a37a9e
  • gitDecoration.deletedResourceForeground#a05c5c
  • gitDecoration.modifiedResourceForeground#5c754e
  • gitDecoration.untrackedResourceForeground#5c6a30
  • input.background#1e1e1e
  • input.border#5c6a30
  • input.foreground#c2b280
  • input.placeholderForeground#8b7d5b
  • inputOption.activeBorder#5c754e
  • list.activeSelectionBackground#5c754e33
  • list.activeSelectionForeground#c2b280
  • list.focusBackground#5c754e33
  • list.highlightForeground#a05c5c
  • list.hoverBackground#2a2a2a
  • minimap.background#0f0f0f
  • minimapSlider.activeBackground#777777
  • minimapSlider.background#333333
  • minimapSlider.hoverBackground#555555
  • panel.background#151515
  • panel.border#2d2d2d
  • panelTitle.activeBorder#5c6a30
  • panelTitle.activeForeground#c2b280
  • panelTitle.inactiveForeground#8b7d5b
  • scrollbar.shadow#000000
  • scrollbarSlider.activeBackground#777777
  • scrollbarSlider.background#333333
  • scrollbarSlider.hoverBackground#555555
  • sideBar.background#191919
  • sideBar.foreground#c2b280
  • sideBarSectionHeader.background#1c1c1c
  • sideBarSectionHeader.foreground#c2b280
  • sideBarTitle.foreground#c2b280
  • statusBar.background#2c2c2c
  • statusBar.debuggingBackground#5c3a2b
  • statusBar.foreground#c2b280
  • statusBar.noFolderBackground#2c2c2c
  • statusBarItem.hoverBackground#3a3a3a
  • tab.activeBackground#1e1e1e
  • tab.activeBorder#5c6a30
  • tab.activeForeground#c2b280
  • tab.border#2d2d2d
  • tab.inactiveBackground#151515
  • tab.inactiveForeground#8b7d5b
  • terminal.ansiBlue#5c6a30
  • terminal.ansiBrightBlue#73874f
  • terminal.ansiBrightCyan#85a8a9
  • terminal.ansiBrightGreen#739f6d
  • terminal.ansiBrightMagenta#a37a9e
  • terminal.ansiBrightRed#c47373
  • terminal.ansiBrightYellow#cbb96d
  • terminal.ansiCyan#6c8a8b
  • terminal.ansiGreen#5c754e
  • terminal.ansiMagenta#8b5c7a
  • terminal.ansiRed#a05c5c
  • terminal.ansiYellow#b5a35c
  • terminal.background#0f0f0f
  • terminal.foreground#c2b280
  • titleBar.activeBackground#242424
  • titleBar.activeForeground#c2b280
  • titleBar.inactiveBackground#1a1a1a
  • titleBar.inactiveForeground#8b7d5b

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#6a6a6aitalic
string, string.quoted, string.template#c2b280
keyword, storage.type, storage.modifier#5c6a30bold
keyword.operator, punctuation.accessor#a05c5c
variable, variable.other#d4c8a8
variable.parameter#8b7d5bitalic
entity.name.function, support.function#5c754e
meta.function-call#739f6d
entity.name.class, entity.name.type.class, support.class#5c6a30bold
entity.name.type, support.type#6c8a8b
entity.name.type.interface#8b5c7aitalic
constant.numeric#a05c5c
constant, constant.language, constant.character#a05c5c
constant.language.boolean#a05c5cbold
variable.other.property, support.variable.property#d4c8a8
meta.object-literal.key#c2b280
entity.name.tag, punctuation.definition.tag#5c754e
entity.other.attribute-name#8b7d5bitalic
punctuation, meta.brace#8b7d5b
string.regexp#a05c5c
constant.character.escape#a05c5c
meta.decorator, punctuation.decorator#8b5c7a
invalid, invalid.illegal#ff6f6fstrikethrough
markup.heading, entity.name.section#5c6a30bold
markup.bold#5c6a30bold
markup.italic#c2b280italic
markup.underline.link#5c754e
markup.inline.raw, markup.fenced_code#6c8a8b
support.type.property-name.json#5c6a30
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#5c754e
support.type.property-name.css#5c6a30
support.constant.property-value.css#a05c5c
themesmith by CyberBoost - VS Code Theme