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#F5E6F2
  • activityBar.foreground#D91A4F
  • activityBar.inactiveForeground#9B7FA0
  • activityBarBadge.background#D91A4F
  • activityBarBadge.foreground#FAF5FB
  • badge.background#D91A4F
  • badge.foreground#FFFFFF
  • button.background#D91A4F
  • button.foreground#FFFFFF
  • button.hoverBackground#C0153F
  • button.secondaryBackground#E6D5E5
  • button.secondaryForeground#1A0C15
  • button.secondaryHoverBackground#D6C5D5
  • dropdown.background#FFFFFF
  • dropdown.border#D6C5D5
  • dropdown.foreground#1A0C15
  • editor.background#FAF5FB
  • editor.foreground#1A0C15
  • editor.hoverHighlightBackground#D91A4F20
  • editor.lineHighlightBackground#D91A4F08
  • editor.selectionBackground#D91A4F20
  • editor.selectionHighlightBackground#D91A4F30
  • editor.wordHighlightBackground#6A0DAD15
  • editor.wordHighlightStrongBackground#6A0DAD30
  • editorBracketMatch.background#D91A4F20
  • editorBracketMatch.border#D91A4F
  • editorCursor.foreground#D91A4F
  • editorError.foreground#D91A4F
  • editorGroup.border#E6D5E5
  • editorGroupHeader.noTabsBackground#FAF5FB
  • editorGroupHeader.tabsBackground#FAF5FB
  • editorInfo.foreground#8B6914
  • editorWarning.foreground#C67C1B
  • editorWhitespace.foreground#9B7FA040
  • focusBorder#D91A4F
  • input.background#FFFFFF
  • input.border#D6C5D5
  • input.foreground#1A0C15
  • input.placeholderForeground#9B7FA0
  • list.activeSelectionBackground#D91A4F40
  • list.activeSelectionForeground#1A0C15
  • list.dropBackground#C0153F40
  • list.hoverBackground#D91A4F20
  • list.hoverForeground#A5003D
  • list.inactiveSelectionBackground#D91A4F15
  • menubar.selectionBackground#D91A4F20
  • menubar.selectionForeground#A5003D
  • progressBar.background#D91A4F
  • scrollbar.shadow#0000000A
  • scrollbarSlider.activeBackground#D6C5D560
  • scrollbarSlider.background#D6C5D530
  • scrollbarSlider.hoverBackground#D6C5D540
  • sideBar.background#F9F1F8
  • sideBar.foreground#1A0C15
  • sideBarSectionHeader.background#E6D5E5
  • sideBarSectionHeader.foreground#A5003D
  • sideBarTitle.foreground#D91A4F
  • statusBar.background#F5E6F2
  • statusBar.debuggingBackground#D91A4F
  • statusBar.debuggingForeground#FAF5FB
  • statusBar.foreground#D91A4F
  • statusBarItem.hoverBackground#D91A4F15
  • statusBarItem.remoteBackground#D91A4F
  • statusBarItem.remoteForeground#FAF5FB
  • tab.activeBackground#FAF5FB
  • tab.activeBorder#D91A4F
  • tab.activeBorderTop#C0153F
  • tab.activeForeground#1A0C15
  • tab.activeModifiedBorder#D91A4F
  • tab.border#E6D5E5
  • tab.hoverBackground#E6D5E5
  • tab.hoverBorder#D91A4F
  • tab.inactiveBackground#F0E7F0
  • tab.inactiveForeground#9B7FA0
  • tab.unfocusedActiveModifiedBorder#9B7FA0
  • tab.unfocusedHoverBorder#9B7FA080
  • terminal.ansiBlack#1A0C15
  • terminal.ansiBlue#A5003D
  • terminal.ansiCyan#6A0DAD
  • terminal.ansiGreen#6A0DAD
  • terminal.ansiMagenta#8B6914
  • terminal.ansiRed#D91A4F
  • terminal.ansiWhite#FAF5FB
  • terminal.ansiYellow#C67C1B
  • terminal.hoverHighlightBackground#D91A4F20
  • textLink.activeForeground#C0153F
  • titleBar.activeBackground#FAF5FB
  • titleBar.activeForeground#1A0C15
  • titleBar.inactiveBackground#FAF5FB
  • titleBar.inactiveForeground#9B7FA0
  • toolbar.activeBackground#D91A4F50
  • toolbar.hoverBackground#D91A4F30

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#8B7A95italic
comment.block.documentation#B8345Fitalic
string#A5003D
string.template#A5003D
string.regexp#C67C1B
constant.character.escape#D91A4Fbold
constant.numeric#8B6914
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#C67C1B
entity.name.function.constructor#C67C1Bbold
meta.function-call#C67C1B
variable#1A0C15
variable.other#1A0C15
variable.parameter#A5003Ditalic
variable.language#D91A4Fitalic
entity.name.class#A5003D
entity.name.type#A5003D
entity.name.type.interface#A5003D
entity.name.type.enum#A5003D
constant.language#D91A4Fbold
constant.other#8B6914
support.constant#8B6914
punctuation#8B7A95
punctuation.bracket#8B7A95
support.function#C67C1B
support.function.builtin#C67C1Bitalic
support.type#A5003D
support.other.variable#1A0C15
meta.decorator#B8345F
markup.bold#D91A4Fbold
markup.italic#A5003Ditalic
markup.heading#D91A4Fbold
markup.underline.link#6A0DAD
markup.inline.raw#C67C1B
markup.quote#8B7A95italic
entity.name.tag.html#A5003D
entity.other.attribute-name.html#C67C1B
string.quoted.double.html#A5003D
entity.name.tag.css#A5003D
entity.other.attribute-name.class#C67C1B
support.type.property-name.css#C67C1B
constant.numeric.color.hex.css#A5003D
support.type.property-name.json#C67C1B
invalid#D91A4Fbold underline
invalid.deprecated#D91A4Fstrikethrough
Scarlet Witch Theme by BoBenc - VS Code Theme