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
themesmith by CyberBoost - VS Code Theme