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.activeBackground#1B151370
  • activityBar.activeBorder#E46C4E
  • activityBar.background#0E0C0C
  • activityBar.foreground#ECE0DF
  • activityBar.inactiveForeground#4C5A42
  • activityBarBadge.background#E2826A
  • activityBarBadge.foreground#121211
  • activityBarTop.foreground#ECE0DF
  • badge.background#E2826A
  • badge.foreground#121211
  • breadcrumb.activeForeground#ECE0DF
  • breadcrumb.activeSelectionForeground#ECE0DF
  • breadcrumb.background#0E0C0C
  • breadcrumb.focusForeground#ECE0DF
  • breadcrumb.foreground#4C5A42
  • breadcrumbPicker.background#0E0C0C
  • button.background#E2826Adb
  • button.foreground#121211
  • button.hoverBackground#E2826A
  • button.secondaryBackground#E46C4Edb
  • button.secondaryForeground#121211
  • button.secondaryHoverBackground#E46C4E
  • checkbox.background#0E0C0C
  • checkbox.foreground#ECE0DF
  • debugToolBar.background#6FA6DC
  • debugToolBar.foreground#121211
  • descriptionForeground#DCC7C1
  • diffEditor.diagonalFill#6FA6DC
  • diffEditor.insertedLineBackground#6FA6DC40
  • diffEditor.insertedTextBackground#6FA6DC50
  • diffEditor.insertedTextBorder#6FA6DC
  • diffEditor.removedLineBackground#E7646440
  • diffEditor.removedTextBackground#E7646450
  • diffEditor.removedTextBorder#E76464
  • diffEditorGutter.insertedLineBackground#6FA6DC
  • diffEditorGutter.removedLineBackground#E76464
  • disabledForeground#4C5A42
  • dropdown.background#1F1B19
  • dropdown.border#28231F
  • dropdown.foreground#ECE0DF
  • editor.background#0E0C0C
  • editor.findMatchBackground#543D2770
  • editor.findMatchForeground#ECE0DF
  • editor.findMatchHighlightBackground#1B151370
  • editor.findMatchHighlightForeground#ECE0DF
  • editor.findRangeHighlightBackground#3C272570
  • editor.foldBackground#1B151370
  • editor.foldPlaceholderForeground#ECE0DF
  • editor.foreground#ECE0DF
  • editor.hoverHighlightBackground#1B151370
  • editor.inactiveSelectionBackground#3C272570
  • editor.lineHighlightBackground#00000010
  • editor.placeholder.foreground#DCC7C1
  • editor.rangeHighlightBackground#1B151370
  • editor.selectionBackground#3C272570
  • editor.selectionForeground#ECE0DF
  • editor.selectionHighlightBackground#3C272570
  • editor.snippetFinalTabstopHighlightBackground#1B151370
  • editor.snippetTabstopHighlightBackground#1B151370
  • editor.symbolHighlightBackground#1B151370
  • editor.wordHighlightBackground#1B151370
  • editor.wordHighlightStrongBackground#1B151350
  • editor.wordHighlightTextBackground#1B151370
  • editorCodeLens.foreground#4C5A42
  • editorCursor.background#1B151370
  • editorCursor.foreground#E46C4E
  • editorError.foreground#E76464
  • editorGroup.border#28231F
  • editorGroup.dropBackground#1F1B19
  • editorGroup.emptyBackground#0E0C0C
  • editorGroupHeader.border#28231F
  • editorGroupHeader.tabsBackground#0E0C0C
  • editorGutter.addedBackground#2E9E2E
  • editorGutter.background#0E0C0C
  • editorGutter.commentRangeForeground#4C5A42
  • editorGutter.deletedBackground#E76464
  • editorGutter.modifiedBackground#6FA6DC
  • editorHint.foreground#2E9E2E
  • editorHoverWidget.background#0E0C0C
  • editorHoverWidget.border#28231F
  • editorHoverWidget.foreground#ECE0DF
  • editorHoverWidget.highlightForeground#ECE0DF
  • editorHoverWidget.statusBarBackground#0E0C0C
  • editorIndentGuide.activeBackground1#E46C4E
  • editorIndentGuide.background1#1B151370
  • editorInfo.foreground#6FA6DC
  • editorLineNumber.activeForeground#E46C4E
  • editorLineNumber.dimmedForeground#4C5A4290
  • editorLineNumber.foreground#4C5A42
  • editorLink.activeForeground#6FA6DC
  • editorMarkerNavigation.background#0E0C0C
  • editorMarkerNavigationError.background#0E0C0C
  • editorMarkerNavigationWarning.background#0E0C0C
  • editorMultiCursor.primary.background#1B151370
  • editorMultiCursor.primary.foreground#E46C4E
  • editorMultiCursor.secondary.background#1B151370
  • editorMultiCursor.secondary.foreground#ECE0DF
  • editorOverviewRuler.addedForeground#2E9E2E
  • editorOverviewRuler.border#28231F
  • editorOverviewRuler.commentForeground#4C5A42
  • editorOverviewRuler.commonContentForeground#ECE0DF
  • editorOverviewRuler.currentContentForeground#6FA6DC
  • editorOverviewRuler.deletedForeground#E76464
  • editorOverviewRuler.errorForeground#E76464
  • editorOverviewRuler.findMatchForeground#ECE0DF
  • editorOverviewRuler.incomingContentForeground#2E9E2E
  • editorOverviewRuler.infoForeground#6FA6DC
  • editorOverviewRuler.modifiedForeground#6FA6DC
  • editorOverviewRuler.rangeHighlightForeground#1B151370
  • editorOverviewRuler.selectionHighlightForeground#3C272570
  • editorOverviewRuler.warningForeground#E2A66A
  • editorOverviewRuler.wordHighlightForeground#1B151370
  • editorOverviewRuler.wordHighlightStrongForeground#1B151370
  • editorRuler.foreground#1B151370
  • editorSuggestWidget.background#0E0C0C
  • editorSuggestWidget.border#28231F
  • editorSuggestWidget.focusHighlightForeground#ECE0DF
  • editorSuggestWidget.foreground#4C5A42
  • editorSuggestWidget.highlightForeground#ECE0DF
  • editorSuggestWidget.selectedBackground#E2826A80
  • editorSuggestWidget.selectedForeground#ECE0DF
  • editorUnicodeHighlight.background#1B151370
  • editorWarning.foreground#E2A66A
  • editorWhitespace.foreground#1B151370
  • editorWidget.background#0E0C0C
  • editorWidget.border#28231F
  • editorWidget.foreground#ECE0DF
  • errorForeground#E76464
  • extensionButton.prominentBackground#E2826Aaa
  • extensionButton.prominentForeground#121211
  • extensionButton.prominentHoverBackground#E2826A
  • focusBorder#28231F
  • foreground#ECE0DF
  • gitDecoration.addedResourceForeground#2E9E2E
  • gitDecoration.conflictingResourceForeground#E2A66A
  • gitDecoration.deletedResourceForeground#E76464
  • gitDecoration.ignoredResourceForeground#4C5A42
  • gitDecoration.modifiedResourceForeground#6FA6DC
  • gitDecoration.renamedResourceForeground#E46C4E
  • gitDecoration.untrackedResourceForeground#DCC7C1
  • input.background#0E0C0C
  • input.border#4C5A42
  • input.foreground#ECE0DF
  • input.placeholderForeground#4C5A42
  • inputOption.activeBorder#E46C4E
  • inputValidation.errorBorder#E76464
  • inputValidation.infoBorder#6FA6DC
  • inputValidation.warningBorder#E2A66A
  • list.activeSelectionBackground#E2826A70
  • list.activeSelectionForeground#ECE0DF
  • list.dropBackground#1F1B19
  • list.dropBetweenBackground#28231F
  • list.errorForeground#E76464
  • list.focusBackground#E2826A50
  • list.focusForeground#ECE0DF
  • list.highlightForeground#E46C4E
  • list.hoverBackground#E2826A20
  • list.hoverForeground#ECE0DF
  • list.inactiveFocusBackground#0E0C0C
  • list.inactiveSelectionBackground#E2826A60
  • list.inactiveSelectionForeground#DCC7C1
  • list.warningForeground#E2A66A
  • listFilterWidget.background#1F1B19
  • listFilterWidget.noMatchesOutline#E76464
  • listFilterWidget.outline#28231F
  • merge.border#28231F
  • merge.currentContentBackground#6FA6DC20
  • merge.currentHeaderBackground#6FA6DC40
  • merge.incomingContentBackground#2E9E2E20
  • merge.incomingHeaderBackground#2E9E2E40
  • mergeEditor.change.background#E2A66A
  • notificationLink.foreground#6FA6DC
  • notifications.background#0E0C0C
  • notifications.border#28231F
  • notifications.foreground#ECE0DF
  • notificationsErrorIcon.foreground#E76464
  • notificationsInfoIcon.foreground#6FA6DC
  • notificationsWarningIcon.foreground#E2A66A
  • panel.background#0E0C0C
  • panel.border#E46C4E
  • panelInput.border#4C5A42
  • panelTitle.activeBorder#E46C4E
  • panelTitle.activeForeground#ECE0DF
  • panelTitle.inactiveForeground#4C5A42
  • peekView.border#E2826A
  • peekViewEditor.background#0E0C0C
  • peekViewEditor.matchHighlightBackground#543D2770
  • peekViewResult.background#0E0C0C
  • peekViewResult.fileForeground#ECE0DF
  • peekViewResult.lineForeground#ECE0DF
  • peekViewResult.matchHighlightBackground#1B151370
  • peekViewResult.selectionBackground#0E0C0C
  • peekViewResult.selectionForeground#ECE0DF
  • peekViewTitle.background#0E0C0C
  • peekViewTitleDescription.foreground#DCC7C1
  • peekViewTitleLabel.foreground#ECE0DF
  • pickerGroup.border#E2826A
  • pickerGroup.foreground#CBE9B4
  • progressBar.background#E46C4E
  • selection.background#E2826A50
  • settings.checkboxBackground#0E0C0C
  • settings.checkboxBorder#28231F
  • settings.checkboxForeground#ECE0DF
  • settings.dropdownBackground#0E0C0C
  • settings.dropdownBorder#28231F
  • settings.dropdownForeground#ECE0DF
  • settings.focusedRowBackground#1B151370
  • settings.focusedRowBorder#4C5A42
  • settings.headerBorder#28231F
  • settings.headerForeground#ECE0DF
  • settings.inactiveSelectedItemBorder#4C5A42
  • settings.modifiedItemIndicator#E2A66A
  • settings.numberInputBackground#0E0C0C
  • settings.numberInputBorder#4C5A42
  • settings.numberInputForeground#ECE0DF
  • settings.rowHoverBackground#1B151370
  • settings.settingsHeaderHoverForeground#ECE0DF
  • settings.textInputBackground#0E0C0C
  • settings.textInputBorder#4C5A42
  • settings.textInputForeground#ECE0DF
  • sideBar.background#0E0C0C
  • sideBarActivityBarTop.border#28231F
  • sideBarSectionHeader.background#0E0C0C
  • sideBarSectionHeader.border#28231F
  • sideBarStickyScroll.background#0E0C0C
  • sideBarStickyScroll.border#28231F
  • sideBarStickyScroll.shadow#28231F
  • sideBarTitle.background#0E0C0C
  • sideBarTitle.foreground#ECE0DF
  • statusBar.background#E2826A
  • statusBar.debuggingBackground#E2A66A
  • statusBar.debuggingForeground#121211
  • statusBar.foreground#121211
  • statusBar.noFolderBackground#DCC7C1
  • statusBar.noFolderForeground#121211
  • statusBarItem.activeBackground#E2826Aaa
  • statusBarItem.errorBackground#E76464
  • statusBarItem.errorForeground#ECE0DF
  • statusBarItem.errorHoverBackground#E76464aa
  • statusBarItem.hoverBackground#E2826Aaa
  • statusBarItem.prominentBackground#E2826Aaa
  • statusBarItem.prominentForeground#121211
  • statusBarItem.prominentHoverBackground#E2826Aaa
  • statusBarItem.prominentHoverForeground#121211
  • statusBarItem.remoteBackground#E46C4E
  • statusBarItem.remoteForeground#121211
  • statusBarItem.remoteHoverBackground#E46C4Eaa
  • statusBarItem.warningBackground#E2A66A
  • statusBarItem.warningForeground#121211
  • statusBarItem.warningHoverBackground#E2A66Aaa
  • tab.activeBackground#0E0C0C
  • tab.activeBorderTop#E46C4E
  • tab.activeForeground#ECE0DF
  • tab.border#28231F
  • tab.hoverBackground#0E0C0C80
  • tab.hoverForeground#ECE0DF
  • tab.inactiveBackground#0E0C0C
  • tab.inactiveForeground#4C5A42
  • tab.selectedBackground#1B151370
  • terminal.ansiBlack#000000
  • terminal.ansiBlue#9D71F0
  • terminal.ansiBrightBlack#3C3C3C
  • terminal.ansiBrightBlue#EEE5FF
  • terminal.ansiBrightCyan#E5FFF7
  • terminal.ansiBrightGreen#BCFF83
  • terminal.ansiBrightMagenta#F6C7FF
  • terminal.ansiBrightRed#FCE5EA
  • terminal.ansiBrightWhite#FAF9F8
  • terminal.ansiBrightYellow#FFDC93
  • terminal.ansiCyan#91E7CB
  • terminal.ansiGreen#6ED219
  • terminal.ansiMagenta#CE50E5
  • terminal.ansiRed#CA5C70
  • terminal.ansiWhite#F3F2EB
  • terminal.ansiYellow#CD9115
  • terminal.background#0E0C0C
  • terminal.border#28231F
  • terminal.foreground#ECE0DF
  • terminal.inactiveSelectionBackground#3C272570
  • terminal.selectionBackground#3C272570
  • textBlockQuote.background#1F1B19
  • textBlockQuote.border#28231F
  • textCodeBlock.background#1F1B19
  • textLink.activeForeground#6FA6DC
  • textLink.foreground#E2826A
  • textPreformat.background#1F1B19
  • textPreformat.foreground#ECE0DF
  • textSeparator.foreground#ECE0DF
  • titleBar.activeBackground#0E0C0C
  • titleBar.activeForeground#ECE0DF
  • titleBar.inactiveBackground#0E0C0C
  • titleBar.inactiveForeground#4C5A42
  • widget.border#28231F

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
meta.tag, string#ECE0DF
meta.diff, meta.diff.header#4C5A42
meta.link.reference.def.restructuredtext, string.other.link.description, string.other.link.title#F3DCD3
emphasisitalic
strongbold
invalid#E76464strikethrough
invalid.deprecated#ECE0DFunderline italic
header#F3DCD3
source.ini, source.ignore, source#DCC7C1
markup.inserted#F3DCD3
markup.deleted#E76464
markup.changed#6FA6DC
markup.error#E76464
markup.underlineunderline
markup.bold#E2A66Abold
markup.heading#E46C4Ebold
markup.italic#DCC7C1italic
markup.inline.raw, markup.raw.restructuredtext#E46C4E
markup.underline.link, markup.underline.link.image, markup.quote#6FA6DC
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext#E2826A
meta.separator.markdown#E46C4E
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown#EED4C9
markup.heading.markdown punctuation.definition.string.begin, markup.heading.markdown punctuation.definition.string.end#E2A66A
entity.name.class, entity.name.type.class, entity.other.inherited-class#E2826A
entity.name.tag, entity.other.attribute-name.parent-selector#D9EFC8
entity.other.attribute-name#E2826A
entity.name.function, meta.function-call, meta.method-call, meta.method#E46C4E
meta.selector.css, meta.at-rule.function variable, meta.at-rule.mixin variable, variable.parameter, entity.name.variable.parameter#E3CCB5
support#E5A69F
entity.name, variable.other.key#E46C4E
entity.name.type#E7C1B1
entity.name.type.module, entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type#E2CBA7
entity.other.attribute-name, entity.other.attribute-name.pseudo-class.css#F0E0D6
entity.other.attribute-name.class.css#E46C4E
storage.class, storage.type#E2826A
storage.modifier#EBCAC2
comment, punctuation.definition.comment, unused.comment, wildcard.comment#4C5A42
constant#F3DCD3
constant.other.color#E8C6B0
constant.character.escape, constant.character.string.escape, constant.regexp, constant.language#E2AF8D
constant.other.date, constant.other.timestamp#ECD2C1
keyword.operator#E8D1CF
keyword.other.unit#E3A7A0
keyword.control, keyword.other.template, keyword.other.substitution#BAE49B
keyword.other.this#F3DCD3
keyword.control.import, keyword.control.from#C1DFB9
keyword.control.new, keyword.operator.new, keyword.other.important.css#E2826A
keyword.control.flow, keyword.control.loop, keyword.control.conditional, keyword.operator.logical, keyword.operator.relational, keyword.operator.comparison, keyword.operator.ternary#B2E7AC
meta.attribute-selector.scss#EFDECC
entity.name.tag.css, entity.name.tag.less, entity.name.tag.custom.css#D9EFC8
entity.name.tag.wildcard.css, entity.name.tag.wildcard.less, entity.name.tag.wildcard.scss, entity.name.tag.wildcard.sass#CFECC6
source.css support.type.property-name, source.sass support.type.property-name, source.scss support.type.property-name, source.less support.type.property-name, source.stylus support.type.property-name, source.postcss support.type.property-name#E2826A
support.constant.property-value.css, constant.numeric.css#DCC7C1
keyword.control.at-rule.apply.tailwind#C1DFB9
keyword.control.at-rule.tailwind.tailwind#BAE49B
keyword.control.at-rule.layer.tailwind#B2E7AC
meta.selector#EFDECC
punctuation.definition.string.begin, punctuation.definition.string.end, punctuation.support.type.property-name.begin, punctuation.support.type.property-name.end#EDE4E3
punctuation.definition.constant.restructuredtext#F3DCD3
string.quoted.docstring.multi#E46C4E
punctuation.definition.keyword.css, punctuation.section.property-list.begin.bracket.curly.css, punctuation.section.property-list.end.bracket.curly.css, punctuation.definition.attribute-selector.end.bracket.square.scss, punctuation.definition.attribute-selector.begin.bracket.square.scss#EDE4E3
punctuation, punctuation.definition.tag, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html#CFECC6
entity.other.attribute-name punctuation, meta.brace.square, meta.group.toml, meta.group.double.toml, punctuation.definition.block.scalar.folded.yaml, punctuation.definition.block.scalar.literal.yaml, punctuation.definition.block.sequence.item.yaml, punctuation.separator#F3F2EB
meta.brace.round, meta.function-call punctuation, punctuation.definition.arguments.begin, punctuation.definition.arguments.end, punctuation.definition.entity.begin, punctuation.definition.entity.end, punctuation.definition.type.begin, punctuation.definition.type.end, punctuation.section.scope.begin, punctuation.section.scope.end#E2D9D4
meta.string-contents.quoted.double punctuation.definition.variable, punctuation.definition.interpolation.begin, punctuation.definition.interpolation.end, punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded.begin, punctuation.section.embedded.end, punctuation.definition.variable.makefile#EBE3E0
punctuation.section.embedded.begin.tsx, punctuation.section.embedded.end.tsx, punctuation.section.embedded.begin.jsx, punctuation.section.embedded.end.jsx, punctuation.separator.list.comma.css#EFE8E6
punctuation.definition.directive.restructuredtext#F3DCD3
variable#CEE6BC
variable.other.alias.yaml#CEE6BCunderline
variable.language, variable.parameter.function.language.special#E2AF8D
variable.other.constant#D3EFD2
support.variable#CEE6BC
variable.other.property, support.variable.property, variable.object.property, variable.other.object.property#BFE3BA
support.function.magic, variable.other.predefined, storage.modifier.async, keyword.control.trycatch, keyword.control.trycatch.js, keyword.control.trycatch.ts#E2A66A
support.function, support.type.property-name#EDE2C9
storage#EDC9C5
string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp#CD9115
punctuation.definition.group.capture.regexp#CA5C70
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end#CA5C70
punctuation.definition.character-class.regexp#FFDC93
punctuation.definition.group.regexp#EEE5FF
punctuation.definition.group.assertion.regexp, keyword.operator.negation.regexp#CA5C70
meta.assertion.look-ahead.regexp#EEE5FF
source.json meta.structure.dictionary.json support.type.property-name.json#E46C4E
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#E2826A
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#6FA6DC
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#E2A66A
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#E76464
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#2E9E2E
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#E46C4E
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#E2826A
token.info-token#6FA6DC
token.warn-token#E2A66A
token.error-token#E76464
token.debug-token#E2A66A