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#D97742
  • activityBar.background#111116
  • activityBar.foreground#C5A072
  • activityBarBadge.background#D97742
  • activityBarBadge.foreground#0A0A0F
  • badge.background#D97742
  • badge.foreground#0A0A0F
  • button.background#15151B
  • button.foreground#E5E5E9
  • button.hoverBackground#26262D
  • dropdown.background#111116
  • dropdown.border#15151B
  • dropdown.foreground#E5E5E9
  • editor.background#0A0A0F
  • editor.findMatchBackground#D9774244
  • editor.findMatchHighlightBackground#D9774422
  • editor.foreground#E5E5E9
  • editor.lineHighlightBackground#15151B60
  • editor.lineHighlightBorder#15151B80
  • editor.selectionBackground#33445566
  • editor.selectionHighlightBackground#33445533
  • editorBracketMatch.background#D9773322
  • editorBracketMatch.border#D97742
  • editorCursor.foreground#D97742
  • editorGroupHeader.tabsBackground#0A0A0F
  • editorIndentGuide.activeBackground#26262D88
  • editorIndentGuide.background#26262D44
  • editorLineNumber.activeForeground#C5A072
  • editorLineNumber.foreground#3A3A40
  • editorWhitespace.foreground#26262D
  • focusBorder#D97742
  • gitDecoration.conflictingResourceForeground#D97742
  • gitDecoration.deletedResourceForeground#D97742
  • gitDecoration.modifiedResourceForeground#C5A072
  • gitDecoration.untrackedResourceForeground#7CBA7F
  • input.background#111116
  • input.border#15151B
  • input.foreground#E5E5E9
  • input.placeholderForeground#3A3A40
  • inputOption.activeBorder#D97742
  • list.activeSelectionBackground#15151B
  • list.activeSelectionForeground#E5E5E9
  • list.focusBackground#15151B
  • list.highlightForeground#D97742
  • list.hoverBackground#15151B66
  • minimap.background#0A0A0F
  • minimapSlider.activeBackground#D9776666
  • minimapSlider.background#D9772222
  • minimapSlider.hoverBackground#D9774444
  • panel.background#0A0A0F
  • panel.border#15151B
  • panelTitle.activeBorder#D97742
  • panelTitle.activeForeground#D97742
  • panelTitle.inactiveForeground#B0B0B4
  • scrollbar.shadow#00000044
  • scrollbarSlider.activeBackground#D9774488
  • scrollbarSlider.background#3A3A4044
  • scrollbarSlider.hoverBackground#3A3A4088
  • sideBar.background#111116
  • sideBar.foreground#B0B0B4
  • sideBarSectionHeader.background#111116
  • sideBarSectionHeader.foreground#C5A072
  • sideBarTitle.foreground#C5A072
  • statusBar.background#15151B
  • statusBar.debuggingBackground#D97742
  • statusBar.foreground#E5E5E9
  • statusBar.noFolderBackground#111116
  • statusBarItem.hoverBackground#26262D
  • tab.activeBackground#15151B
  • tab.activeBorder#D97742
  • tab.activeForeground#E5E5E9
  • tab.border#0A0A0F
  • tab.inactiveBackground#111116
  • tab.inactiveForeground#B0B0B4
  • terminal.ansiBlue#6B8EAE
  • terminal.ansiBrightBlue#B0B0B4
  • terminal.ansiBrightCyan#51B2C8
  • terminal.ansiBrightGreen#7CBA7F
  • terminal.ansiBrightMagenta#D97742
  • terminal.ansiBrightRed#D97742
  • terminal.ansiBrightYellow#C5A072
  • terminal.ansiCyan#51B2C8
  • terminal.ansiGreen#7CBA7F
  • terminal.ansiMagenta#D97742
  • terminal.ansiRed#D97742
  • terminal.ansiYellow#C5A072
  • terminal.background#0A0A0F
  • terminal.foreground#E5E5E9
  • titleBar.activeBackground#111116
  • titleBar.activeForeground#E5E5E9
  • titleBar.inactiveBackground#0A0A0F
  • titleBar.inactiveForeground#B0B0B4

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#5A5A68italic
string, string.quoted, string.template#51B2C8
keyword, storage.type, storage.modifier#D97742bold
keyword.operator, punctuation.accessor#E5E5E9
variable, variable.other#E5E5E9
variable.parameter#C5A072italic
entity.name.function, support.function#7CBA7F
meta.function-call#B0B0B4
entity.name.class, entity.name.type.class, support.class#D97742bold
entity.name.type, support.type#C5A072
entity.name.type.interface#51B2C8italic
constant.numeric#D97742
constant, constant.language, constant.character#C5A072
constant.language.boolean#D97742bold
variable.other.property, support.variable.property#E5E5E9
meta.object-literal.key#C5A072
entity.name.tag, punctuation.definition.tag#D97742
entity.other.attribute-name#51B2C8italic
punctuation, meta.brace#B0B0B4
string.regexp#D97742
constant.character.escape#51B2C8
meta.decorator, punctuation.decorator#C5A072
invalid, invalid.illegal#D97742strikethrough
markup.heading, entity.name.section#D97742bold
markup.bold#C5A072bold
markup.italic#51B2C8italic
markup.underline.link#51B2C8
markup.inline.raw, markup.fenced_code#51B2C8
support.type.property-name.json#C5A072
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#D97742
support.type.property-name.css#C5A072
support.constant.property-value.css#51B2C8
themesmith by CyberBoost - VS Code Theme