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#201A26
  • activityBar.border#201A26
  • activityBar.foreground#B2A8C1
  • activityBar.inactiveForeground#867C96
  • badge.background#B38AFF
  • badge.foreground#17131B
  • button.background#B38AFF
  • button.foreground#17131B
  • button.hoverBackground#C5A5FF
  • descriptionForeground#B2A8C1
  • diffEditor.insertedTextBackground#90AF6922
  • diffEditor.removedTextBackground#FF869D22
  • dropdown.background#291F31
  • dropdown.border#352C40
  • dropdown.foreground#EEE7F6
  • dropdown.listBackground#291F31
  • editor.background#17131B
  • editor.foreground#EEE7F6
  • editor.hover.background#291F31
  • editor.hover.border#352C40
  • editor.hover.foreground#EEE7F6
  • editor.hover.statusBarBackground#201A26
  • editor.lineHighlightBackground#201A26
  • editor.selectionBackground#B38AFF33
  • editor.selectionHighlightBackground#90AF6922
  • editor.wordHighlightBackground#B38AFF22
  • editor.wordHighlightStrongBackground#B38AFF33
  • editorBracketHighlight.foreground1#D880A0
  • editorBracketHighlight.foreground2#7CB0F0
  • editorBracketHighlight.foreground3#E0C08C
  • editorBracketHighlight.foreground4#AAD884
  • editorBracketHighlight.foreground5#D8A28C
  • editorBracketHighlight.foreground6#58C8C4
  • editorBracketMatch.background#B38AFF22
  • editorBracketMatch.border#B38AFF
  • editorCursor.foreground#B38AFF
  • editorGroupHeader.tabsBackground#201A26
  • editorGroupHeader.tabsBorder#201A2600
  • editorGutter.addedBackground#90AF69
  • editorGutter.deletedBackground#FF869D
  • editorGutter.modifiedBackground#B38AFF
  • editorHoverWidget.background#291F31
  • editorHoverWidget.border#352C40
  • editorHoverWidget.foreground#EEE7F6
  • editorHoverWidget.statusBarBackground#201A26
  • editorIndentGuide.activeBackground#4A3E58
  • editorIndentGuide.background#352C40
  • editorWhitespace.foreground#352C40
  • editorWidget.background#291F31
  • editorWidget.border#352C40
  • errorForeground#FF869D
  • focusBorder#B38AFF80
  • foreground#EEE7F6
  • gitDecoration.conflictingResourceForeground#FF869D
  • gitDecoration.ignoredResourceForeground#867C96
  • gitDecoration.modifiedResourceForeground#B38AFF
  • gitDecoration.untrackedResourceForeground#90AF69
  • icon.foreground#B2A8C1
  • input.background#291F31
  • input.border#291F3100
  • input.foreground#EEE7F6
  • input.placeholderForeground#867C96
  • inputOption.activeBackground#B38AFF22
  • list.activeSelectionBackground#B38AFF1A
  • list.activeSelectionForeground#EEE7F6
  • list.focusBackground#B38AFF1A
  • list.hoverBackground#B38AFF10
  • list.inactiveSelectionBackground#B38AFF1A
  • menu.background#291F31
  • menu.foreground#EEE7F6
  • menu.selectionBackground#B38AFF22
  • menu.separatorBackground#352C40
  • menubar.selectionBackground#352C40
  • notificationCenter.background#291F31
  • notificationCenter.border#352C40
  • notificationCenterHeader.background#201A26
  • notificationCenterHeader.foreground#EEE7F6
  • notificationLink.foreground#C3A1FF
  • notifications.background#291F31
  • notifications.foreground#EEE7F6
  • notificationsErrorIcon.foreground#FF869D
  • notificationsInfoIcon.foreground#B38AFF
  • notificationsWarningIcon.foreground#E1B36B
  • notificationToast.background#291F31
  • notificationToast.border#352C40
  • panel.background#201A26
  • panel.border#201A26
  • panelTitle.activeForeground#EEE7F6
  • panelTitle.inactiveForeground#B2A8C1
  • peekView.border#B38AFF
  • peekViewEditor.background#17131B
  • peekViewResult.background#201A26
  • peekViewResult.selectionBackground#B38AFF22
  • peekViewTitle.background#201A26
  • peekViewTitleDescription.foreground#B2A8C1
  • peekViewTitleLabel.foreground#EEE7F6
  • pickerGroup.border#201A26
  • pickerGroup.foreground#867C96
  • quickInput.background#291F31
  • quickInput.foreground#EEE7F6
  • quickInputList.focusBackground#B38AFF22
  • quickInputList.focusForeground#EEE7F6
  • quickInputTitle.background#201A26
  • scrollbar.shadow#00000000
  • scrollbarSlider.activeBackground#7D6F92
  • scrollbarSlider.background#594B6980
  • scrollbarSlider.hoverBackground#6B5D7DB0
  • selection.background#B38AFF33
  • sideBar.background#201A26
  • sideBar.border#201A26
  • sideBar.foreground#B2A8C1
  • sideBarSectionHeader.background#201A26
  • sideBarSectionHeader.border#201A26
  • sideBarSectionHeader.foreground#EEE7F6
  • statusBar.background#201A26
  • statusBar.border#201A26
  • statusBar.foreground#B2A8C1
  • tab.activeBackground#17131B
  • tab.activeBorder#B38AFF
  • tab.activeForeground#EEE7F6
  • tab.border#201A2600
  • tab.inactiveBackground#201A26
  • tab.inactiveForeground#867C96
  • tab.unfocusedActiveBorder#B38AFF80
  • terminal.ansiBlack#110E14
  • terminal.ansiBlue#C3A1FF
  • terminal.ansiCyan#72D0C6
  • terminal.ansiGreen#90AF69
  • terminal.ansiMagenta#D49BFF
  • terminal.ansiRed#FF869D
  • terminal.ansiWhite#EEE7F6
  • terminal.ansiYellow#E1B36B
  • terminal.background#17131B
  • terminal.foreground#EEE7F6
  • terminal.selectionBackground#B38AFF33
  • textCodeBlock.background#291F31
  • textLink.foreground#C3A1FF
  • textSeparator.foreground#352C40
  • titleBar.activeBackground#201A26
  • titleBar.activeForeground#EEE7F6
  • titleBar.border#201A26
  • titleBar.inactiveBackground#201A26
  • titleBar.inactiveForeground#867C96
  • widget.shadow#00000000

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#685C70italic
string, punctuation.definition.string#AAD884
constant.numeric, constant.language, constant.character, constant.other#D8A28C
keyword, storage.type, storage.modifier#D880A0
keyword.operator#887C94
entity.name.function, support.function, meta.function-call#7CB0F0
entity.name.type, entity.name.class, support.class, support.type, entity.other.inherited-class#E0C08C
variable, meta.definition.variable, support.variable, entity.name.variable#C4BED0
variable.parameter#C4BED0italic
variable.other.property, support.type.property-name#58C8C4
punctuation#887C94
meta.object-literal.key#58C8C4
entity.name.tag, punctuation.definition.tag#D880A0
entity.other.attribute-name#E0C08C
string.regexp#D8A28C
entity.name.tag.css, entity.other.attribute-name.class.css, entity.other.attribute-name.id.css, meta.selector.css#D880A0
support.type.property-name.css#58C8C4
support.constant.property-value.css, keyword.other.unit.css#D8A28C
entity.other.attribute-name.html.vue#D880A0
support.class.component.html.vue#E0C08C
meta.decorator punctuation.decorator, meta.decorator entity.name.function, meta.decorator entity.name.type, meta.decorator variable.other.object#D8A28C
markup.heading.markdown#7CB0F0
markup.underline.link.markdown, string.other.link.title.markdown#AAD884
markup.bold.markdownbold
markup.italic.markdownitalic
markup.inline.raw.string.markdown, markup.fenced_code.block.markdown#887C94
invalid#FF869D
entity.name.namespace.wildcard.python, meta.statement.import.python entity.name.module.python, support.other.module.python#AAD884
support.function.builtin.python#7CB0F0italic
support.function.magic.python#7CB0F0italic
support.type.python#E0C08C
variable.parameter.function.language.special.self.python, variable.parameter.function.language.special.cls.python#D880A0italic
entity.name.function.decorator.python, punctuation.definition.decorator.python#D8A28C
support.variable.magic.python#58C8C4
support.class.exception.python#E0C08C
meta.fstring.python variable, constant.character.format.placeholder.other.python#C4BED0