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#7E649A
  • activityBar.background#1A171A
  • activityBar.border#2b2a2b
  • activityBar.foreground#E0DACE
  • activityBar.inactiveForeground#807c78
  • activityBarBadge.background#7E649A
  • activityBarBadge.foreground#D4CAB9
  • badge.background#5c4b60
  • badge.foreground#f8f8f8
  • button.background#7E649A
  • button.border#D4CAB912
  • button.foreground#D4CAB9
  • button.hoverBackground#635375
  • button.secondaryBackground#323130
  • button.secondaryForeground#D4CAB9
  • button.secondaryHoverBackground#3c3c3c
  • chat.slashCommandBackground#48344b
  • chat.slashCommandForeground#7E649A
  • checkbox.background#323130
  • checkbox.border#3c3c3c
  • debugConsole.errorForeground#c66fb0
  • debugConsole.warningForeground#ad64b5
  • debugExceptionWidget.background#412644
  • debugExceptionWidget.border#ad64b5
  • debugTokenExpression.error#c66fb0
  • debugToolBar.background#1A171A
  • descriptionForeground#9d9d9d
  • diffEditor.unchangedRegionShadow#00000000
  • dropdown.background#323130
  • dropdown.border#3c3c3c
  • dropdown.foreground#D4CAB9
  • dropdown.listBackground#241D24
  • editor.background#241D24
  • editor.findMatchBackground#dca6c946
  • editor.findMatchBorder#dca6c9b6
  • editor.findMatchHighlightBackground#dca6c946
  • editor.foreground#D4CAB9
  • editor.inactiveSelectionBackground#5346538c
  • editor.lineHighlightBorder#dca6c923
  • editor.selectionBackground#7E649A88
  • editor.selectionHighlightBackground#ecadff26
  • editorError.foreground#c66fb0
  • editorGroup.border#D4CAB900
  • editorGroupHeader.tabsBackground#1A171A
  • editorGroupHeader.tabsBorder#241D24
  • editorGutter.addedBackground#2ea043
  • editorGutter.deletedBackground#f85149
  • editorGutter.modifiedBackground#7E649A
  • editorIndentGuide.activeBackground1#707070
  • editorIndentGuide.background1#404040
  • editorLineNumber.activeForeground#D4CAB9
  • 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#7E649A99
  • editorOverviewRuler.warningForeground#ad64b5
  • editorStickyScroll.shadow#00000000
  • editorWarning.background#ad64b585
  • editorWarning.border#ad64b5
  • editorWarning.foreground#ad64b5
  • editorWidget.background#202020
  • errorForeground#c66fb0
  • focusBorder#7E649A
  • foreground#D4CAB9
  • icon.foreground#D4CAB9
  • inlineChat.shadow#00000000
  • input.background#323130
  • input.border#3c3c3c
  • input.foreground#D4CAB9
  • input.placeholderForeground#818181
  • inputOption.activeBackground#7E649A82
  • inputOption.activeBorder#7E649A
  • inputValidation.errorBackground#c66fb077
  • inputValidation.errorBorder#8a4a7a
  • inputValidation.warningBackground#311e2c
  • inputValidation.warningBorder#ad64b5
  • keybindingLabel.foreground#D4CAB9
  • list.activeSelectionBackground#5c4b60
  • list.activeSelectionForeground#D4CAB9
  • list.activeSelectionIconForeground#D4CAB9
  • list.dropBackground#383b3d
  • list.errorForeground#c66fb0
  • list.filterMatchBackground#dca6c955
  • list.focusHighlightForeground#7E649A
  • list.focusOutline#7E649A
  • list.highlightForeground#7E649A
  • list.hoverBackground#352d35
  • list.inactiveSelectionBackground#7E649A3b
  • list.warningForeground#ad64b5
  • listFilterWidget.shadow#00000000
  • menu.background#241D24
  • menu.border#454545
  • menu.foreground#D4CAB9
  • menu.separatorBackground#454545
  • minimap.errorHighlight#c66fb0
  • minimap.findMatchHighlight#c880b657
  • minimap.infoHighlight#7E649A71
  • minimap.selectionHighlight#966ca683
  • minimap.warningHighlight#ad64b5
  • minimapSlider.activeBackground#7E649A88
  • minimapSlider.background#7E649A3b
  • minimapSlider.hoverBackground#7E649A6e
  • notebookStatusErrorIcon.foreground#c66fb0
  • notificationCenterHeader.background#241D24
  • notificationCenterHeader.foreground#D4CAB9
  • notifications.background#241D24
  • notifications.border#2b2a2b
  • notifications.foreground#D4CAB9
  • notificationsErrorIcon.foreground#c66fb0
  • notificationsWarningIcon.foreground#ad64b5
  • panel.background#1A171A
  • panel.border#2b2a2b
  • panelInput.border#2b2a2b
  • panelTitle.activeBorder#7E649A
  • panelTitle.activeForeground#D4CAB9
  • panelTitle.inactiveForeground#9d9d9d
  • peekViewEditor.background#241D24
  • peekViewEditor.matchHighlightBackground#dca6c942
  • peekViewResult.background#241D24
  • peekViewResult.matchHighlightBackground#dca6c942
  • pickerGroup.border#3c3c3c
  • ports.iconRunningProcessForeground#369432
  • problemsWarningIcon.foreground#ad64b5
  • progressBar.background#7E649A
  • quickInput.background#222222
  • quickInput.foreground#D4CAB9
  • scrollbar.shadow#00000000
  • scrollbarSlider.activeBackground#7E649A88
  • scrollbarSlider.background#7E649A3b
  • scrollbarSlider.hoverBackground#7E649A6e
  • settings.dropdownBackground#323130
  • settings.dropdownBorder#3c3c3c
  • settings.headerForeground#D4CAB9
  • settings.modifiedItemIndicator#e93497af
  • sideBar.background#1A171A
  • sideBar.border#2b2a2b
  • sideBar.foreground#D4CAB9
  • sideBarSectionHeader.background#1A171A
  • sideBarSectionHeader.border#2b2a2b
  • sideBarSectionHeader.foreground#D4CAB9
  • sideBarTitle.foreground#D4CAB9
  • statusBar.background#1A171A
  • statusBar.border#2b2a2b
  • statusBar.debuggingBackground#7E649A
  • statusBar.debuggingForeground#D4CAB9
  • statusBar.focusBorder#7E649A
  • statusBar.foreground#D4CAB9
  • statusBar.noFolderBackground#241D24
  • statusBarItem.focusBorder#7E649A
  • statusBarItem.prominentBackground#6e768166
  • statusBarItem.remoteBackground#7E649A
  • statusBarItem.remoteForeground#D4CAB9
  • statusBarItem.warningBackground#ad64b5
  • tab.activeBackground#241D24
  • tab.activeBorder#241D24
  • tab.activeBorderTop#7E649A
  • tab.activeForeground#D4CAB9
  • tab.border#2b2a2b00
  • tab.hoverBackground#352d35
  • tab.inactiveBackground#1A171A
  • tab.inactiveForeground#aba49b91
  • tab.lastPinnedBorder#D4CAB933
  • tab.unfocusedActiveBorder#241D24
  • tab.unfocusedActiveBorderTop#2b2a2b
  • tab.unfocusedHoverBackground#352d35
  • terminal.ansiBlue#7E649A
  • terminal.foreground#D4CAB9
  • terminal.inactiveSelectionBackground#352d35
  • terminal.tab.activeBorder#7E649A
  • terminalCommandDecoration.errorBackground#c66fb0
  • testing.iconErrored#c66fb0
  • testing.message.error.decorationForeground#c66fb0
  • textBlockQuote.background#2b2a2b
  • textBlockQuote.border#5c4b60
  • textCodeBlock.background#2b2a2b
  • textLink.activeForeground#7E649A
  • textLink.foreground#7E649A
  • textPreformat.background#3c3c3c
  • textPreformat.foreground#d0d0d0
  • textSeparator.foreground#21262d
  • titleBar.activeBackground#1A171A
  • titleBar.activeForeground#D4CAB9
  • titleBar.border#2b2a2b
  • titleBar.inactiveBackground#241D24
  • titleBar.inactiveForeground#9d9d9d
  • welcomePage.progress.foreground#7E649A
  • 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#D4CAB9
