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#c94d7a
  • activityBar.background#301c2a
  • activityBar.foreground#c94d7a
  • activityBarBadge.background#a8426e
  • activityBarBadge.foreground#ffffff
  • badge.background#c94d7a
  • badge.foreground#ffffff
  • button.background#6a4c5a
  • button.foreground#ffffff
  • button.hoverBackground#8b3355
  • dropdown.background#261527
  • dropdown.border#5a394b
  • dropdown.foreground#f5e9f0
  • editor.background#1e0d1f
  • editor.findMatchBackground#c94d7a44
  • editor.findMatchHighlightBackground#c94d7a22
  • editor.foreground#f5e9f0
  • editor.lineHighlightBackground#c94d7a20
  • editor.lineHighlightBorder#c94d7a40
  • editor.selectionBackground#c94d7a40
  • editor.selectionHighlightBackground#c94d7a25
  • editorBracketMatch.background#c94d7a33
  • editorBracketMatch.border#c94d7a
  • editorCursor.foreground#c94d7a
  • editorGroupHeader.tabsBackground#1e0d1f
  • editorIndentGuide.activeBackground#5a394b88
  • editorIndentGuide.background#5a394b44
  • editorLineNumber.activeForeground#c94d7a
  • editorLineNumber.foreground#7a606f
  • editorWhitespace.foreground#5a394b
  • focusBorder#c94d7a
  • gitDecoration.conflictingResourceForeground#bbaa66
  • gitDecoration.deletedResourceForeground#bb5566
  • gitDecoration.modifiedResourceForeground#c94d7a
  • gitDecoration.untrackedResourceForeground#88b86a
  • input.background#261527
  • input.border#5a394b
  • input.foreground#f5e9f0
  • input.placeholderForeground#7a606f
  • inputOption.activeBorder#c94d7a
  • list.activeSelectionBackground#6a4c5a
  • list.activeSelectionForeground#ffffff
  • list.focusBackground#6a4c5a
  • list.highlightForeground#c94d7a
  • list.hoverBackground#c94d7a44
  • minimap.background#1e0d1f
  • minimapSlider.activeBackground#c94d7a66
  • minimapSlider.background#c94d7a22
  • minimapSlider.hoverBackground#c94d7a44
  • panel.background#1e0d1f
  • panel.border#6a4c5a
  • panelTitle.activeBorder#c94d7a
  • panelTitle.activeForeground#c94d7a
  • panelTitle.inactiveForeground#f5e9f0
  • scrollbar.shadow#00000044
  • scrollbarSlider.activeBackground#c94d7a88
  • scrollbarSlider.background#7a606f44
  • scrollbarSlider.hoverBackground#7a606f88
  • sideBar.background#261527
  • sideBar.foreground#f5e9f0
  • sideBarSectionHeader.background#301c2a
  • sideBarSectionHeader.foreground#c94d7a
  • sideBarTitle.foreground#c94d7a
  • statusBar.background#6a4c5a
  • statusBar.debuggingBackground#c94d7a
  • statusBar.foreground#ffffff
  • statusBar.noFolderBackground#301c2a
  • statusBarItem.hoverBackground#8b3355
  • tab.activeBackground#301c2a
  • tab.activeBorder#c94d7a
  • tab.activeForeground#f5e9f0
  • tab.border#1e0d1f
  • tab.inactiveBackground#261527
  • tab.inactiveForeground#f5e9f0
  • terminal.ansiBlue#6677bb
  • terminal.ansiBrightBlue#88aaee
  • terminal.ansiBrightCyan#88d8c8
  • terminal.ansiBrightGreen#aac888
  • terminal.ansiBrightMagenta#ee88bb
  • terminal.ansiBrightRed#ee7788
  • terminal.ansiBrightYellow#eecc88
  • terminal.ansiCyan#66aab8
  • terminal.ansiGreen#88b86a
  • terminal.ansiMagenta#bb6699
  • terminal.ansiRed#bb5566
  • terminal.ansiYellow#bbaa66
  • terminal.background#1e0d1f
  • terminal.foreground#f5e9f0
  • titleBar.activeBackground#301c2a
  • titleBar.activeForeground#f5e9f0
  • titleBar.inactiveBackground#1e0d1f
  • titleBar.inactiveForeground#f5e9f0

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#7a606fitalic
string, string.quoted, string.template#e06f8b
keyword, storage.type, storage.modifier#c94d7abold
keyword.operator, punctuation.accessor#d9829a
variable, variable.other#f5e9f0
variable.parameter#bbaa66italic
entity.name.function, support.function#c87a9d
meta.function-call#f5e9f0
entity.name.class, entity.name.type.class, support.class#eebb88bold
entity.name.type, support.type#eebb88
entity.name.type.interface#66aab8italic
constant.numeric#cc6688
constant, constant.language, constant.character#ddaa88
constant.language.boolean#cc6688bold
variable.other.property, support.variable.property#e8c8d0
meta.object-literal.key#c87090
entity.name.tag, punctuation.definition.tag#c94d7a
entity.other.attribute-name#eebb88italic
punctuation, meta.brace#d8a0b0
string.regexp#cc6688
constant.character.escape#66aab8
meta.decorator, punctuation.decorator#bbaa66
invalid, invalid.illegal#ff4466strikethrough
markup.heading, entity.name.section#c94d7abold
markup.bold#eebb88bold
markup.italic#88a866italic
markup.underline.link#66aab8
markup.inline.raw, markup.fenced_code#aac888
support.type.property-name.json#c94d7a
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#eebb88
support.type.property-name.css#c87090
support.constant.property-value.css#88a866