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#A897E3
  • activityBar.background#0D0C13
  • activityBar.border#292730
  • activityBar.foreground#D8D2C4
  • activityBar.inactiveForeground#8A867C
  • activityBarBadge.background#AE9DEA
  • activityBarBadge.foreground#1F211D
  • badge.background#2E2C37
  • badge.foreground#D8D2C4
  • button.background#A897E3
  • button.border#1F211D1A
  • button.foreground#1F211D
  • button.hoverBackground#C1B0FE
  • button.secondaryBackground#2E2C37
  • button.secondaryForeground#D8D2C4
  • button.secondaryHoverBackground#211F28
  • chat.editedFileForeground#D6A4D7
  • chat.slashCommandBackground#3F355D99
  • chat.slashCommandForeground#C1B0FE
  • checkbox.background#17161F
  • checkbox.border#3D3B47
  • debugToolBar.background#0D0C13
  • descriptionForeground#8A867C
  • dropdown.background#17161F
  • dropdown.border#3D3B47
  • dropdown.foreground#D8D2C4
  • dropdown.listBackground#17161F
  • editor.background#17161F
  • editor.findMatchBackground#D6A4D788
  • editor.findMatchHighlightBackground#D6A4D744
  • editor.foreground#D8D2C4
  • editor.inactiveSelectionBackground#2E2C37
  • editor.lineHighlightBackground#211F28
  • editor.selectionBackground#3F355D
  • editor.selectionHighlightBackground#3F355D88
  • editor.wordHighlightBackground#D6A4D733
  • editor.wordHighlightStrongBackground#DE99B755
  • editorBracketMatch.background#D6A4D755
  • editorBracketMatch.border#D6A4D7
  • editorCursor.foreground#AE9DEA
  • editorGroup.border#292730
  • editorGroupHeader.tabsBackground#0D0C13
  • editorGroupHeader.tabsBorder#292730
  • editorGutter.addedBackground#9FA1C7
  • editorGutter.deletedBackground#ED8B88
  • editorGutter.modifiedBackground#93ADE8
  • editorIndentGuide.activeBackground1#8A867C
  • editorIndentGuide.background1#292730
  • editorLineNumber.activeForeground#A897E3
  • editorLineNumber.foreground#8A867C
  • editorOverviewRuler.border#292730
  • editorSuggestWidget.background#211F28
  • editorSuggestWidget.border#3D3B47
  • editorSuggestWidget.foreground#D8D2C4
  • editorSuggestWidget.highlightForeground#93ADE8
  • editorSuggestWidget.selectedBackground#2E2C37
  • editorWidget.background#211F28
  • editorWidget.border#3D3B47
  • errorForeground#ED8B88
  • focusBorder#A897E3
  • foreground#D8D2C4
  • icon.foreground#D8D2C4
  • input.background#17161F
  • input.border#3D3B47
  • input.foreground#D8D2C4
  • input.placeholderForeground#8A867C
  • inputOption.activeBackground#3F355D99
  • inputOption.activeBorder#A897E3
  • inputOption.activeForeground#FFFFFF
  • keybindingLabel.background#2E2C37
  • keybindingLabel.border#3D3B47
  • keybindingLabel.foreground#D8D2C4
  • list.activeSelectionBackground#3F355D
  • list.activeSelectionForeground#FFFFFF
  • list.activeSelectionIconForeground#FFFFFF
  • list.dropBackground#D6A4D755
  • list.focusAndSelectionOutline#A897E3
  • list.focusBackground#3F355D88
  • list.highlightForeground#93ADE8
  • list.hoverBackground#211F28
  • list.inactiveSelectionBackground#2E2C37
  • menu.background#17161F
  • menu.border#3D3B47
  • menu.foreground#D8D2C4
  • menu.selectionBackground#A897E3
  • menu.selectionForeground#1F211D
  • notebook.cellBorderColor#292730
  • notebook.selectedCellBackground#3F355D66
  • notificationCenterHeader.background#0D0C13
  • notificationCenterHeader.foreground#D8D2C4
  • notifications.background#17161F
  • notifications.border#292730
  • notifications.foreground#D8D2C4
  • panel.background#211F28
  • panel.border#292730
  • panelInput.border#3D3B47
  • panelTitle.activeBorder#A897E3
  • panelTitle.activeForeground#D8D2C4
  • panelTitle.inactiveForeground#8A867C
  • peekViewEditor.background#17161F
  • peekViewEditor.matchHighlightBackground#D6A4D766
  • peekViewResult.background#211F28
  • peekViewResult.matchHighlightBackground#D6A4D766
  • pickerGroup.border#3D3B47
  • pickerGroup.foreground#9FA1C7
  • ports.iconRunningProcessForeground#A897E3
  • progressBar.background#A897E3
  • quickInput.background#211F28
  • quickInput.foreground#D8D2C4
  • searchEditor.textInputBorder#3D3B47
  • settings.dropdownBackground#17161F
  • settings.dropdownBorder#3D3B47
  • settings.headerForeground#F0E8D8
  • settings.modifiedItemIndicator#D6A4D7
  • settings.numberInputBorder#3D3B47
  • settings.textInputBorder#3D3B47
  • sideBar.background#0D0C13
  • sideBar.border#292730
  • sideBar.foreground#D8D2C4
  • sideBarSectionHeader.background#211F28
  • sideBarSectionHeader.border#292730
  • sideBarSectionHeader.foreground#D8D2C4
  • sideBarTitle.foreground#F0E8D8
  • statusBar.background#0D0C13
  • statusBar.border#292730
  • statusBar.debuggingBackground#D6A4D7
  • statusBar.debuggingForeground#1F211D
  • statusBar.focusBorder#A897E3
  • statusBar.foreground#D8D2C4
  • statusBar.noFolderBackground#17161F
  • statusBarItem.errorBackground#ED8B88
  • statusBarItem.focusBorder#A897E3
  • statusBarItem.hoverBackground#FFFFFF1A
  • statusBarItem.hoverForeground#F0E8D8
  • statusBarItem.prominentBackground#2E2C37
  • statusBarItem.remoteBackground#A897E3
  • statusBarItem.remoteForeground#1F211D
  • tab.activeBackground#17161F
  • tab.activeBorder#17161F
  • tab.activeBorderTop#A897E3
  • tab.activeForeground#F0E8D8
  • tab.border#292730
  • tab.hoverBackground#17161F
  • tab.inactiveBackground#0D0C13
  • tab.inactiveForeground#8A867C
  • tab.lastPinnedBorder#3D3B47
  • tab.selectedBorderTop#AE9DEA
  • tab.unfocusedActiveBorder#17161F
  • tab.unfocusedActiveBorderTop#292730
  • tab.unfocusedHoverBackground#0D0C13
  • terminal.ansiBlack#1A1B18
  • terminal.ansiBlue#93ADE8
  • terminal.ansiBrightBlack#8A867C
  • terminal.ansiBrightBlue#93ADE8
  • terminal.ansiBrightCyan#92BBEA
  • terminal.ansiBrightGreen#A897E3
  • terminal.ansiBrightMagenta#DE99B7
  • terminal.ansiBrightRed#AE9DEA
  • terminal.ansiBrightWhite#F0E8D8
  • terminal.ansiBrightYellow#D6A4D7
  • terminal.ansiCyan#92BBEA
  • terminal.ansiGreen#C4A6DB
  • terminal.ansiMagenta#DE99B7
  • terminal.ansiRed#ED8B88
  • terminal.ansiWhite#D8D2C4
  • terminal.ansiYellow#D6A4D7
  • terminal.background#17161F
  • terminal.foreground#D8D2C4
  • terminal.inactiveSelectionBackground#2E2C37
  • terminal.tab.activeBorder#A897E3
  • terminalCursor.foreground#AE9DEA
  • textBlockQuote.background#211F28
  • textBlockQuote.border#9FA1C7
  • textCodeBlock.background#211F28
  • textLink.activeForeground#AE9DEA
  • textLink.foreground#93ADE8
  • textPreformat.background#2E2C37
  • textPreformat.foreground#D8D2C4
  • textSeparator.foreground#3D3B47
  • titleBar.activeBackground#0D0C13
  • titleBar.activeForeground#D8D2C4
  • titleBar.border#292730
  • titleBar.inactiveBackground#17161F
  • titleBar.inactiveForeground#8A867C
  • welcomePage.progress.foreground#A897E3
  • welcomePage.tileBackground#211F28
  • widget.border#3D3B47

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
meta.embedded, source.groovy.embedded, string meta.image.inline.markdown, variable.legacy.builtin.python#D8D2C4
emphasisitalic
strongbold
comment#9FA1C7
constant.language#93ADE8
constant.numeric, variable.other.enummember, keyword.operator.plus.exponent, keyword.operator.minus.exponent#C4A6DB
constant.regexp#DE99B7
entity.name.tag, entity.name.selector#AE9DEA
entity.other.attribute-name#93ADE8
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#D6A4D7
invalid#ED8B88
markup.underlineunderline
markup.bold#93ADE8bold
markup.heading#AE9DEAbold
markup.italic#DE99B7italic
markup.strikethroughstrikethrough
markup.deleted#ED8B88
markup.inserted#9FA1C7
markup.changed#D6A4D7
markup.quote#9FA1C7
markup.inline.raw#C4A6DB
meta.diff.header#93ADE8
storage#AE9DEA
storage.type#AE9DEA
keyword, keyword.control, keyword.operator.expression#AE9DEA
keyword.operator#D8D2C4
string, constant.other.symbol#C4A6DB
punctuation.definition.string, punctuation.definition.comment#8A867C
support.function, entity.name.function#D6A4D7
support.class, support.type, entity.name.type, entity.name.class, entity.name.namespace#93ADE8
variable, meta.definition.variable.name, support.variable, entity.name.variable, constant.other.placeholder#C6D6DE
variable.language, constant.character.escape#AE9DEA
meta.object-literal.key, entity.name.label#C6D6DE
punctuation.definition.group.regexp, punctuation.definition.character-class.regexp, keyword.operator.negation.regexp, support.other.parenthesis.regexp#D6A4D7
constant.character.character-class.regexp, keyword.operator.or.regexp, keyword.control.anchor.regexp#AE9DEA
keyword.operator.quantifier.regexp#D8D2C4
constant.character, constant.other.option#93ADE8
Yuan by Muqiu Han - VS Code Theme