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