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.activeBorder#7361A8
  • activityBar.background#F0EEFB
  • activityBar.border#D8D5E5
  • activityBar.foreground#2F2B26
  • activityBar.inactiveForeground#7B766A
  • activityBarBadge.background#655298
  • activityBarBadge.foreground#FFFFFF
  • badge.background#E2DFF0
  • badge.foreground#2F2B26
  • button.background#7361A8
  • button.border#FFFFFF1A
  • button.foreground#FFFFFF
  • button.hoverBackground#59478C
  • button.secondaryBackground#E2DFF0
  • button.secondaryForeground#2F2B26
  • button.secondaryHoverBackground#F5F3FE
  • chat.editedFileForeground#875988
  • chat.slashCommandBackground#E0D6FF99
  • chat.slashCommandForeground#59478C
  • checkbox.background#FAF9FF
  • checkbox.border#C8C4D8
  • debugToolBar.background#F0EEFB
  • descriptionForeground#7B766A
  • dropdown.background#FAF9FF
  • dropdown.border#C8C4D8
  • dropdown.foreground#2F2B26
  • dropdown.listBackground#FAF9FF
  • editor.background#FAF9FF
  • editor.findMatchBackground#87598866
  • editor.findMatchHighlightBackground#87598855
  • editor.foreground#2F2B26
  • editor.inactiveSelectionBackground#E2DFF0
  • editor.lineHighlightBackground#F5F3FE
  • editor.selectionBackground#E0D6FF
  • editor.selectionHighlightBackground#E0D6FF88
  • editor.wordHighlightBackground#87598840
  • editor.wordHighlightStrongBackground#8A4C6966
  • editorBracketMatch.background#87598855
  • editorBracketMatch.border#875988
  • editorCursor.foreground#655298
  • editorGroup.border#D8D5E5
  • editorGroupHeader.tabsBackground#F0EEFB
  • editorGroupHeader.tabsBorder#D8D5E5
  • editorGutter.addedBackground#565779
  • editorGutter.deletedBackground#9C4343
  • editorGutter.modifiedBackground#485E94
  • editorIndentGuide.activeBackground1#7B766A
  • editorIndentGuide.background1#D8D5E5
  • editorLineNumber.activeForeground#7361A8
  • editorLineNumber.foreground#7B766A
  • editorOverviewRuler.border#D8D5E5
  • editorSuggestWidget.background#F5F3FE
  • editorSuggestWidget.border#C8C4D8
  • editorSuggestWidget.foreground#2F2B26
  • editorSuggestWidget.highlightForeground#485E94
  • editorSuggestWidget.selectedBackground#E2DFF0
  • editorWidget.background#F5F3FE
  • editorWidget.border#C8C4D8
  • errorForeground#9C4343
  • focusBorder#7361A8
  • foreground#2F2B26
  • icon.foreground#2F2B26
  • input.background#FAF9FF
  • input.border#C8C4D8
  • input.foreground#2F2B26
  • input.placeholderForeground#7B766A
  • inputOption.activeBackground#E0D6FF99
  • inputOption.activeBorder#7361A8
  • inputOption.activeForeground#1F211D
  • keybindingLabel.background#E2DFF0
  • keybindingLabel.border#C8C4D8
  • keybindingLabel.foreground#2F2B26
  • list.activeSelectionBackground#E0D6FF
  • list.activeSelectionForeground#1F211D
  • list.activeSelectionIconForeground#1F211D
  • list.dropBackground#87598855
  • list.focusAndSelectionOutline#7361A8
  • list.focusBackground#E0D6FF88
  • list.highlightForeground#485E94
  • list.hoverBackground#F5F3FE
  • list.inactiveSelectionBackground#E2DFF0
  • menu.background#FAF9FF
  • menu.border#C8C4D8
  • menu.foreground#2F2B26
  • menu.selectionBackground#7361A8
  • menu.selectionForeground#FFFFFF
  • notebook.cellBorderColor#D8D5E5
  • notebook.selectedCellBackground#E0D6FF66
  • notificationCenterHeader.background#F0EEFB
  • notificationCenterHeader.foreground#2F2B26
  • notifications.background#FAF9FF
  • notifications.border#D8D5E5
  • notifications.foreground#2F2B26
  • panel.background#F5F3FE
  • panel.border#D8D5E5
  • panelInput.border#C8C4D8
  • panelTitle.activeBorder#7361A8
  • panelTitle.activeForeground#2F2B26
  • panelTitle.inactiveForeground#7B766A
  • peekViewEditor.background#FAF9FF
  • peekViewEditor.matchHighlightBackground#87598866
  • peekViewResult.background#F5F3FE
  • peekViewResult.matchHighlightBackground#87598866
  • pickerGroup.border#C8C4D8
  • pickerGroup.foreground#565779
  • ports.iconRunningProcessForeground#7361A8
  • progressBar.background#7361A8
  • quickInput.background#F5F3FE
  • quickInput.foreground#2F2B26
  • searchEditor.textInputBorder#C8C4D8
  • settings.dropdownBackground#FAF9FF
  • settings.dropdownBorder#C8C4D8
  • settings.headerForeground#1F1B16
  • settings.modifiedItemIndicator#875988
  • settings.numberInputBorder#C8C4D8
  • settings.textInputBorder#C8C4D8
  • sideBar.background#F0EEFB
  • sideBar.border#D8D5E5
  • sideBar.foreground#2F2B26
  • sideBarSectionHeader.background#F5F3FE
  • sideBarSectionHeader.border#D8D5E5
  • sideBarSectionHeader.foreground#2F2B26
  • sideBarTitle.foreground#1F1B16
  • statusBar.background#F0EEFB
  • statusBar.border#D8D5E5
  • statusBar.debuggingBackground#875988
  • statusBar.debuggingForeground#FFFFFF
  • statusBar.focusBorder#7361A8
  • statusBar.foreground#2F2B26
  • statusBar.noFolderBackground#FAF9FF
  • statusBarItem.errorBackground#9C4343
  • statusBarItem.focusBorder#7361A8
  • statusBarItem.hoverBackground#1F211D1A
  • statusBarItem.hoverForeground#1F1B16
  • statusBarItem.prominentBackground#E2DFF0
  • statusBarItem.remoteBackground#7361A8
  • statusBarItem.remoteForeground#FFFFFF
  • tab.activeBackground#FAF9FF
  • tab.activeBorder#FAF9FF
  • tab.activeBorderTop#7361A8
  • tab.activeForeground#1F1B16
  • tab.border#D8D5E5
  • tab.hoverBackground#FAF9FF
  • tab.inactiveBackground#F0EEFB
  • tab.inactiveForeground#7B766A
  • tab.lastPinnedBorder#C8C4D8
  • tab.selectedBorderTop#655298
  • tab.unfocusedActiveBorder#FAF9FF
  • tab.unfocusedActiveBorderTop#D8D5E5
  • tab.unfocusedHoverBackground#F0EEFB
  • terminal.ansiBlack#2F2B26
  • terminal.ansiBlue#485E94
  • terminal.ansiBrightBlack#7B766A
  • terminal.ansiBrightBlue#485E94
  • terminal.ansiBrightCyan#466C96
  • terminal.ansiBrightGreen#7361A8
  • terminal.ansiBrightMagenta#8A4C69
  • terminal.ansiBrightRed#655298
  • terminal.ansiBrightWhite#1F1B16
  • terminal.ansiBrightYellow#875988
  • terminal.ansiCyan#466C96
  • terminal.ansiGreen#715685
  • terminal.ansiMagenta#8A4C69
  • terminal.ansiRed#9C4343
  • terminal.ansiWhite#E8E1D3
  • terminal.ansiYellow#875988
  • terminal.background#FAF9FF
  • terminal.foreground#2F2B26
  • terminal.inactiveSelectionBackground#E2DFF0
  • terminal.tab.activeBorder#7361A8
  • terminalCursor.foreground#655298
  • textBlockQuote.background#F5F3FE
  • textBlockQuote.border#565779
  • textCodeBlock.background#F5F3FE
  • textLink.activeForeground#655298
  • textLink.foreground#485E94
  • textPreformat.background#E2DFF0
  • textPreformat.foreground#2F2B26
  • textSeparator.foreground#C8C4D8
  • titleBar.activeBackground#F0EEFB
  • titleBar.activeForeground#2F2B26
  • titleBar.border#D8D5E5
  • titleBar.inactiveBackground#FAF9FF
  • titleBar.inactiveForeground#7B766A
  • welcomePage.progress.foreground#7361A8
  • welcomePage.tileBackground#F5F3FE
  • widget.border#C8C4D8

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
meta.embedded, source.groovy.embedded, string meta.image.inline.markdown, variable.legacy.builtin.python#2F2B26
emphasisitalic
strongbold
comment#565779
constant.language#485E94
constant.numeric, variable.other.enummember, keyword.operator.plus.exponent, keyword.operator.minus.exponent#715685
constant.regexp#8A4C69
entity.name.tag, entity.name.selector#655298
entity.other.attribute-name#485E94
entity.other.attribute-name.class.css, source.css entity.other.attribute-name.class, entity.other.attribute-name.id.css, source.css entity.other.attribute-name.pseudo-class, entity.other.attribute-name.scss#875988
invalid#9C4343
markup.underlineunderline
markup.bold#485E94bold
markup.heading#655298bold
markup.italic#8A4C69italic
markup.strikethroughstrikethrough
markup.deleted#9C4343
markup.inserted#565779
markup.changed#875988
markup.quote#565779
markup.inline.raw#715685
meta.diff.header#485E94
storage#655298
storage.type#655298
keyword, keyword.control, keyword.operator.expression#655298
keyword.operator#2F2B26
string, constant.other.symbol#715685
punctuation.definition.string, punctuation.definition.comment#7B766A
support.function, entity.name.function#875988
support.class, support.type, entity.name.type, entity.name.class, entity.name.namespace#485E94
variable, meta.definition.variable.name, support.variable, entity.name.variable, constant.other.placeholder#42516A
variable.language, constant.character.escape#655298
meta.object-literal.key, entity.name.label#42516A
punctuation.definition.group.regexp, punctuation.definition.character-class.regexp, keyword.operator.negation.regexp, support.other.parenthesis.regexp#875988
constant.character.character-class.regexp, keyword.operator.or.regexp, keyword.control.anchor.regexp#655298
keyword.operator.quantifier.regexp#2F2B26
constant.character, constant.other.option#485E94