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#A66BB8
  • activityBar.foreground#FFFFFF
  • activityBarBadge.background#FF6F6F
  • activityBarBadge.foreground#FFFFFF
  • badge.background#FF6F6F
  • badge.foreground#FFFFFF
  • button.background#A66BB8
  • button.foreground#FFFFFF
  • button.hoverBackground#B77BC9
  • dropdown.background#FFFFFF
  • dropdown.foreground#2A1E3A
  • editor.background#F8F5FF
  • editor.findMatchBackground#FF6F6F40
  • editor.findMatchHighlightBackground#A66BB840
  • editor.foreground#2A1E3A
  • editor.lineHighlightBackground#E8E1F5
  • editor.lineHighlightBorder#2A1E3A1a
  • editor.rangeHighlightBackground#2A1E3A0d
  • editor.selectionBackground#A66BB855
  • editorBracketMatch.background#A66BB840
  • editorBracketMatch.border#A66BB8
  • editorCursor.foreground#322544
  • editorGroup.border#E8E1F5
  • editorGroup.dropBackground#A66BB840
  • editorGroup.focusedEmptyBorder#A66BB8
  • editorGroupHeader.noTabsBackground#F1E8FF
  • editorGroupHeader.tabsBackground#F1E8FF
  • editorGroupHeader.tabsBorder#E8E1F5
  • editorHoverWidget.background#F1E8FF
  • editorIndentGuide.activeBackground1#A66BB8
  • editorIndentGuide.background1#D1B8F3
  • editorLineNumber.activeForeground#322544
  • editorLineNumber.foreground#A66BB8
  • editorMarkerNavigation.background#F1E8FF
  • editorOverviewRuler.background#F1E8FF
  • editorStickyScroll.shadow#F1E8FF
  • editorStickyScrollHover.background#E8E1F5
  • editorWidget.background#F1E8FF
  • focusBorder#A66BB8
  • input.background#FFFFFF
  • input.foreground#2A1E3A
  • input.placeholderForeground#6A6D77
  • inputOption.activeBorder#A66BB8
  • list.activeSelectionBackground#A66BB840
  • list.activeSelectionForeground#2A1E3A
  • list.dropBackground#A66BB840
  • list.focusBackground#A66BB840
  • list.focusForeground#2A1E3A
  • list.highlightForeground#A66BB8
  • list.hoverBackground#E8E1F5
  • list.inactiveSelectionBackground#E8E1F5
  • minimap.background#f1e8ff
  • panel.background#F8F5FF
  • panel.border#E8E1F5
  • panelTitle.activeBorder#2A1E3A80
  • panelTitle.activeForeground#2A1E3A
  • panelTitle.inactiveForeground#6A6D77
  • peekView.border#A66BB8
  • peekViewEditor.background#F8F5FF
  • peekViewResult.background#F1E8FF
  • peekViewTitle.background#F1E8FF
  • pickerGroup.border#2A1E3A1a
  • quickInput.background#F1E8FF
  • quickInput.foreground#2A1E3A
  • scrollbarSlider.activeBackground#A66BB8AA
  • scrollbarSlider.background#A66BB860
  • scrollbarSlider.hoverBackground#A66BB880
  • selection.background#FF6F6F80
  • sideBar.background#F1E8FF
  • sideBar.foreground#2A1E3A
  • sideBarSectionHeader.background#F1E8FF
  • sideBarSectionHeader.border#FF6F6F
  • sideBarSectionHeader.foreground#2A1E3A
  • sideBarTitle.background#F1E8FF
  • sideBarTitle.foreground#2A1E3A
  • statusBar.background#A66BB8
  • statusBar.foreground#FFFFFF
  • statusBar.noFolderBackground#F8F5FF
  • statusBarItem.activeBackground#A66BB880
  • statusBarItem.hoverBackground#B77BC9
  • statusBarItem.remoteBackground#A66BB8
  • statusBarItem.remoteForeground#FFFFFF
  • tab.activeBackground#F8F5FF
  • tab.activeBorderTop#FF6F6F
  • tab.activeForeground#2A1E3A
  • tab.activeModifiedBorder#A66BB8
  • tab.border#00000022
  • tab.inactiveBackground#F1E8FF
  • tab.inactiveForeground#6A6D77
  • tab.inactiveModifiedBorder#C8B6D9
  • tab.unfocusedActiveModifiedBorder#B77BC9
  • tab.unfocusedInactiveModifiedBorder#D1B8F3
  • terminal.ansiBlack#2A1E3A
  • terminal.ansiBlue#3B82F6
  • terminal.ansiBrightBlack#6A6D77
  • terminal.ansiBrightBlue#60A5FA
  • terminal.ansiBrightCyan#67E8F9
  • terminal.ansiBrightGreen#34D399
  • terminal.ansiBrightMagenta#C084FC
  • terminal.ansiBrightRed#FCA5A5
  • terminal.ansiBrightWhite#FFFFFF
  • terminal.ansiBrightYellow#FCD34D
  • terminal.ansiCyan#06B6D4
  • terminal.ansiGreen#059669
  • terminal.ansiMagenta#A66BB8
  • terminal.ansiRed#FF6F6F
  • terminal.ansiWhite#E8E1F5
  • terminal.ansiYellow#D97706
  • terminal.background#F8F5FF
  • terminal.foreground#2A1E3A
  • titleBar.activeBackground#A66BB8
  • titleBar.activeForeground#FFFFFF
  • titleBar.inactiveBackground#C8B6D9
  • titleBar.inactiveForeground#F8F5FF

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#9B7FA8
string#22A0A1
constant.numeric#D14045
keyword#A66BB8
variable#2B76B9
variable.parameter#2B76B9
storage#A66BB8
entity.name.function#805592
punctuation.definition.string.begin, punctuation.definition.string.end#805592
punctuation.terminator#9B7FA8
property#A66BB8
entity.name.tag#9B7FA8
support.type#322544
support.class#805592
constant.character.escape, text.html constant.character.entity.named, punctuation.definition.entity.html#D97706
constant.language.boolean#805592
variable.instance, variable.other.instance, variable.readwrite.instance, variable.other.readwrite.instance, variable.other.property, meta.definition.variable, support.constant, support.variable#805592
variable, support.class, entity.name.function#322544
entity.name.function, support.function#22A0A1
support.module, support.node#805592italic
entity.name.type, entity.other.inherited-class#322544
entity.name.type.class#805592underline
variable.object.property, meta.field.declaration entity.name.function#22A0A1
meta.definition.method entity.name.function#805592
meta.function entity.name.function#22A0A1
template.expression.begin, template.expression.end, punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end#805592
meta.embedded, source.groovy.embedded, meta.template.expression#322544
entity.name.tag.yaml#805592
meta.object-literal.key, meta.object-literal.key string, support.type.property-name.json#805592
constant.language.json#805592
entity.other.attribute-name.class#805592
entity.other.attribute-name.id#A66BB8
source.css entity.name.tag#2B76B9
meta.tag, punctuation.definition.tag#322544
entity.name.tag#805592
entity.other.attribute-name#2B76B9
markup.heading#805592
text.html.markdown meta.link.inline, meta.link.reference#805592
text.html.markdown beginning.punctuation.definition.list#805592
markup.italic#805592italic
markup.bold#805592bold
markup.bold markup.italic, markup.italic markup.bold#805592italic bold
markup.fenced_code.block.markdown punctuation.definition.markdown#A66BB8
markup.inline.raw.string.markdown#A66BB8
keyword.other.definition.ini#805592
entity.name.section.group-title.ini#805592
source.cs meta.class.identifier storage.type#22A0A1underline
source.cs meta.method.identifier entity.name.function#22A0A1
source.cs meta.method-call meta.method, source.cs entity.name.function#22A0A1
source.cs storage.type#22A0A1
source.cs meta.method.return-type#22A0A1
source.cs entity.name.type.namespace#2A1E3A