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#25241D70
  • activityBar.activeBorder#D08762
  • activityBar.background#2E2D29
  • activityBar.foreground#D7D7D6
  • activityBar.inactiveForeground#706C62
  • activityBarBadge.background#D2C479
  • activityBarBadge.foreground#151414
  • activityBarTop.foreground#D7D7D6
  • badge.background#D2C479
  • badge.foreground#151414
  • breadcrumb.activeForeground#D7D7D6
  • breadcrumb.activeSelectionForeground#D7D7D6
  • breadcrumb.background#2E2D29
  • breadcrumb.focusForeground#D7D7D6
  • breadcrumb.foreground#706C62
  • breadcrumbPicker.background#2E2D29
  • button.background#D2C479db
  • button.foreground#151414
  • button.hoverBackground#D2C479
  • button.secondaryBackground#D08762db
  • button.secondaryForeground#151414
  • button.secondaryHoverBackground#D08762
  • checkbox.background#1D1E20
  • checkbox.foreground#D7D7D6
  • debugToolBar.background#9DA6AE
  • debugToolBar.foreground#151414
  • descriptionForeground#D6D3D2
  • diffEditor.diagonalFill#9DA6AE
  • diffEditor.insertedLineBackground#9DA6AE40
  • diffEditor.insertedTextBackground#9DA6AE50
  • diffEditor.insertedTextBorder#9DA6AE
  • diffEditor.removedLineBackground#D6767640
  • diffEditor.removedTextBackground#D6767650
  • diffEditor.removedTextBorder#D67676
  • diffEditorGutter.insertedLineBackground#9DA6AE
  • diffEditorGutter.removedLineBackground#D67676
  • disabledForeground#706C62
  • dropdown.background#2C2825
  • dropdown.border#322F2A
  • dropdown.foreground#D7D7D6
  • editor.background#1D1E20
  • editor.findMatchBackground#59473670
  • editor.findMatchForeground#D7D7D6
  • editor.findMatchHighlightBackground#25241D70
  • editor.findMatchHighlightForeground#D7D7D6
  • editor.findRangeHighlightBackground#44373170
  • editor.foldBackground#25241D70
  • editor.foldPlaceholderForeground#D7D7D6
  • editor.foreground#D7D7D6
  • editor.hoverHighlightBackground#25241D70
  • editor.inactiveSelectionBackground#44373170
  • editor.lineHighlightBackground#00000010
  • editor.placeholder.foreground#D6D3D2
  • editor.rangeHighlightBackground#25241D70
  • editor.selectionBackground#44373170
  • editor.selectionForeground#D7D7D6
  • editor.selectionHighlightBackground#44373170
  • editor.snippetFinalTabstopHighlightBackground#25241D70
  • editor.snippetTabstopHighlightBackground#25241D70
  • editor.symbolHighlightBackground#25241D70
  • editor.wordHighlightBackground#25241D70
  • editor.wordHighlightStrongBackground#25241D50
  • editor.wordHighlightTextBackground#25241D70
  • editorCodeLens.foreground#706C62
  • editorCursor.background#25241D70
  • editorCursor.foreground#D08762
  • editorError.foreground#D67676
  • editorGroup.border#322F2A
  • editorGroup.dropBackground#2C2825
  • editorGroup.emptyBackground#1D1E20
  • editorGroupHeader.border#322F2A
  • editorGroupHeader.tabsBackground#1D1E20
  • editorGutter.addedBackground#439E43
  • editorGutter.background#1D1E20
  • editorGutter.commentRangeForeground#706C62
  • editorGutter.deletedBackground#D67676
  • editorGutter.modifiedBackground#9DA6AE
  • editorHint.foreground#439E43
  • editorHoverWidget.background#1D1E20
  • editorHoverWidget.border#322F2A
  • editorHoverWidget.foreground#D7D7D6
  • editorHoverWidget.highlightForeground#D7D7D6
  • editorHoverWidget.statusBarBackground#1D1E20
  • editorIndentGuide.activeBackground1#D08762
  • editorIndentGuide.background1#25241D70
  • editorInfo.foreground#9DA6AE
  • editorLineNumber.activeForeground#D08762
  • editorLineNumber.dimmedForeground#706C6290
  • editorLineNumber.foreground#706C62
  • editorLink.activeForeground#9DA6AE
  • editorMarkerNavigation.background#2E2D29
  • editorMarkerNavigationError.background#2E2D29
  • editorMarkerNavigationWarning.background#2E2D29
  • editorMultiCursor.primary.background#25241D70
  • editorMultiCursor.primary.foreground#D08762
  • editorMultiCursor.secondary.background#25241D70
  • editorMultiCursor.secondary.foreground#D7D7D6
  • editorOverviewRuler.addedForeground#439E43
  • editorOverviewRuler.border#322F2A
  • editorOverviewRuler.commentForeground#706C62
  • editorOverviewRuler.commonContentForeground#D7D7D6
  • editorOverviewRuler.currentContentForeground#9DA6AE
  • editorOverviewRuler.deletedForeground#D67676
  • editorOverviewRuler.errorForeground#D67676
  • editorOverviewRuler.findMatchForeground#D7D7D6
  • editorOverviewRuler.incomingContentForeground#439E43
  • editorOverviewRuler.infoForeground#9DA6AE
  • editorOverviewRuler.modifiedForeground#9DA6AE
  • editorOverviewRuler.rangeHighlightForeground#25241D70
  • editorOverviewRuler.selectionHighlightForeground#44373170
  • editorOverviewRuler.warningForeground#D2A679
  • editorOverviewRuler.wordHighlightForeground#25241D70
  • editorOverviewRuler.wordHighlightStrongForeground#25241D70
  • editorRuler.foreground#25241D70
  • editorSuggestWidget.background#1D1E20
  • editorSuggestWidget.border#322F2A
  • editorSuggestWidget.focusHighlightForeground#D7D7D6
  • editorSuggestWidget.foreground#706C62
  • editorSuggestWidget.highlightForeground#D7D7D6
  • editorSuggestWidget.selectedBackground#D2C47980
  • editorSuggestWidget.selectedForeground#D7D7D6
  • editorUnicodeHighlight.background#25241D70
  • editorWarning.foreground#D2A679
  • editorWhitespace.foreground#25241D70
  • editorWidget.background#1D1E20
  • editorWidget.border#322F2A
  • editorWidget.foreground#D7D7D6
  • errorForeground#D67676
  • extensionButton.prominentBackground#D2C479aa
  • extensionButton.prominentForeground#151414
  • extensionButton.prominentHoverBackground#D2C479
  • focusBorder#322F2A
  • foreground#D7D7D6
  • gitDecoration.addedResourceForeground#439E43
  • gitDecoration.conflictingResourceForeground#D2A679
  • gitDecoration.deletedResourceForeground#D67676
  • gitDecoration.ignoredResourceForeground#706C62
  • gitDecoration.modifiedResourceForeground#9DA6AE
  • gitDecoration.renamedResourceForeground#D08762
  • gitDecoration.untrackedResourceForeground#D6D3D2
  • input.background#1D1E20
  • input.border#706C62
  • input.foreground#D7D7D6
  • input.placeholderForeground#706C62
  • inputOption.activeBorder#D08762
  • inputValidation.errorBorder#D67676
  • inputValidation.infoBorder#9DA6AE
  • inputValidation.warningBorder#D2A679
  • list.activeSelectionBackground#D2C47970
  • list.activeSelectionForeground#D7D7D6
  • list.dropBackground#2C2825
  • list.dropBetweenBackground#322F2A
  • list.errorForeground#D67676
  • list.focusBackground#D2C47950
  • list.focusForeground#D7D7D6
  • list.highlightForeground#D08762
  • list.hoverBackground#D2C47920
  • list.hoverForeground#D7D7D6
  • list.inactiveFocusBackground#2E2D29
  • list.inactiveSelectionBackground#D2C47960
  • list.inactiveSelectionForeground#D6D3D2
  • list.warningForeground#D2A679
  • listFilterWidget.background#2C2825
  • listFilterWidget.noMatchesOutline#D67676
  • listFilterWidget.outline#322F2A
  • merge.border#322F2A
  • merge.currentContentBackground#9DA6AE20
  • merge.currentHeaderBackground#9DA6AE40
  • merge.incomingContentBackground#439E4320
  • merge.incomingHeaderBackground#439E4340
  • mergeEditor.change.background#D2A679
  • notificationLink.foreground#9DA6AE
  • notifications.background#2E2D29
  • notifications.border#322F2A
  • notifications.foreground#D7D7D6
  • notificationsErrorIcon.foreground#D67676
  • notificationsInfoIcon.foreground#9DA6AE
  • notificationsWarningIcon.foreground#D2A679
  • panel.background#2E2D29
  • panel.border#D08762
  • panelInput.border#706C62
  • panelTitle.activeBorder#D08762
  • panelTitle.activeForeground#D7D7D6
  • panelTitle.inactiveForeground#706C62
  • peekView.border#D2C479
  • peekViewEditor.background#1D1E20
  • peekViewEditor.matchHighlightBackground#59473670
  • peekViewResult.background#1D1E20
  • peekViewResult.fileForeground#D7D7D6
  • peekViewResult.lineForeground#D7D7D6
  • peekViewResult.matchHighlightBackground#25241D70
  • peekViewResult.selectionBackground#2E2D29
  • peekViewResult.selectionForeground#D7D7D6
  • peekViewTitle.background#1D1E20
  • peekViewTitleDescription.foreground#D6D3D2
  • peekViewTitleLabel.foreground#D7D7D6
  • pickerGroup.border#D2C479
  • pickerGroup.foreground#E7E0BB
  • progressBar.background#D08762
  • selection.background#D2C47950
  • settings.checkboxBackground#1D1E20
  • settings.checkboxBorder#322F2A
  • settings.checkboxForeground#D7D7D6
  • settings.dropdownBackground#1D1E20
  • settings.dropdownBorder#322F2A
  • settings.dropdownForeground#D7D7D6
  • settings.focusedRowBackground#25241D70
  • settings.focusedRowBorder#706C62
  • settings.headerBorder#322F2A
  • settings.headerForeground#D7D7D6
  • settings.inactiveSelectedItemBorder#706C62
  • settings.modifiedItemIndicator#D2A679
  • settings.numberInputBackground#1D1E20
  • settings.numberInputBorder#706C62
  • settings.numberInputForeground#D7D7D6
  • settings.rowHoverBackground#25241D70
  • settings.settingsHeaderHoverForeground#D7D7D6
  • settings.textInputBackground#1D1E20
  • settings.textInputBorder#706C62
  • settings.textInputForeground#D7D7D6
  • sideBar.background#1D1E20
  • sideBarActivityBarTop.border#322F2A
  • sideBarSectionHeader.background#2E2D29
  • sideBarSectionHeader.border#322F2A
  • sideBarStickyScroll.background#1D1E20
  • sideBarStickyScroll.border#322F2A
  • sideBarStickyScroll.shadow#322F2A
  • sideBarTitle.background#1D1E20
  • sideBarTitle.foreground#D7D7D6
  • statusBar.background#D2C479
  • statusBar.debuggingBackground#D2A679
  • statusBar.debuggingForeground#151414
  • statusBar.foreground#151414
  • statusBar.noFolderBackground#D6D3D2
  • statusBar.noFolderForeground#151414
  • statusBarItem.activeBackground#D2C479aa
  • statusBarItem.errorBackground#D67676
  • statusBarItem.errorForeground#151414
  • statusBarItem.errorHoverBackground#D67676aa
  • statusBarItem.hoverBackground#D2C479aa
  • statusBarItem.prominentBackground#D2C479aa
  • statusBarItem.prominentForeground#151414
  • statusBarItem.prominentHoverBackground#D2C479aa
  • statusBarItem.prominentHoverForeground#151414
  • statusBarItem.remoteBackground#D08762
  • statusBarItem.remoteForeground#151414
  • statusBarItem.remoteHoverBackground#D08762aa
  • statusBarItem.warningBackground#D2A679
  • statusBarItem.warningForeground#151414
  • statusBarItem.warningHoverBackground#D2A679aa
  • tab.activeBackground#2E2D29
  • tab.activeBorderTop#D08762
  • tab.activeForeground#D7D7D6
  • tab.border#322F2A
  • tab.hoverBackground#2E2D2980
  • tab.hoverForeground#D7D7D6
  • tab.inactiveBackground#1D1E20
  • tab.inactiveForeground#706C62
  • tab.selectedBackground#25241D70
  • terminal.ansiBlack#000000
  • terminal.ansiBlue#8878ED
  • terminal.ansiBrightBlack#464646
  • terminal.ansiBrightBlue#9E90F7
  • terminal.ansiBrightCyan#478CC8
  • terminal.ansiBrightGreen#27FF72
  • terminal.ansiBrightMagenta#E64FD4
  • terminal.ansiBrightRed#FE374A
  • terminal.ansiBrightWhite#FCFCFB
  • terminal.ansiBrightYellow#E18030
  • terminal.ansiCyan#3C8FD5
  • terminal.ansiGreen#05A43D
  • terminal.ansiMagenta#E544D2
  • terminal.ansiRed#F93C4F
  • terminal.ansiWhite#F3F2EF
  • terminal.ansiYellow#D66E18
  • terminal.background#1D1E20
  • terminal.border#322F2A
  • terminal.foreground#D7D7D6
  • terminal.inactiveSelectionBackground#44373170
  • terminal.selectionBackground#44373170
  • textBlockQuote.background#2C2825
  • textBlockQuote.border#322F2A
  • textCodeBlock.background#2C2825
  • textLink.activeForeground#9DA6AE
  • textLink.foreground#D2C479
  • textPreformat.background#2C2825
  • textPreformat.foreground#D7D7D6
  • textSeparator.foreground#D7D7D6
  • titleBar.activeBackground#2E2D29
  • titleBar.activeForeground#D7D7D6
  • titleBar.inactiveBackground#2E2D29
  • titleBar.inactiveForeground#706C62
  • widget.border#322F2A

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
meta.tag, string#D7D7D6
meta.diff, meta.diff.header#706C62
meta.link.reference.def.restructuredtext, string.other.link.description, string.other.link.title#EAD0C2
emphasisitalic
strongbold
invalid#D67676strikethrough
invalid.deprecated#D7D7D6underline italic
header#EAD0C2
source.ini, source.ignore, source#D6D3D2
markup.inserted#EAD0C2
markup.deleted#D67676
markup.changed#9DA6AE
markup.error#D67676
markup.underlineunderline
markup.bold#D2A679bold
markup.heading#D08762bold
markup.italic#D6D3D2italic
markup.inline.raw, markup.raw.restructuredtext#D08762
markup.underline.link, markup.underline.link.image, markup.quote#9DA6AE
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext#D2C479
meta.separator.markdown#D08762
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown#E3DDB5
markup.heading.markdown punctuation.definition.string.begin, markup.heading.markdown punctuation.definition.string.end#D2A679
entity.name.class, entity.name.type.class, entity.other.inherited-class#D2C479
entity.name.tag, entity.other.attribute-name.parent-selector#ECD0CA
entity.other.attribute-name#D2C479
entity.name.function, meta.function-call, meta.method-call, meta.method#D08762
meta.selector.css, meta.at-rule.function variable, meta.at-rule.mixin variable, variable.parameter, entity.name.variable.parameter#E5C8C3
support#AFC0E4
entity.name, variable.other.key#D08762
entity.name.type#EAD9C7
entity.name.type.module, entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type#DCD5A8
entity.other.attribute-name, entity.other.attribute-name.pseudo-class.css#F0DFDB
entity.other.attribute-name.class.css#D08762
storage.class, storage.type#D2C479
storage.modifier#E5C4BE
comment, punctuation.definition.comment, unused.comment, wildcard.comment#706C62
constant#EAD0C2
constant.other.color#DDD4A1
constant.character.escape, constant.character.string.escape, constant.regexp, constant.language#E4B4AA
constant.other.date, constant.other.timestamp#C0CDE7
keyword.operator#DBC1BD
keyword.other.unit#DFCCA5
keyword.control, keyword.other.template, keyword.other.substitution#E5D4B3
keyword.other.this#EAD0C2
keyword.control.import, keyword.control.from#DFD7AA
keyword.control.new, keyword.operator.new, keyword.other.important.css#D2C479
keyword.control.flow, keyword.control.loop, keyword.control.conditional, keyword.operator.logical, keyword.operator.relational, keyword.operator.comparison, keyword.operator.ternary#E1E4B4
meta.attribute-selector.scss#B5C4E3
entity.name.tag.css, entity.name.tag.less, entity.name.tag.custom.css#ECD0CA
entity.name.tag.wildcard.css, entity.name.tag.wildcard.less, entity.name.tag.wildcard.scss, entity.name.tag.wildcard.sass#E9D3C9
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#D2C479
support.constant.property-value.css, constant.numeric.css#D6D3D2
keyword.control.at-rule.apply.tailwind#DFD7AA
keyword.control.at-rule.tailwind.tailwind#E5D4B3
keyword.control.at-rule.layer.tailwind#E1E4B4
meta.selector#B5C4E3
punctuation.definition.string.begin, punctuation.definition.string.end, punctuation.support.type.property-name.begin, punctuation.support.type.property-name.end#ECE7E4
punctuation.definition.constant.restructuredtext#EAD0C2
string.quoted.docstring.multi#D08762
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#ECE7E4
punctuation, punctuation.definition.tag, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html#E9D3C9
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#F3F2EF
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#F1EEEA
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#FDFDFC
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#FFFFFF
punctuation.definition.directive.restructuredtext#EAD0C2
variable#E0D3B8
variable.other.alias.yaml#E0D3B8underline
variable.language, variable.parameter.function.language.special#E4B4AA
variable.other.constant#ECEED8
support.variable#E0D3B8
variable.other.property, support.variable.property, variable.object.property, variable.other.object.property#DDE5C8
support.function.magic, variable.other.predefined, storage.modifier.async, keyword.control.trycatch, keyword.control.trycatch.js, keyword.control.trycatch.ts#D2A679
support.function, support.type.property-name#EBEFD7
storage#E3DDB5
string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp#D66E18
punctuation.definition.group.capture.regexp#F93C4F
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end#F93C4F
punctuation.definition.character-class.regexp#E18030
punctuation.definition.group.regexp#9E90F7
punctuation.definition.group.assertion.regexp, keyword.operator.negation.regexp#F93C4F
meta.assertion.look-ahead.regexp#9E90F7
source.json meta.structure.dictionary.json support.type.property-name.json#D08762
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#D2C479
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#9DA6AE
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#D2A679
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#D67676
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#439E43
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#D08762
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#D2C479
token.info-token#9DA6AE
token.warn-token#D2A679
token.error-token#D67676
token.debug-token#D2A679