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#24241E70
  • activityBar.activeBorder#C0BF72
  • activityBar.background#1D1B1C
  • activityBar.foreground#E0E0D6
  • activityBar.inactiveForeground#67675D
  • activityBarBadge.background#86C5A5
  • activityBarBadge.foreground#1C1C1C
  • activityBarTop.foreground#E0E0D6
  • badge.background#86C5A5
  • badge.foreground#1C1C1C
  • breadcrumb.activeForeground#E0E0D6
  • breadcrumb.activeSelectionForeground#E0E0D6
  • breadcrumb.background#1D1B1C
  • breadcrumb.focusForeground#E0E0D6
  • breadcrumb.foreground#67675D
  • breadcrumbPicker.background#1D1B1C
  • button.background#86C5A5db
  • button.foreground#1C1C1C
  • button.hoverBackground#86C5A5
  • button.secondaryBackground#C0BF72db
  • button.secondaryForeground#1C1C1C
  • button.secondaryHoverBackground#C0BF72
  • checkbox.background#161618
  • checkbox.foreground#E0E0D6
  • debugToolBar.background#89A6C2
  • debugToolBar.foreground#1C1C1C
  • descriptionForeground#D3D3C5
  • diffEditor.diagonalFill#89A6C2
  • diffEditor.insertedLineBackground#89A6C240
  • diffEditor.insertedTextBackground#89A6C250
  • diffEditor.insertedTextBorder#89A6C2
  • diffEditor.removedLineBackground#C8838340
  • diffEditor.removedTextBackground#C8838350
  • diffEditor.removedTextBorder#C88383
  • diffEditorGutter.insertedLineBackground#89A6C2
  • diffEditorGutter.removedLineBackground#C88383
  • disabledForeground#67675D
  • dropdown.background#393932
  • dropdown.border#31312B
  • dropdown.foreground#E0E0D6
  • editor.background#161618
  • editor.findMatchBackground#55553A70
  • editor.findMatchForeground#E0E0D6
  • editor.findMatchHighlightBackground#24241E70
  • editor.findMatchHighlightForeground#E0E0D6
  • editor.findRangeHighlightBackground#42423370
  • editor.foldBackground#24241E70
  • editor.foldPlaceholderForeground#E0E0D6
  • editor.foreground#E0E0D6
  • editor.hoverHighlightBackground#24241E70
  • editor.inactiveSelectionBackground#42423370
  • editor.lineHighlightBackground#00000010
  • editor.placeholder.foreground#D3D3C5
  • editor.rangeHighlightBackground#24241E70
  • editor.selectionBackground#42423370
  • editor.selectionForeground#E0E0D6
  • editor.selectionHighlightBackground#42423370
  • editor.snippetFinalTabstopHighlightBackground#24241E70
  • editor.snippetTabstopHighlightBackground#24241E70
  • editor.symbolHighlightBackground#24241E70
  • editor.wordHighlightBackground#24241E70
  • editor.wordHighlightStrongBackground#24241E50
  • editor.wordHighlightTextBackground#24241E70
  • editorCodeLens.foreground#67675D
  • editorCursor.background#24241E70
  • editorCursor.foreground#C0BF72
  • editorError.foreground#C88383
  • editorGroup.border#31312B
  • editorGroup.dropBackground#393932
  • editorGroup.emptyBackground#161618
  • editorGroupHeader.border#31312B
  • editorGroupHeader.tabsBackground#161618
  • editorGutter.addedBackground#4D944D
  • editorGutter.background#161618
  • editorGutter.commentRangeForeground#67675D
  • editorGutter.deletedBackground#C88383
  • editorGutter.modifiedBackground#89A6C2
  • editorHint.foreground#4D944D
  • editorHoverWidget.background#161618
  • editorHoverWidget.border#31312B
  • editorHoverWidget.foreground#E0E0D6
  • editorHoverWidget.highlightForeground#E0E0D6
  • editorHoverWidget.statusBarBackground#161618
  • editorIndentGuide.activeBackground1#C0BF72
  • editorIndentGuide.background1#24241E70
  • editorInfo.foreground#89A6C2
  • editorLineNumber.activeForeground#C0BF72
  • editorLineNumber.dimmedForeground#67675D90
  • editorLineNumber.foreground#67675D
  • editorLink.activeForeground#89A6C2
  • editorMarkerNavigation.background#1D1B1C
  • editorMarkerNavigationError.background#1D1B1C
  • editorMarkerNavigationWarning.background#1D1B1C
  • editorMultiCursor.primary.background#24241E70
  • editorMultiCursor.primary.foreground#C0BF72
  • editorMultiCursor.secondary.background#24241E70
  • editorMultiCursor.secondary.foreground#E0E0D6
  • editorOverviewRuler.addedForeground#4D944D
  • editorOverviewRuler.border#31312B
  • editorOverviewRuler.commentForeground#67675D
  • editorOverviewRuler.commonContentForeground#E0E0D6
  • editorOverviewRuler.currentContentForeground#89A6C2
  • editorOverviewRuler.deletedForeground#C88383
  • editorOverviewRuler.errorForeground#C88383
  • editorOverviewRuler.findMatchForeground#E0E0D6
  • editorOverviewRuler.incomingContentForeground#4D944D
  • editorOverviewRuler.infoForeground#89A6C2
  • editorOverviewRuler.modifiedForeground#89A6C2
  • editorOverviewRuler.rangeHighlightForeground#24241E70
  • editorOverviewRuler.selectionHighlightForeground#42423370
  • editorOverviewRuler.warningForeground#C5A686
  • editorOverviewRuler.wordHighlightForeground#24241E70
  • editorOverviewRuler.wordHighlightStrongForeground#24241E70
  • editorRuler.foreground#24241E70
  • editorSuggestWidget.background#161618
  • editorSuggestWidget.border#31312B
  • editorSuggestWidget.focusHighlightForeground#E0E0D6
  • editorSuggestWidget.foreground#67675D
  • editorSuggestWidget.highlightForeground#E0E0D6
  • editorSuggestWidget.selectedBackground#86C5A580
  • editorSuggestWidget.selectedForeground#E0E0D6
  • editorUnicodeHighlight.background#24241E70
  • editorWarning.foreground#C5A686
  • editorWhitespace.foreground#24241E70
  • editorWidget.background#161618
  • editorWidget.border#31312B
  • editorWidget.foreground#E0E0D6
  • errorForeground#C88383
  • extensionButton.prominentBackground#86C5A5aa
  • extensionButton.prominentForeground#1C1C1C
  • extensionButton.prominentHoverBackground#86C5A5
  • focusBorder#31312B
  • foreground#E0E0D6
  • gitDecoration.addedResourceForeground#4D944D
  • gitDecoration.conflictingResourceForeground#C5A686
  • gitDecoration.deletedResourceForeground#C88383
  • gitDecoration.ignoredResourceForeground#67675D
  • gitDecoration.modifiedResourceForeground#89A6C2
  • gitDecoration.renamedResourceForeground#C0BF72
  • gitDecoration.untrackedResourceForeground#D3D3C5
  • input.background#161618
  • input.border#67675D
  • input.foreground#E0E0D6
  • input.placeholderForeground#67675D
  • inputOption.activeBorder#C0BF72
  • inputValidation.errorBorder#C88383
  • inputValidation.infoBorder#89A6C2
  • inputValidation.warningBorder#C5A686
  • list.activeSelectionBackground#86C5A570
  • list.activeSelectionForeground#E0E0D6
  • list.dropBackground#393932
  • list.dropBetweenBackground#31312B
  • list.errorForeground#C88383
  • list.focusBackground#86C5A550
  • list.focusForeground#E0E0D6
  • list.highlightForeground#C0BF72
  • list.hoverBackground#86C5A520
  • list.hoverForeground#E0E0D6
  • list.inactiveFocusBackground#1D1B1C
  • list.inactiveSelectionBackground#86C5A560
  • list.inactiveSelectionForeground#D3D3C5
  • list.warningForeground#C5A686
  • listFilterWidget.background#393932
  • listFilterWidget.noMatchesOutline#C88383
  • listFilterWidget.outline#31312B
  • merge.border#31312B
  • merge.currentContentBackground#89A6C220
  • merge.currentHeaderBackground#89A6C240
  • merge.incomingContentBackground#4D944D20
  • merge.incomingHeaderBackground#4D944D40
  • mergeEditor.change.background#C5A686
  • notificationLink.foreground#89A6C2
  • notifications.background#1D1B1C
  • notifications.border#31312B
  • notifications.foreground#E0E0D6
  • notificationsErrorIcon.foreground#C88383
  • notificationsInfoIcon.foreground#89A6C2
  • notificationsWarningIcon.foreground#C5A686
  • panel.background#1D1B1C
  • panel.border#C0BF72
  • panelInput.border#67675D
  • panelTitle.activeBorder#C0BF72
  • panelTitle.activeForeground#E0E0D6
  • panelTitle.inactiveForeground#67675D
  • peekView.border#86C5A5
  • peekViewEditor.background#161618
  • peekViewEditor.matchHighlightBackground#55553A70
  • peekViewResult.background#161618
  • peekViewResult.fileForeground#E0E0D6
  • peekViewResult.lineForeground#E0E0D6
  • peekViewResult.matchHighlightBackground#24241E70
  • peekViewResult.selectionBackground#1D1B1C
  • peekViewResult.selectionForeground#E0E0D6
  • peekViewTitle.background#161618
  • peekViewTitleDescription.foreground#D3D3C5
  • peekViewTitleLabel.foreground#E0E0D6
  • pickerGroup.border#86C5A5
  • pickerGroup.foreground#F1F0B7
  • progressBar.background#C0BF72
  • selection.background#86C5A550
  • settings.checkboxBackground#161618
  • settings.checkboxBorder#31312B
  • settings.checkboxForeground#E0E0D6
  • settings.dropdownBackground#161618
  • settings.dropdownBorder#31312B
  • settings.dropdownForeground#E0E0D6
  • settings.focusedRowBackground#24241E70
  • settings.focusedRowBorder#67675D
  • settings.headerBorder#31312B
  • settings.headerForeground#E0E0D6
  • settings.inactiveSelectedItemBorder#67675D
  • settings.modifiedItemIndicator#C5A686
  • settings.numberInputBackground#161618
  • settings.numberInputBorder#67675D
  • settings.numberInputForeground#E0E0D6
  • settings.rowHoverBackground#24241E70
  • settings.settingsHeaderHoverForeground#E0E0D6
  • settings.textInputBackground#161618
  • settings.textInputBorder#67675D
  • settings.textInputForeground#E0E0D6
  • sideBar.background#161618
  • sideBarActivityBarTop.border#31312B
  • sideBarSectionHeader.background#1D1B1C
  • sideBarSectionHeader.border#31312B
  • sideBarStickyScroll.background#161618
  • sideBarStickyScroll.border#31312B
  • sideBarStickyScroll.shadow#31312B
  • sideBarTitle.background#161618
  • sideBarTitle.foreground#E0E0D6
  • statusBar.background#86C5A5
  • statusBar.debuggingBackground#C5A686
  • statusBar.debuggingForeground#1C1C1C
  • statusBar.foreground#1C1C1C
  • statusBar.noFolderBackground#D3D3C5
  • statusBar.noFolderForeground#1C1C1C
  • statusBarItem.activeBackground#86C5A5aa
  • statusBarItem.errorBackground#C88383
  • statusBarItem.errorForeground#1C1C1C
  • statusBarItem.errorHoverBackground#C88383aa
  • statusBarItem.hoverBackground#86C5A5aa
  • statusBarItem.prominentBackground#86C5A5aa
  • statusBarItem.prominentForeground#1C1C1C
  • statusBarItem.prominentHoverBackground#86C5A5aa
  • statusBarItem.prominentHoverForeground#1C1C1C
  • statusBarItem.remoteBackground#C0BF72
  • statusBarItem.remoteForeground#1C1C1C
  • statusBarItem.remoteHoverBackground#C0BF72aa
  • statusBarItem.warningBackground#C5A686
  • statusBarItem.warningForeground#1C1C1C
  • statusBarItem.warningHoverBackground#C5A686aa
  • tab.activeBackground#1D1B1C
  • tab.activeBorderTop#C0BF72
  • tab.activeForeground#E0E0D6
  • tab.border#31312B
  • tab.hoverBackground#1D1B1C80
  • tab.hoverForeground#E0E0D6
  • tab.inactiveBackground#161618
  • tab.inactiveForeground#67675D
  • tab.selectedBackground#24241E70
  • terminal.ansiBlack#000000
  • terminal.ansiBlue#667AD3
  • terminal.ansiBrightBlack#373737
  • terminal.ansiBrightBlue#92A3EC
  • terminal.ansiBrightCyan#63DFE5
  • terminal.ansiBrightGreen#A0DC73
  • terminal.ansiBrightMagenta#E7B7ED
  • terminal.ansiBrightRed#FC9FA6
  • terminal.ansiBrightWhite#F9F8F8
  • terminal.ansiBrightYellow#E5BD8E
  • terminal.ansiCyan#3C9195
  • terminal.ansiGreen#678A4D
  • terminal.ansiMagenta#A874AE
  • terminal.ansiRed#DB4E59
  • terminal.ansiWhite#FDFCFB
  • terminal.ansiYellow#A0805B
  • terminal.background#161618
  • terminal.border#31312B
  • terminal.foreground#E0E0D6
  • terminal.inactiveSelectionBackground#42423370
  • terminal.selectionBackground#42423370
  • textBlockQuote.background#393932
  • textBlockQuote.border#31312B
  • textCodeBlock.background#393932
  • textLink.activeForeground#89A6C2
  • textLink.foreground#86C5A5
  • textPreformat.background#393932
  • textPreformat.foreground#E0E0D6
  • textSeparator.foreground#E0E0D6
  • titleBar.activeBackground#1D1B1C
  • titleBar.activeForeground#E0E0D6
  • titleBar.inactiveBackground#1D1B1C
  • titleBar.inactiveForeground#67675D
  • widget.border#31312B

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
meta.tag, string#E0E0D6
meta.diff, meta.diff.header#67675D
meta.link.reference.def.restructuredtext, string.other.link.description, string.other.link.title#BEF4D8
emphasisitalic
strongbold
invalid#C88383strikethrough
invalid.deprecated#E0E0D6underline italic
header#BEF4D8
source.ini, source.ignore, source#D3D3C5
markup.inserted#BEF4D8
markup.deleted#C88383
markup.changed#89A6C2
markup.error#C88383
markup.underlineunderline
markup.bold#C5A686bold
markup.heading#C0BF72bold
markup.italic#D3D3C5italic
markup.inline.raw, markup.raw.restructuredtext#C0BF72
markup.underline.link, markup.underline.link.image, markup.quote#89A6C2
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext#86C5A5
meta.separator.markdown#C0BF72
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown#EEEDB0
markup.heading.markdown punctuation.definition.string.begin, markup.heading.markdown punctuation.definition.string.end#C5A686
entity.name.class, entity.name.type.class, entity.other.inherited-class#86C5A5
entity.name.tag, entity.other.attribute-name.parent-selector#BFC0F2
entity.other.attribute-name#86C5A5
entity.name.function, meta.function-call, meta.method-call, meta.method#C0BF72
meta.selector.css, meta.at-rule.function variable, meta.at-rule.mixin variable, variable.parameter, entity.name.variable.parameter#EDECC0
support#8EEBBB
entity.name, variable.other.key#C0BF72
entity.name.type#F0BCD7
entity.name.type.module, entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type#EAA9BA
entity.other.attribute-name, entity.other.attribute-name.pseudo-class.css#F4D7E6
entity.other.attribute-name.class.css#C0BF72
storage.class, storage.type#86C5A5
storage.modifier#EEB9D5
comment, punctuation.definition.comment, unused.comment, wildcard.comment#67675D
constant#BEF4D8
constant.other.color#99EBC0
constant.character.escape, constant.character.string.escape, constant.regexp, constant.language#ED88BC
constant.other.date, constant.other.timestamp#F0EFBC
keyword.operator#C1E6D3
keyword.other.unit#9DECC3
keyword.control, keyword.other.template, keyword.other.substitution#A0EEC6
keyword.other.this#BEF4D8
keyword.control.import, keyword.control.from#A2DCCF
keyword.control.new, keyword.operator.new, keyword.other.important.css#86C5A5
keyword.control.flow, keyword.control.loop, keyword.control.conditional, keyword.operator.logical, keyword.operator.relational, keyword.operator.comparison, keyword.operator.ternary#A6EDE9
meta.attribute-selector.scss#ABACED
entity.name.tag.css, entity.name.tag.less, entity.name.tag.custom.css#BFC0F2
entity.name.tag.wildcard.css, entity.name.tag.wildcard.less, entity.name.tag.wildcard.scss, entity.name.tag.wildcard.sass#BEB5ED
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#86C5A5
support.constant.property-value.css, constant.numeric.css#D3D3C5
keyword.control.at-rule.apply.tailwind#A2DCCF
keyword.control.at-rule.tailwind.tailwind#A0EEC6
keyword.control.at-rule.layer.tailwind#A6EDE9
meta.selector#ABACED
punctuation.definition.string.begin, punctuation.definition.string.end, punctuation.support.type.property-name.begin, punctuation.support.type.property-name.end#DFDFEC
punctuation.definition.constant.restructuredtext#BEF4D8
string.quoted.docstring.multi#C0BF72
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#DFDFEC
punctuation, punctuation.definition.tag, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html#BEB5ED
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#FDFCFB
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#D8D3E4
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#EDECF4
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#ECECF4
punctuation.definition.directive.restructuredtext#BEF4D8
variable#EBEBBC
variable.other.alias.yaml#EBEBBCunderline
variable.language, variable.parameter.function.language.special#ED88BC
variable.other.constant#E3EEBF
support.variable#EBEBBC
variable.other.property, support.variable.property, variable.object.property, variable.other.object.property#CBE9B9
support.function.magic, variable.other.predefined, storage.modifier.async, keyword.control.trycatch, keyword.control.trycatch.js, keyword.control.trycatch.ts#C5A686
support.function, support.type.property-name#F0F8E2
storage#F1C0DA
string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp#A0805B
punctuation.definition.group.capture.regexp#DB4E59
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end#DB4E59
punctuation.definition.character-class.regexp#E5BD8E
punctuation.definition.group.regexp#92A3EC
punctuation.definition.group.assertion.regexp, keyword.operator.negation.regexp#DB4E59
meta.assertion.look-ahead.regexp#92A3EC
source.json meta.structure.dictionary.json support.type.property-name.json#C0BF72
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#86C5A5
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#89A6C2
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#C5A686
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#C88383
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#4D944D
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#C0BF72
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#86C5A5
token.info-token#89A6C2
token.warn-token#C5A686
token.error-token#C88383
token.debug-token#C5A686