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#B2184C
  • activityBar.background#15090C
  • activityBar.foreground#B2184C
  • activityBarBadge.background#B2184C
  • activityBarBadge.foreground#15090C
  • badge.background#B2184C
  • badge.foreground#15090C
  • button.background#260D15
  • button.foreground#EAE2E5
  • button.hoverBackground#371726
  • dropdown.background#190A0E
  • dropdown.border#371726
  • dropdown.foreground#EAE2E5
  • editor.background#1E0B13
  • editor.findMatchBackground#B2184C40
  • editor.findMatchHighlightBackground#B2184C20
  • editor.foreground#EAE2E5
  • editor.lineHighlightBackground#260D1580
  • editor.lineHighlightBorder#371726
  • editor.selectionBackground#B2184C80
  • editor.selectionHighlightBackground#B2184C40
  • editorBracketMatch.background#B2184C30
  • editorBracketMatch.border#B2184C
  • editorCursor.foreground#EAE2E5
  • editorGroupHeader.tabsBackground#1E0B13
  • editorIndentGuide.activeBackground#37172680
  • editorIndentGuide.background#37172640
  • editorLineNumber.activeForeground#B2184C
  • editorLineNumber.foreground#7A5B70
  • editorWhitespace.foreground#371726
  • focusBorder#B2184C
  • gitDecoration.conflictingResourceForeground#CFA069
  • gitDecoration.deletedResourceForeground#D75471
  • gitDecoration.modifiedResourceForeground#B2184C
  • gitDecoration.untrackedResourceForeground#7AA67B
  • input.background#190A0E
  • input.border#371726
  • input.foreground#EAE2E5
  • input.placeholderForeground#7A5B70
  • inputOption.activeBorder#B2184C
  • list.activeSelectionBackground#260D15
  • list.activeSelectionForeground#FFFFFF
  • list.focusBackground#260D15
  • list.highlightForeground#B2184C
  • list.hoverBackground#260D1566
  • minimap.background#1E0B13
  • minimapSlider.activeBackground#B2184660
  • minimapSlider.background#B2184620
  • minimapSlider.hoverBackground#B2184640
  • panel.background#1E0B13
  • panel.border#371726
  • panelTitle.activeBorder#B2184C
  • panelTitle.activeForeground#B2184C
  • panelTitle.inactiveForeground#A48A9A
  • scrollbar.shadow#00000040
  • scrollbarSlider.activeBackground#B2184680
  • scrollbarSlider.background#37172640
  • scrollbarSlider.hoverBackground#37172680
  • sideBar.background#190A0E
  • sideBar.foreground#E0C9D0
  • sideBarSectionHeader.background#15090C
  • sideBarSectionHeader.foreground#B2184C
  • sideBarTitle.foreground#B2184C
  • statusBar.background#260D15
  • statusBar.debuggingBackground#B2184C
  • statusBar.foreground#EAE2E5
  • statusBar.noFolderBackground#15090C
  • statusBarItem.hoverBackground#371726
  • tab.activeBackground#260D15
  • tab.activeBorder#B2184C
  • tab.activeForeground#FFFFFF
  • tab.border#15090C
  • tab.inactiveBackground#190A0E
  • tab.inactiveForeground#A48A9A
  • terminal.ansiBlue#5A7FA3
  • terminal.ansiBrightBlue#769ECF
  • terminal.ansiBrightCyan#70C3C5
  • terminal.ansiBrightGreen#94C89E
  • terminal.ansiBrightMagenta#D594B5
  • terminal.ansiBrightRed#D75471
  • terminal.ansiBrightYellow#E5B686
  • terminal.ansiCyan#5FA7A9
  • terminal.ansiGreen#7AA67B
  • terminal.ansiMagenta#C27AA0
  • terminal.ansiRed#B2184C
  • terminal.ansiYellow#CFA069
  • terminal.background#1E0B13
  • terminal.foreground#EAE2E5
  • titleBar.activeBackground#15090C
  • titleBar.activeForeground#EAE2E5
  • titleBar.inactiveBackground#1E0B13
  • titleBar.inactiveForeground#A48A9A

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#7A5B70italic
string, string.quoted, string.template#E96F87—
keyword, storage.type, storage.modifier#C27AA0bold
keyword.operator, punctuation.accessor#E0C9D0—
variable, variable.other#EAE2E5—
variable.parameter#CFA069italic
entity.name.function, support.function#7AA67B—
meta.function-call#94C89E—
entity.name.class, entity.name.type.class, support.class#B2184Cbold
entity.name.type, support.type#C27AA0—
entity.name.type.interface#5FA7A9italic
constant.numeric#CFA069—
constant, constant.language, constant.character#D75471—
constant.language.boolean#D75471bold
variable.other.property, support.variable.property#E0C9D0—
meta.object-literal.key#C27AA0—
entity.name.tag, punctuation.definition.tag#B2184C—
entity.other.attribute-name#CFA069italic
punctuation, meta.brace#E0C9D0—
string.regexp#CFA069—
constant.character.escape#C27AA0—
meta.decorator, punctuation.decorator#CFA069—
invalid, invalid.illegal#D75471strikethrough
markup.heading, entity.name.section#B2184Cbold
markup.bold#D75471bold
markup.italic#C27AA0italic
markup.underline.link#5FA7A9—
markup.inline.raw, markup.fenced_code#7AA67B—
support.type.property-name.json#C27AA0—
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#CFA069—
support.type.property-name.css#5FA7A9—
support.constant.property-value.css#B2184C—