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.

  • actionBar.toggledBackground#383a49
  • activityBar.activeBorder#886ca6
  • activityBar.background#181718
  • activityBar.border#2b2a2b
  • activityBar.foreground#e9dfd3
  • activityBar.inactiveForeground#807c78
  • activityBarBadge.background#886ca6
  • activityBarBadge.foreground#DBD4CC
  • badge.background#5c4b60
  • badge.foreground#f8f8f8
  • button.background#886ca6
  • button.border#DBD4CC12
  • button.foreground#DBD4CC
  • button.hoverBackground#635375
  • button.secondaryBackground#323130
  • button.secondaryForeground#DBD4CC
  • button.secondaryHoverBackground#3c3c3c
  • chat.slashCommandBackground#48344b
  • chat.slashCommandForeground#886ca6
  • checkbox.background#323130
  • checkbox.border#3c3c3c
  • debugConsole.errorForeground#C66FB0
  • debugConsole.warningForeground#AD64B5
  • debugExceptionWidget.background#412644
  • debugExceptionWidget.border#AD64B5
  • debugTokenExpression.error#C66FB0
  • debugToolBar.background#181718
  • descriptionForeground#9d9d9d
  • diffEditor.unchangedRegionShadow#00000000
  • dropdown.background#323130
  • dropdown.border#3c3c3c
  • dropdown.foreground#DBD4CC
  • dropdown.listBackground#1f1c1f
  • editor.background#1f1c1f
  • editor.findMatchBackground#dca6c946
  • editor.findMatchBorder#dca6c9b6
  • editor.findMatchHighlightBackground#dca6c946
  • editor.foreground#DBD4CC
  • editor.inactiveSelectionBackground#5346538c
  • editor.lineHighlightBorder#dca6c923
  • editor.selectionBackground#886ca688
  • editor.selectionHighlightBackground#ecadff26
  • editorError.foreground#C66FB0
  • editorGroup.border#DBD4CC00
  • editorGroupHeader.tabsBackground#181718
  • editorGroupHeader.tabsBorder#1f1c1f
  • editorGutter.addedBackground#2ea043
  • editorGutter.deletedBackground#f85149
  • editorGutter.modifiedBackground#886ca6
  • editorIndentGuide.activeBackground1#707070
  • editorIndentGuide.background1#404040
  • editorLineNumber.activeForeground#DBD4CC
  • editorLineNumber.foreground#aba49b91
  • editorMarkerNavigationError.background#C66FB0
  • editorMarkerNavigationError.headerBackground#f14c4c1a
  • editorMarkerNavigationWarning.background#AD64B5
  • editorMarkerNavigationWarning.headerBackground#c880b61a
  • editorOverviewRuler.border#00000000
  • editorOverviewRuler.errorForeground#C66FB0
  • editorOverviewRuler.findMatchForeground#c880b669
  • editorOverviewRuler.modifiedForeground#886ca699
  • editorOverviewRuler.warningForeground#AD64B5
  • editorStickyScroll.shadow#00000000
  • editorWarning.background#AD64B585
  • editorWarning.border#AD64B5
  • editorWarning.foreground#AD64B5
  • editorWidget.background#202020
  • errorForeground#C66FB0
  • focusBorder#886ca6
  • foreground#DBD4CC
  • icon.foreground#DBD4CC
  • inlineChat.shadow#00000000
  • input.background#323130
  • input.border#3c3c3c
  • input.foreground#DBD4CC
  • input.placeholderForeground#818181
  • inputOption.activeBackground#886ca682
  • inputOption.activeBorder#886ca6
  • inputValidation.errorBackground#c66fb077
  • inputValidation.errorBorder#8a4a7a
  • inputValidation.warningBackground#311e2c
  • inputValidation.warningBorder#AD64B5
  • keybindingLabel.foreground#DBD4CC
  • list.activeSelectionBackground#5c4b60
  • list.activeSelectionForeground#DBD4CC
  • list.activeSelectionIconForeground#DBD4CC
  • list.dropBackground#383b3d
  • list.errorForeground#C66FB0
  • list.filterMatchBackground#dca6c955
  • list.focusHighlightForeground#886ca6
  • list.focusOutline#886ca6
  • list.highlightForeground#886ca6
  • list.hoverBackground#352d35
  • list.inactiveSelectionBackground#886ca63b
  • list.warningForeground#AD64B5
  • listFilterWidget.shadow#00000000
  • menu.background#1f1c1f
  • menu.border#454545
  • menu.foreground#DBD4CC
  • menu.separatorBackground#454545
  • minimap.errorHighlight#C66FB0
  • minimap.findMatchHighlight#c880b657
  • minimap.infoHighlight#886ca671
  • minimap.selectionHighlight#966ca683
  • minimap.warningHighlight#AD64B5
  • minimapSlider.activeBackground#886ca688
  • minimapSlider.background#886ca63b
  • minimapSlider.hoverBackground#886ca66e
  • notebookStatusErrorIcon.foreground#C66FB0
  • notificationCenterHeader.background#1f1c1f
  • notificationCenterHeader.foreground#DBD4CC
  • notifications.background#1f1c1f
  • notifications.border#2b2a2b
  • notifications.foreground#DBD4CC
  • notificationsErrorIcon.foreground#C66FB0
  • notificationsWarningIcon.foreground#AD64B5
  • panel.background#181718
  • panel.border#2b2a2b
  • panelInput.border#2b2a2b
  • panelTitle.activeBorder#886ca6
  • panelTitle.activeForeground#DBD4CC
  • panelTitle.inactiveForeground#9d9d9d
  • peekViewEditor.background#1f1c1f
  • peekViewEditor.matchHighlightBackground#dca6c942
  • peekViewResult.background#1f1c1f
  • peekViewResult.matchHighlightBackground#dca6c942
  • pickerGroup.border#3c3c3c
  • ports.iconRunningProcessForeground#369432
  • problemsWarningIcon.foreground#AD64B5
  • progressBar.background#886ca6
  • quickInput.background#222222
  • quickInput.foreground#DBD4CC
  • scrollbar.shadow#00000000
  • scrollbarSlider.activeBackground#886ca688
  • scrollbarSlider.background#886ca63b
  • scrollbarSlider.hoverBackground#886ca66e
  • settings.dropdownBackground#323130
  • settings.dropdownBorder#3c3c3c
  • settings.headerForeground#DBD4CC
  • settings.modifiedItemIndicator#e93497af
  • sideBar.background#181718
  • sideBar.border#2b2a2b
  • sideBar.foreground#DBD4CC
  • sideBarSectionHeader.background#181718
  • sideBarSectionHeader.border#2b2a2b
  • sideBarSectionHeader.foreground#DBD4CC
  • sideBarTitle.foreground#DBD4CC
  • statusBar.background#181718
  • statusBar.border#2b2a2b
  • statusBar.debuggingBackground#886ca6
  • statusBar.debuggingForeground#DBD4CC
  • statusBar.focusBorder#886ca6
  • statusBar.foreground#DBD4CC
  • statusBar.noFolderBackground#1f1c1f
  • statusBarItem.focusBorder#886ca6
  • statusBarItem.prominentBackground#6e768166
  • statusBarItem.remoteBackground#886ca6
  • statusBarItem.remoteForeground#DBD4CC
  • statusBarItem.warningBackground#AD64B5
  • tab.activeBackground#1f1c1f
  • tab.activeBorder#1f1c1f
  • tab.activeBorderTop#886ca6
  • tab.activeForeground#DBD4CC
  • tab.border#2b2a2b00
  • tab.hoverBackground#352d35
  • tab.inactiveBackground#181718
  • tab.inactiveForeground#aba49b91
  • tab.lastPinnedBorder#DBD4CC33
  • tab.unfocusedActiveBorder#1f1c1f
  • tab.unfocusedActiveBorderTop#2b2a2b
  • tab.unfocusedHoverBackground#352d35
  • terminal.ansiBlue#886CA6
  • terminal.foreground#DBD4CC
  • terminal.inactiveSelectionBackground#352d35
  • terminal.tab.activeBorder#886ca6
  • terminalCommandDecoration.errorBackground#C66FB0
  • testing.iconErrored#C66FB0
  • testing.message.error.decorationForeground#C66FB0
  • textBlockQuote.background#2b2a2b
  • textBlockQuote.border#5c4b60
  • textCodeBlock.background#2b2a2b
  • textLink.activeForeground#886ca6
  • textLink.foreground#886ca6
  • textPreformat.background#3c3c3c
  • textPreformat.foreground#d0d0d0
  • textSeparator.foreground#21262d
  • titleBar.activeBackground#181718
  • titleBar.activeForeground#DBD4CC
  • titleBar.border#2b2a2b
  • titleBar.inactiveBackground#1f1c1f
  • titleBar.inactiveForeground#9d9d9d
  • welcomePage.progress.foreground#886ca6
  • welcomePage.tileBackground#2b2a2b
  • widget.border#323130
  • widget.shadow#00000000

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
meta.embedded, source.groovy.embedded, string meta.image.inline.markdown, variable.legacy.builtin.python#E5D4C1
emphasisitalic
strongbold
header#000080
constant.numeric, variable.other.enummember, keyword.operator.plus.exponent, keyword.operator.minus.exponent#B5CEA8
constant.regexp#646695
entity.name.tag#569CD6
entity.name.tag.css, entity.name.tag.less#B5CEA8
entity.other.attribute-name#9CDCFE
entity.other.attribute-name.class.css, source.css entity.other.attribute-name.class, entity.other.attribute-name.id.css, entity.other.attribute-name.parent-selector.css, entity.other.attribute-name.parent.less, source.css entity.other.attribute-name.pseudo-class, entity.other.attribute-name.pseudo-element.css, source.css.less entity.other.attribute-name.id, entity.other.attribute-name.scss#B5CEA8
invalid#C66FB0
markup.underlineunderline
markup.bold#886CA6bold
markup.heading#886CA6bold
markup.italicitalic
markup.strikethroughstrikethrough
markup.inserted#B5CEA8
markup.deleted#CE9178
markup.changed#886CA6
punctuation.definition.quote.begin.markdown#a4be97
punctuation.definition.list.begin.markdown#886CA6
markup.inline.raw#CE9178
punctuation.definition.tag#808080
meta.preprocessor, entity.name.function.preprocessor#CB81B9
meta.preprocessor.string#CE9178
meta.preprocessor.numeric#B5CEA8
meta.structure.dictionary.key.python#9CDCFE
meta.diff.header#569CD6
storage#A9DCD1
storage.type#A9DCD1
storage.modifier, keyword.operator.noexcept#CB81B9
string, meta.embedded.assembly#CE9178
string.tag#CE9178
string.value#CE9178
string.regexp#D16969
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded#569CD6
meta.template.expression#D4D4D4
support.type.vendored.property-name, support.type.property-name, source.css variable, source.coffee.embedded#E5D4C1
keyword#569CD6
keyword.control#569CD6
keyword.operator.comparison.python, keyword.operator#DEAAD3
keyword.operator.new, keyword.operator.expression, keyword.operator.cast, keyword.operator.sizeof, keyword.operator.alignof, keyword.operator.typeid, keyword.operator.alignas, keyword.operator.instanceof, keyword.operator.logical.python, keyword.operator.wordlike, keyword.control.flow#A886D0
keyword.other.unit#B5CEA8
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php#569CD6
constant.sha.git-rebase#B5CEA8
storage.modifier.import.java, variable.language.wildcard.java, storage.modifier.package.java, meta.package.java, storage.modifier.java#D9A7B3
variable.language#E5D4C1
support.class, support.type, entity.name.type, entity.name.namespace, entity.other.attribute, entity.name.scope-resolution, entity.name.class, storage.type.numeric.go, storage.type.byte.go, storage.type.boolean.go, storage.type.string.go, storage.type.uintptr.go, storage.type.error.go, storage.type.rune.go, storage.type.cs, storage.type.generic.cs, storage.type.modifier.cs, storage.type.variable.cs, storage.type.annotation.java, storage.type.generic.java, storage.type.java, storage.type.object.array.java, storage.type.primitive.array.java, storage.type.primitive.java, storage.type.token.java, storage.type.groovy, storage.type.annotation.groovy, storage.type.parameters.groovy, storage.type.generic.groovy, storage.type.object.array.groovy, storage.type.primitive.array.groovy, storage.type.primitive.groovy#4EC9B0
meta.type.cast.expr, meta.type.new.expr, support.constant.math, support.constant.dom, support.constant.json, entity.other.inherited-class#4EC9B0
keyword.control, source.cpp keyword.operator.new, keyword.operator.delete, keyword.other.using, keyword.other.directive.using, keyword.other.operator, entity.name.operator#DEAAD3
variable, meta.definition.variable.name, support.variable, entity.name.variable, constant.other.placeholder, source.python#E5D4C1
variable.other.constant, variable.other.enummember#E5D4C1
meta.object-literal.key#9CDCFE
support.constant.property-value, support.constant.font-name, support.constant.media-type, support.constant.media, constant.other.color.rgb-value, constant.other.rgb-value, support.constant.color#CE9178
punctuation.definition.group.regexp, punctuation.definition.group.assertion.regexp, punctuation.definition.character-class.regexp, punctuation.character.set.begin.regexp, punctuation.character.set.end.regexp, keyword.operator.negation.regexp, support.other.parenthesis.regexp#CB81B9
constant.character.character-class.regexp, constant.other.character-class.set.regexp, constant.other.character-class.regexp, constant.character.set.regexp#D0BFEB
keyword.operator.or.regexp, keyword.control.anchor.regexp#DCDCAA
keyword.operator.quantifier.regexp#B5CEA8
constant.character.escape#B5CEA8
entity.name.label#C8C8C8
meta.embedded, source.groovy.embedded, string.meta.image.inline.markdown, variable.legacy.builtin.python#E5D4C1
emphasisitalic
strongbold
header#750080
comment, punctuation.definition.comment.python#B48DC98E
constant.language, constant.language.c#CB81B9
constant.numeric, variable.other.enummember, keyword.operator.plus.exponent, keyword.operator.minus.exponent#B5CEA8
constant.regexp#646695
markup.underlineunderline
markup.bold#886CA6bold
markup.heading#886CA6bold
markup.italicitalic
markup.strikethroughstrikethrough
markup.inserted#B5CEA8
markup.deleted#CE9178
markup.changed#886CA6
punctuation.definition.quote.begin.markdown#6A9955
punctuation.definition.list.begin.markdown#886CA6
markup.inline.raw#CE9178
punctuation.definition.tag#808080
meta.preprocessor.string#78CE7F
meta.preprocessor.numeric#B5CEA8
meta.structure.dictionary.key.python#D8BFFF
string, meta.embedded.assembly, punctuation.definition.string.begin.python, punctuation.definition.string.end.python#D9A7B3
string.tag#CE9178
string.value#CE9178
string.regexp#D6A8A8
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded#D69F56
meta.template.expression#D4D4D4
support.type.vendored.property-name, support.type.property-name, source.css variable, source.coffee.embedded#E5D4C1
keyword#A886D0
keyword.control#D65F56
keyword.operator#A886D0
keyword.operator.new, keyword.operator.expression, keyword.operator.cast, keyword.operator.sizeof, keyword.operator.alignof, keyword.operator.typeid, keyword.operator.alignas, keyword.operator.instanceof, keyword.operator.logical.python, keyword.operator.wordlike#A886D0
keyword.other.unit#B5CEA8
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php#569CD6
meta.function-call.python, support.function.git-rebase#D8BFFF
constant.sha.git-rebase#CB81B9
variable.language#E5D4C1
entity.name.function, support.function, support.constant.handlebars, source.powershell variable.other.member, entity.name.operator.custom-literal, meta.function.python#D8BFFF
support.class, support.type, entity.name.type, entity.name.namespace, entity.other.attribute, entity.name.scope-resolution, entity.name.class, storage.type.numeric.go, storage.type.byte.go, storage.type.boolean.go, storage.type.string.go, storage.type.uintptr.go, storage.type.error.go, storage.type.rune.go, storage.type.cs, storage.type.generic.cs, storage.type.modifier.cs, storage.type.variable.cs, storage.type.annotation.java, storage.type.generic.java, storage.type.java, storage.type.object.array.java, storage.type.primitive.array.java, storage.type.primitive.java, storage.type.token.java, storage.type.groovy, storage.type.annotation.groovy, storage.type.parameters.groovy, storage.type.generic.groovy, storage.type.object.array.groovy, storage.type.primitive.array.groovy, storage.type.primitive.groovy#A9DCD1
keyword.control, source.cpp keyword.operator.new, keyword.operator.delete, keyword.other.using, keyword.other.directive.using, keyword.other.operator, entity.name.operator, storage.type.function.python, storage.type.class.python#A886D0
variable, meta.definition.variable.name, support.variable, entity.name.variable, constant.other.placeholder, meta.function-call.arguments.python#E5D4C1
meta.object-literal.key#D8BFFF
support.constant.property-value, support.constant.font-name, support.constant.media-type, support.constant.media, constant.other.color.rgb-value, constant.other.rgb-value, support.constant.color#CE9178
keyword.operator.quantifier.regexp#B5CEA8
constant.character, constant.other.option#CB81B9
constant.character.escape#B5CEA8
entity.name.label#C8C8C8
token.info-token#6796E6
token.warn-token#CD9731
token.error-token#F44747
token.debug-token#B267E6
punctuation#B1C5F1
constant.character.format.placeholder.other.python, meta.format.percent.python, constant.other.caps.python#CB81B9
method#E9D8C4
namespace, class, interface, struct#A9DCD1
typeParameter#C47DB2
type#D9B7B1
parameter#D8BFFF
Plurple by haretian - VS Code Theme