emphasisitalic
strongbold
header#000080
constant.numeric, variable.other.enummember, keyword.operator.plus.exponent, keyword.operator.minus.exponent#B5CEA8
constant.regexp#646695
entity.name.tag#A9DCD1
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#F44747
markup.underlineunderline
markup.bold#7E649Abold
markup.heading#7E649Abold
markup.italicitalic
markup.strikethroughstrikethrough
markup.inserted#B5CEA8
markup.deleted#CB81B9
markup.changed#7E649A
punctuation.definition.quote.begin.markdown#A4BE97
punctuation.definition.list.begin.markdown#7E649A
markup.inline.raw#CB81B9
punctuation.definition.tag#808080
meta.preprocessor, entity.name.function.preprocessor#C368AC
meta.preprocessor.string#CB81B9
meta.preprocessor.numeric#B5CEA8
meta.structure.dictionary.key.python#9CDCFE
meta.diff.header#A9DCD1
storage#A9DCD1
storage.type#A9DCD1
string, meta.embedded.assembly#CB81B9
string.tag#CB81B9
string.value#CB81B9
string.regexp#D0BFEB
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded#A9DCD1
meta.template.expression#D4D4D4
support.type.vendored.property-name, support.type.property-name, source.css variable, source.coffee.embedded#D4CAB9
keyword#A9DCD1
keyword.control#A9DCD1
keyword.operator.comparison.python, keyword.operator#D287C2
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#A98ACD
keyword.other.unit#B5CEA8
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php#A9DCD1
constant.sha.git-rebase#B5CEA8
storage.modifier.import.java, variable.language.wildcard.java, storage.modifier.package.java, meta.package.java, storage.modifier.java#CB8D9C
variable.language#D4CAB9
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#D287C2
variable, meta.definition.variable.name, support.variable, entity.name.variable, constant.other.placeholder, source.python#D4CAB9
variable.other.constant, variable.other.enummember#D4CAB9
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#CB81B9
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.quantifier.regexp#b5cea8
constant.character, constant.other.option#A9DCD1
entity.name.label#C8C8C8
meta.embedded, source.groovy.embedded, string.meta.image.inline.markdown, variable.legacy.builtin.python#D4CAB9
emphasisitalic
strongbold
header#750080
comment, punctuation.definition.comment.python#b48dc9a6
constant.language, constant.language.c#C368AC
constant.numeric, variable.other.enummember, keyword.operator.plus.exponent, keyword.operator.minus.exponent#B5CEA8
constant.regexp#646695
invalid#F44747
markup.underlineunderline
markup.bold#7E649Abold
markup.heading#7E649Abold
markup.italicitalic
markup.strikethroughstrikethrough
markup.inserted#B5CEA8
markup.deleted#CB81B9
markup.changed#7E649A
punctuation.definition.quote.begin.markdown#6A9955
punctuation.definition.list.begin.markdown#7E649A
markup.inline.raw#CB81B9
punctuation.definition.tag#808080
meta.structure.dictionary.key.python#BAA3DE
meta.diff.header#A9DCD1
storage.modifier, keyword.operator.noexcept#C368AC
string, meta.embedded.assembly, punctuation.definition.string.begin.python, punctuation.definition.string.end.python#CB8D9C
string.tag#CB81B9
string.value#CB81B9
string.regexp#D0BFEB
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#D4CAB9
keyword#A98ACD
keyword.control#D65F56
keyword.operator#A98ACD
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#A98ACD
keyword.other.unit#B5CEA8
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php#A9DCD1
meta.function-call.python, support.function.git-rebase#BAA3DE
constant.sha.git-rebase#C368AC
variable.language#D4CAB9
entity.name.function, support.function, support.constant.handlebars, source.powershell variable.other.member, entity.name.operator.custom-literal, meta.function.python#BAA3DE
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#99cfc4
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#A98ACD
variable, meta.definition.variable.name, support.variable, entity.name.variable, constant.other.placeholder, meta.function-call.arguments.python#D4CAB9
meta.object-literal.key#BAA3DE
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#CB81B9
keyword.operator.or.regexp, keyword.control.anchor.regexp#A98ACD
keyword.operator.quantifier.regexp#b5cea8
constant.character, constant.other.option#D6A356
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#A3B9E8
constant.character.format.placeholder.other.python, meta.format.percent.python, constant.other.caps.python#C368AC
method, meta.method#D4CAB9
namespace, class, interface, struct#99cfc4
typeParameter#C47DB2
type#CB988F
parameter#BAA3DE