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.background#0A0209
  • activityBar.foreground#D91A4F
  • activityBar.inactiveForeground#9B7FA0
  • activityBarBadge.background#D91A4F
  • activityBarBadge.foreground#F5E6D3
  • badge.background#E6547A
  • badge.foreground#F5E6D3
  • button.background#D91A4F
  • button.foreground#120414
  • button.hoverBackground#E6547A
  • button.secondaryBackground#2A0F20
  • button.secondaryForeground#F5E6D3
  • button.secondaryHoverBackground#3D1A31
  • dropdown.background#1A0C15
  • dropdown.border#2A0F20
  • dropdown.foreground#F5E6D3
  • editor.background#120414
  • editor.foreground#F5E6D3
  • editor.hoverHighlightBackground#A5003560
  • editor.lineHighlightBackground#A5003510
  • editor.selectionBackground#A5003540
  • editor.selectionHighlightBackground#D91A4F40
  • editor.wordHighlightBackground#6A0DAD25
  • editor.wordHighlightStrongBackground#6A0DAD50
  • editorBracketMatch.background#A5003530
  • editorBracketMatch.border#D91A4F
  • editorCursor.foreground#D91A4F
  • editorError.foreground#D91A4F
  • editorGroup.border#2A0F20
  • editorGroupHeader.noTabsBackground#120414
  • editorGroupHeader.tabsBackground#120414
  • editorInfo.foreground#B8860B
  • editorWarning.foreground#FFB347
  • editorWhitespace.foreground#6A0DAD20
  • focusBorder#D91A4F
  • input.background#1A0C15
  • input.border#2A0F20
  • input.foreground#F5E6D3
  • input.placeholderForeground#9B7FA0
  • list.activeSelectionBackground#A5003580
  • list.activeSelectionForeground#F5E6D3
  • list.dropBackground#D91A4F60
  • list.hoverBackground#D91A4F30
  • list.hoverForeground#E6547A
  • list.inactiveSelectionBackground#A5003540
  • menubar.selectionBackground#D91A4F40
  • menubar.selectionForeground#FFFFFF
  • progressBar.background#D91A4F
  • scrollbar.shadow#0000001A
  • scrollbarSlider.activeBackground#9B7FA066
  • scrollbarSlider.background#9B7FA033
  • scrollbarSlider.hoverBackground#9B7FA044
  • sideBar.background#140810
  • sideBar.foreground#F5E6D3
  • sideBarSectionHeader.background#2A0F20
  • sideBarSectionHeader.foreground#E6547A
  • sideBarTitle.foreground#D91A4F
  • statusBar.background#0A0209
  • statusBar.debuggingBackground#D91A4F
  • statusBar.debuggingForeground#F5E6D3
  • statusBar.foreground#D91A4F
  • statusBarItem.hoverBackground#A50035
  • statusBarItem.remoteBackground#D91A4F
  • statusBarItem.remoteForeground#F5E6D3
  • tab.activeBackground#140810
  • tab.activeBorder#D91A4F
  • tab.activeBorderTop#E6547A
  • tab.activeForeground#F5E6D3
  • tab.activeModifiedBorder#D91A4F
  • tab.border#2A0F20
  • tab.hoverBackground#2A0F20
  • tab.hoverBorder#D91A4F
  • tab.inactiveBackground#0A0209
  • tab.inactiveForeground#9B7FA0
  • tab.unfocusedActiveModifiedBorder#9B7FA0
  • tab.unfocusedHoverBorder#9B7FA0
  • terminal.ansiBlack#120414
  • terminal.ansiBlue#E6547A
  • terminal.ansiCyan#6A0DAD
  • terminal.ansiGreen#6A0DAD
  • terminal.ansiMagenta#B8860B
  • terminal.ansiRed#D91A4F
  • terminal.ansiWhite#F5E6D3
  • terminal.ansiYellow#FFB347
  • terminal.hoverHighlightBackground#D91A4F30
  • textLink.activeForeground#E6547A
  • titleBar.activeBackground#120414
  • titleBar.activeForeground#F5E6D3
  • titleBar.inactiveBackground#120414
  • titleBar.inactiveForeground#9B7FA0
  • toolbar.activeBackground#D91A4F80
  • toolbar.hoverBackground#A5003560

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#6A5A70italic
comment.block.documentation#D370E5italic
string#E6547A
string.template#E6547A
string.regexp#FFB347
constant.character.escape#D91A4Fbold
constant.numeric#B8860B
constant.language.boolean#D91A4Fbold
keyword#D91A4Fbold
keyword.control#D91A4Fbold
keyword.other#6A0DADbold
storage#D91A4Fbold
storage.type#D91A4Fbold
storage.modifier#D91A4Fbold
keyword.operator#6A0DAD
keyword.operator.arithmetic#6A0DAD
entity.name.function#FFB347
entity.name.function.constructor#FFB347bold
meta.function-call#FFB347
variable#F5E6D3
variable.other#F5E6D3
variable.parameter#E6547Aitalic
variable.language#D91A4Fitalic
entity.name.class#E6547A
entity.name.type#E6547A
entity.name.type.interface#E6547A
entity.name.type.enum#E6547A
constant.language#D91A4Fbold
constant.other#B8860B
support.constant#B8860B
punctuation#6A5A70
punctuation.bracket#6A5A70
support.function#FFB347
support.function.builtin#FFB347italic
support.type#E6547A
support.other.variable#F5E6D3
meta.decorator#D370E5
markup.bold#D91A4Fbold
markup.italic#E6547Aitalic
markup.heading#D91A4Fbold
markup.underline.link#6A0DAD
markup.inline.raw#FFB347
markup.quote#6A5A70italic
entity.name.tag.html#E6547A
entity.other.attribute-name.html#FFB347
string.quoted.double.html#E6547A
entity.name.tag.css#E6547A
entity.other.attribute-name.class#FFB347
support.type.property-name.css#FFB347
constant.numeric.color.hex.css#E6547A
support.type.property-name.json#FFB347
invalid#F5E6D3bold underline
invalid.deprecated#F5E6D3strikethrough
Scarlet Witch Theme by BoBenc - VS Code Theme