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#b45a3c
  • activityBar.background#141414
  • activityBar.foreground#c0a886
  • activityBarBadge.background#b45a3c
  • activityBarBadge.foreground#ffffff
  • badge.background#6b7a5f
  • badge.foreground#ffffff
  • button.background#b45a3c
  • button.foreground#ffffff
  • button.hoverBackground#c86258
  • dropdown.background#1a1a1a
  • dropdown.border#3c3c3c
  • dropdown.foreground#d4c5a9
  • editor.background#0e0e0e
  • editor.findMatchBackground#b45a3c
  • editor.findMatchHighlightBackground#6b7a5f
  • editor.foreground#d4c5a9
  • editor.lineHighlightBackground#2b2b2b
  • editor.lineHighlightBorder#3c3c3c
  • editor.selectionBackground#984b1c
  • editor.selectionHighlightBackground#3c3c3c
  • editorBracketMatch.background#3c3c3c
  • editorBracketMatch.border#6b7a5f
  • editorCursor.foreground#c0a886
  • editorGroupHeader.tabsBackground#141414
  • editorIndentGuide.activeBackground#6b7a5f
  • editorIndentGuide.background#2b2b2b
  • editorLineNumber.activeForeground#c0a886
  • editorLineNumber.foreground#6e6e6e
  • editorWhitespace.foreground#3c3c3c
  • focusBorder#b45a3c
  • gitDecoration.conflictingResourceForeground#b57ba4
  • gitDecoration.deletedResourceForeground#c86258
  • gitDecoration.modifiedResourceForeground#8ab779
  • gitDecoration.untrackedResourceForeground#5b97c4
  • input.background#1a1a1a
  • input.border#3c3c3c
  • input.foreground#d4c5a9
  • input.placeholderForeground#6e6e6e
  • inputOption.activeBorder#b45a3c
  • list.activeSelectionBackground#2b2b2b
  • list.activeSelectionForeground#d4c5a9
  • list.focusBackground#3c3c3c
  • list.highlightForeground#b45a3c
  • list.hoverBackground#2b2b2b
  • minimap.background#141414
  • minimapSlider.activeBackground#b45a3c
  • minimapSlider.background#3c3c3c
  • minimapSlider.hoverBackground#6b7a5f
  • panel.background#141414
  • panel.border#1a1a1a
  • panelTitle.activeBorder#b45a3c
  • panelTitle.activeForeground#d4c5a9
  • panelTitle.inactiveForeground#8a8a8a
  • scrollbar.shadow#0e0e0e
  • scrollbarSlider.activeBackground#b45a3c
  • scrollbarSlider.background#3c3c3c
  • scrollbarSlider.hoverBackground#6b7a5f
  • sideBar.background#141414
  • sideBar.foreground#c0a886
  • sideBarSectionHeader.background#1a1a1a
  • sideBarSectionHeader.foreground#d4c5a9
  • sideBarTitle.foreground#d4c5a9
  • statusBar.background#1a1a1a
  • statusBar.debuggingBackground#b45a3c
  • statusBar.foreground#d4c5a9
  • statusBar.noFolderBackground#1a1a1a
  • statusBarItem.hoverBackground#2b2b2b
  • tab.activeBackground#0e0e0e
  • tab.activeBorder#b45a3c
  • tab.activeForeground#d4c5a9
  • tab.border#1a1a1a
  • tab.inactiveBackground#141414
  • tab.inactiveForeground#8a8a8a
  • terminal.ansiBlue#5b97c4
  • terminal.ansiBrightBlue#78b4e6
  • terminal.ansiBrightCyan#88c9c0
  • terminal.ansiBrightGreen#a4d28c
  • terminal.ansiBrightMagenta#c192b8
  • terminal.ansiBrightRed#e07361
  • terminal.ansiBrightYellow#e5b46a
  • terminal.ansiCyan#6fb3b8
  • terminal.ansiGreen#8ab779
  • terminal.ansiMagenta#b57ba4
  • terminal.ansiRed#c86258
  • terminal.ansiYellow#d5a254
  • terminal.background#0e0e0e
  • terminal.foreground#d4c5a9
  • titleBar.activeBackground#141414
  • titleBar.activeForeground#d4c5a9
  • titleBar.inactiveBackground#1a1a1a
  • titleBar.inactiveForeground#8a8a8a

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#6e6e6eitalic
string, string.quoted, string.template#cfa66b
keyword, storage.type, storage.modifier#b45a3cbold
keyword.operator, punctuation.accessor#6b7a5f
variable, variable.other#d4c5a9
variable.parameter#d4c5a9italic
entity.name.function, support.function#5b97c4
meta.function-call#5b97c4
entity.name.class, entity.name.type.class, support.class#8ab779bold
entity.name.type, support.type#6fb3b8
entity.name.type.interface#78b4e6italic
constant.numeric#d5a254
constant, constant.language, constant.character#b57ba4
constant.language.boolean#b45a3cbold
variable.other.property, support.variable.property#6b7a5f
meta.object-literal.key#78b4e6
entity.name.tag, punctuation.definition.tag#b45a3c
entity.other.attribute-name#cfa66bitalic
punctuation, meta.brace#8a8a8a
string.regexp#8ab779
constant.character.escape#c86258
meta.decorator, punctuation.decorator#b57ba4
invalid, invalid.illegal#ff6b6bstrikethrough
markup.heading, entity.name.section#cfa66bbold
markup.bold#cfa66bbold
markup.italic#cfa66bitalic
markup.underline.link#5b97c4
markup.inline.raw, markup.fenced_code#8ab779
support.type.property-name.json#78b4e6
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#5b97c4
support.type.property-name.css#6fb3b8
support.constant.property-value.css#d5a254
themesmith by CyberBoost - VS Code Theme