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#F2EFFA
  • activityBar.border#F2EFFA
  • activityBar.foreground#675F73
  • activityBar.inactiveForeground#9E97AC
  • badge.background#8D63C9
  • badge.foreground#FFFFFF
  • button.background#8D63C9
  • button.foreground#FFFFFF
  • button.hoverBackground#7D56B8
  • descriptionForeground#6E667D
  • diffEditor.insertedTextBackground#6E9B5D20
  • diffEditor.removedTextBackground#C55C7420
  • dropdown.background#F2EFFA
  • dropdown.border#F2EFFA
  • dropdown.foreground#241F2D
  • dropdown.listBackground#F2EFFA
  • editor.background#FCFAFF
  • editor.foreground#241F2D
  • editor.hover.background#FDFBFF
  • editor.hover.border#E3DDF0
  • editor.hover.foreground#241F2D
  • editor.hover.statusBarBackground#F2EFFA
  • editor.lineHighlightBackground#F8F4FD
  • editor.selectionBackground#8D63C933
  • editor.selectionHighlightBackground#6E9B5D20
  • editor.wordHighlightBackground#8D63C915
  • editor.wordHighlightStrongBackground#8D63C91F
  • editorBracketHighlight.foreground1#A83068
  • editorBracketHighlight.foreground2#2A58B8
  • editorBracketHighlight.foreground3#907210
  • editorBracketHighlight.foreground4#3A7A38
  • editorBracketHighlight.foreground5#A06840
  • editorBracketHighlight.foreground6#0A7870
  • editorBracketMatch.background#8D63C915
  • editorBracketMatch.border#8D63C9
  • editorCursor.foreground#8D63C9
  • editorGroupHeader.tabsBackground#F2EFFA
  • editorGroupHeader.tabsBorder#F2EFFA00
  • editorGutter.addedBackground#6E9B5D
  • editorGutter.deletedBackground#C55C74
  • editorGutter.modifiedBackground#8D63C9
  • editorHoverWidget.background#FDFBFF
  • editorHoverWidget.border#E3DDF0
  • editorHoverWidget.foreground#241F2D
  • editorHoverWidget.statusBarBackground#F2EFFA
  • editorIndentGuide.activeBackground#DDD7EA
  • editorIndentGuide.background#E9E3F2
  • editorWhitespace.foreground#DDD7EA
  • editorWidget.background#F2EFFA
  • editorWidget.border#F2EFFA
  • errorForeground#C55C74
  • focusBorder#8D63C980
  • foreground#241F2D
  • gitDecoration.conflictingResourceForeground#C55C74
  • gitDecoration.ignoredResourceForeground#AEA5BC
  • gitDecoration.modifiedResourceForeground#8D63C9
  • gitDecoration.untrackedResourceForeground#6E9B5D
  • icon.foreground#675F73
  • input.background#FDFBFF
  • input.border#FDFBFF00
  • input.foreground#241F2D
  • input.placeholderForeground#9E97AC
  • inputOption.activeBackground#8D63C91A
  • list.activeSelectionBackground#8D63C912
  • list.activeSelectionForeground#241F2D
  • list.focusBackground#8D63C912
  • list.hoverBackground#8D63C90D
  • list.inactiveSelectionBackground#8D63C912
  • menu.background#F2EFFA
  • menu.foreground#241F2D
  • menu.selectionBackground#8D63C91A
  • menu.separatorBackground#E3DDF0
  • menubar.selectionBackground#E9E3F2
  • notificationCenter.background#F2EFFA
  • notificationCenter.border#E3DDF0
  • notificationCenterHeader.background#F2EFFA
  • notificationCenterHeader.foreground#241F2D
  • notificationLink.foreground#7B56C2
  • notifications#7B56C2
  • notifications.background#F2EFFA
  • notifications.foreground#7B56C2
  • notificationsErrorIcon.foreground#C55C74
  • notificationsInfoIcon.foreground#8D63C9
  • notificationsWarningIcon.foreground#B38347
  • notificationToast.background#F2EFFA
  • notificationToast.border#E3DDF0
  • panel.background#FCFAFF
  • panel.border#FCFAFF
  • panelTitle.activeForeground#241F2D
  • panelTitle.inactiveForeground#675F73
  • peekView.border#8D63C9
  • peekViewEditor.background#FCFAFF
  • peekViewResult.background#F2EFFA
  • peekViewResult.selectionBackground#8D63C91A
  • peekViewTitle.background#F2EFFA
  • peekViewTitleDescription.foreground#6E667D
  • peekViewTitleLabel.foreground#241F2D
  • pickerGroup.border#F2EFFA
  • pickerGroup.foreground#9E97AC
  • quickInput.background#F2EFFA
  • quickInput.foreground#241F2D
  • quickInputList.focusBackground#8D63C91A
  • quickInputList.focusForeground#241F2D
  • quickInputTitle.background#F2EFFA
  • scrollbar.shadow#00000000
  • scrollbarSlider.activeBackground#9F93B0
  • scrollbarSlider.background#C1B7D080
  • scrollbarSlider.hoverBackground#B0A5C0B0
  • selection.background#8D63C933
  • sideBar.background#F2EFFA
  • sideBar.border#F2EFFA
  • sideBar.foreground#675F73
  • sideBarSectionHeader.background#F2EFFA
  • sideBarSectionHeader.border#F2EFFA
  • sideBarSectionHeader.foreground#241F2D
  • statusBar.background#F2EFFA
  • statusBar.border#F2EFFA
  • statusBar.foreground#675F73
  • tab.activeBackground#FCFAFF
  • tab.activeBorder#8D63C9
  • tab.activeForeground#241F2D
  • tab.border#F2EFFA00
  • tab.inactiveBackground#F2EFFA
  • tab.inactiveForeground#9E97AC
  • tab.unfocusedActiveBorder#8D63C980
  • terminal.ansiBlack#554E63
  • terminal.ansiBlue#7B56C2
  • terminal.ansiCyan#2F8A86
  • terminal.ansiGreen#6E9B5D
  • terminal.ansiMagenta#A76AE1
  • terminal.ansiRed#B85A70
  • terminal.ansiWhite#FAF7FD
  • terminal.ansiYellow#B38347
  • terminal.background#FCFAFF
  • terminal.foreground#554E63
  • terminal.selectionBackground#8D63C933
  • textCodeBlock.background#EAE4F7
  • textLink.foreground#7B56C2
  • textSeparator.foreground#E9E3F2
  • titleBar.activeBackground#FCFAFF
  • titleBar.activeForeground#241F2D
  • titleBar.border#FCFAFF
  • titleBar.inactiveBackground#FCFAFF
  • titleBar.inactiveForeground#9E97AC
  • widget.shadow#00000000

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#7A6E80italic
string, punctuation.definition.string#3A7A38
constant.numeric, constant.language, constant.character, constant.other#A06840
keyword, storage.type, storage.modifier#A83068
keyword.operator#786878
entity.name.function, support.function, meta.function-call#2A58B8
entity.name.type, entity.name.class, support.class, support.type, entity.other.inherited-class#907210
variable, meta.definition.variable, support.variable, entity.name.variable#403850
variable.parameter#403850italic
variable.other.property, support.type.property-name#0A7870
punctuation#786878
meta.object-literal.key#0A7870
entity.name.tag, punctuation.definition.tag#A83068
entity.other.attribute-name#907210
string.regexp#A06840
entity.name.tag.css, entity.other.attribute-name.class.css, entity.other.attribute-name.id.css, meta.selector.css#A83068
support.type.property-name.css#0A7870
support.constant.property-value.css, keyword.other.unit.css#A06840
entity.other.attribute-name.html.vue#A83068
support.class.component.html.vue#907210
meta.decorator punctuation.decorator, meta.decorator entity.name.function, meta.decorator entity.name.type, meta.decorator variable.other.object#A06840
markup.heading.markdown#2A58B8
markup.underline.link.markdown, string.other.link.title.markdown#3A7A38
markup.bold.markdownbold
markup.italic.markdownitalic
markup.inline.raw.string.markdown, markup.fenced_code.block.markdown#786878
invalid#B84858
entity.name.namespace.wildcard.python, meta.statement.import.python entity.name.module.python, support.other.module.python#3A7A38
support.function.builtin.python#2A58B8italic
support.function.magic.python#2A58B8italic
support.type.python#907210
variable.parameter.function.language.special.self.python, variable.parameter.function.language.special.cls.python#A83068italic
entity.name.function.decorator.python, punctuation.definition.decorator.python#A06840
support.variable.magic.python#0A7870
support.class.exception.python#907210
meta.fstring.python variable, constant.character.format.placeholder.other.python#403850