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#17121470
  • activityBar.activeBorder#D16197
  • activityBar.background#100E0F
  • activityBar.foreground#E7DFDA
  • activityBar.inactiveForeground#7D5C6C
  • activityBarBadge.background#D39A79
  • activityBarBadge.foreground#0A0A0A
  • activityBarTop.foreground#E7DFDA
  • badge.background#D39A79
  • badge.foreground#0A0A0A
  • breadcrumb.activeForeground#E7DFDA
  • breadcrumb.activeSelectionForeground#E7DFDA
  • breadcrumb.background#100E0F
  • breadcrumb.focusForeground#E7DFDA
  • breadcrumb.foreground#7D5C6C
  • breadcrumbPicker.background#100E0F
  • button.background#D39A79db
  • button.foreground#0A0A0A
  • button.hoverBackground#D39A79
  • button.secondaryBackground#D16197db
  • button.secondaryForeground#E7DFDA
  • button.secondaryHoverBackground#D16197
  • checkbox.background#080807
  • checkbox.foreground#E7DFDA
  • debugToolBar.background#7DA6CF
  • debugToolBar.foreground#0A0A0A
  • descriptionForeground#DFD4CE
  • diffEditor.diagonalFill#7DA6CF
  • diffEditor.insertedLineBackground#7DA6CF40
  • diffEditor.insertedTextBackground#7DA6CF50
  • diffEditor.insertedTextBorder#7DA6CF
  • diffEditor.removedLineBackground#D7747440
  • diffEditor.removedTextBackground#D7747450
  • diffEditor.removedTextBorder#D77474
  • diffEditorGutter.insertedLineBackground#7DA6CF
  • diffEditorGutter.removedLineBackground#D77474
  • disabledForeground#7D5C6C
  • dropdown.background#211E1C
  • dropdown.border#24201E
  • dropdown.foreground#E7DFDA
  • editor.background#080807
  • editor.findMatchBackground#4B362A70
  • editor.findMatchForeground#E7DFDA
  • editor.findMatchHighlightBackground#17121470
  • editor.findMatchHighlightForeground#E7DFDA
  • editor.findRangeHighlightBackground#362C2570
  • editor.foldBackground#17121470
  • editor.foldPlaceholderForeground#E7DFDA
  • editor.foreground#E7DFDA
  • editor.hoverHighlightBackground#17121470
  • editor.inactiveSelectionBackground#362C2570
  • editor.lineHighlightBackground#00000010
  • editor.placeholder.foreground#DFD4CE
  • editor.rangeHighlightBackground#17121470
  • editor.selectionBackground#362C2570
  • editor.selectionForeground#E7DFDA
  • editor.selectionHighlightBackground#362C2570
  • editor.snippetFinalTabstopHighlightBackground#17121470
  • editor.snippetTabstopHighlightBackground#17121470
  • editor.symbolHighlightBackground#17121470
  • editor.wordHighlightBackground#17121470
  • editor.wordHighlightStrongBackground#17121450
  • editor.wordHighlightTextBackground#17121470
  • editorCodeLens.foreground#7D5C6C
  • editorCursor.background#17121470
  • editorCursor.foreground#D16197
  • editorError.foreground#D77474
  • editorGroup.border#24201E
  • editorGroup.dropBackground#211E1C
  • editorGroup.emptyBackground#080807
  • editorGroupHeader.border#24201E
  • editorGroupHeader.tabsBackground#080807
  • editorGutter.addedBackground#3C903C
  • editorGutter.background#080807
  • editorGutter.commentRangeForeground#7D5C6C
  • editorGutter.deletedBackground#D77474
  • editorGutter.modifiedBackground#7DA6CF
  • editorHint.foreground#3C903C
  • editorHoverWidget.background#080807
  • editorHoverWidget.border#24201E
  • editorHoverWidget.foreground#E7DFDA
  • editorHoverWidget.highlightForeground#E7DFDA
  • editorHoverWidget.statusBarBackground#080807
  • editorIndentGuide.activeBackground1#D16197
  • editorIndentGuide.background1#17121470
  • editorInfo.foreground#7DA6CF
  • editorLineNumber.activeForeground#D16197
  • editorLineNumber.dimmedForeground#7D5C6C90
  • editorLineNumber.foreground#7D5C6C
  • editorLink.activeForeground#7DA6CF
  • editorMarkerNavigation.background#100E0F
  • editorMarkerNavigationError.background#100E0F
  • editorMarkerNavigationWarning.background#100E0F
  • editorMultiCursor.primary.background#17121470
  • editorMultiCursor.primary.foreground#D16197
  • editorMultiCursor.secondary.background#17121470
  • editorMultiCursor.secondary.foreground#E7DFDA
  • editorOverviewRuler.addedForeground#3C903C
  • editorOverviewRuler.border#24201E
  • editorOverviewRuler.commentForeground#7D5C6C
  • editorOverviewRuler.commonContentForeground#E7DFDA
  • editorOverviewRuler.currentContentForeground#7DA6CF
  • editorOverviewRuler.deletedForeground#D77474
  • editorOverviewRuler.errorForeground#D77474
  • editorOverviewRuler.findMatchForeground#E7DFDA
  • editorOverviewRuler.incomingContentForeground#3C903C
  • editorOverviewRuler.infoForeground#7DA6CF
  • editorOverviewRuler.modifiedForeground#7DA6CF
  • editorOverviewRuler.rangeHighlightForeground#17121470
  • editorOverviewRuler.selectionHighlightForeground#362C2570
  • editorOverviewRuler.warningForeground#D3A679
  • editorOverviewRuler.wordHighlightForeground#17121470
  • editorOverviewRuler.wordHighlightStrongForeground#17121470
  • editorRuler.foreground#17121470
  • editorSuggestWidget.background#080807
  • editorSuggestWidget.border#24201E
  • editorSuggestWidget.focusHighlightForeground#E7DFDA
  • editorSuggestWidget.foreground#7D5C6C
  • editorSuggestWidget.highlightForeground#E7DFDA
  • editorSuggestWidget.selectedBackground#D39A7980
  • editorSuggestWidget.selectedForeground#E7DFDA
  • editorUnicodeHighlight.background#17121470
  • editorWarning.foreground#D3A679
  • editorWhitespace.foreground#17121470
  • editorWidget.background#080807
  • editorWidget.border#24201E
  • editorWidget.foreground#E7DFDA
  • errorForeground#D77474
  • extensionButton.prominentBackground#D39A79aa
  • extensionButton.prominentForeground#0A0A0A
  • extensionButton.prominentHoverBackground#D39A79
  • focusBorder#24201E
  • foreground#E7DFDA
  • gitDecoration.addedResourceForeground#3C903C
  • gitDecoration.conflictingResourceForeground#D3A679
  • gitDecoration.deletedResourceForeground#D77474
  • gitDecoration.ignoredResourceForeground#7D5C6C
  • gitDecoration.modifiedResourceForeground#7DA6CF
  • gitDecoration.renamedResourceForeground#D16197
  • gitDecoration.untrackedResourceForeground#DFD4CE
  • input.background#080807
  • input.border#7D5C6C
  • input.foreground#E7DFDA
  • input.placeholderForeground#7D5C6C
  • inputOption.activeBorder#D16197
  • inputValidation.errorBorder#D77474
  • inputValidation.infoBorder#7DA6CF
  • inputValidation.warningBorder#D3A679
  • list.activeSelectionBackground#D39A7970
  • list.activeSelectionForeground#E7DFDA
  • list.dropBackground#211E1C
  • list.dropBetweenBackground#24201E
  • list.errorForeground#D77474
  • list.focusBackground#D39A7950
  • list.focusForeground#E7DFDA
  • list.highlightForeground#D16197
  • list.hoverBackground#D39A7920
  • list.hoverForeground#E7DFDA
  • list.inactiveFocusBackground#100E0F
  • list.inactiveSelectionBackground#D39A7960
  • list.inactiveSelectionForeground#DFD4CE
  • list.warningForeground#D3A679
  • listFilterWidget.background#211E1C
  • listFilterWidget.noMatchesOutline#D77474
  • listFilterWidget.outline#24201E
  • merge.border#24201E
  • merge.currentContentBackground#7DA6CF20
  • merge.currentHeaderBackground#7DA6CF40
  • merge.incomingContentBackground#3C903C20
  • merge.incomingHeaderBackground#3C903C40
  • mergeEditor.change.background#D3A679
  • notificationLink.foreground#7DA6CF
  • notifications.background#100E0F
  • notifications.border#24201E
  • notifications.foreground#E7DFDA
  • notificationsErrorIcon.foreground#D77474
  • notificationsInfoIcon.foreground#7DA6CF
  • notificationsWarningIcon.foreground#D3A679
  • panel.background#100E0F
  • panel.border#D16197
  • panelInput.border#7D5C6C
  • panelTitle.activeBorder#D16197
  • panelTitle.activeForeground#E7DFDA
  • panelTitle.inactiveForeground#7D5C6C
  • peekView.border#D39A79
  • peekViewEditor.background#080807
  • peekViewEditor.matchHighlightBackground#4B362A70
  • peekViewResult.background#080807
  • peekViewResult.fileForeground#E7DFDA
  • peekViewResult.lineForeground#E7DFDA
  • peekViewResult.matchHighlightBackground#17121470
  • peekViewResult.selectionBackground#100E0F
  • peekViewResult.selectionForeground#E7DFDA
  • peekViewTitle.background#080807
  • peekViewTitleDescription.foreground#DFD4CE
  • peekViewTitleLabel.foreground#E7DFDA
  • pickerGroup.border#D39A79
  • pickerGroup.foreground#F0C3A8
  • progressBar.background#D16197
  • selection.background#D39A7950
  • settings.checkboxBackground#080807
  • settings.checkboxBorder#24201E
  • settings.checkboxForeground#E7DFDA
  • settings.dropdownBackground#080807
  • settings.dropdownBorder#24201E
  • settings.dropdownForeground#E7DFDA
  • settings.focusedRowBackground#17121470
  • settings.focusedRowBorder#7D5C6C
  • settings.headerBorder#24201E
  • settings.headerForeground#E7DFDA
  • settings.inactiveSelectedItemBorder#7D5C6C
  • settings.modifiedItemIndicator#D3A679
  • settings.numberInputBackground#080807
  • settings.numberInputBorder#7D5C6C
  • settings.numberInputForeground#E7DFDA
  • settings.rowHoverBackground#17121470
  • settings.settingsHeaderHoverForeground#E7DFDA
  • settings.textInputBackground#080807
  • settings.textInputBorder#7D5C6C
  • settings.textInputForeground#E7DFDA
  • sideBar.background#080807
  • sideBarActivityBarTop.border#24201E
  • sideBarSectionHeader.background#100E0F
  • sideBarSectionHeader.border#24201E
  • sideBarStickyScroll.background#080807
  • sideBarStickyScroll.border#24201E
  • sideBarStickyScroll.shadow#24201E
  • sideBarTitle.background#080807
  • sideBarTitle.foreground#E7DFDA
  • statusBar.background#D39A79
  • statusBar.debuggingBackground#D3A679
  • statusBar.debuggingForeground#0A0A0A
  • statusBar.foreground#0A0A0A
  • statusBar.noFolderBackground#DFD4CE
  • statusBar.noFolderForeground#0A0A0A
  • statusBarItem.activeBackground#D39A79aa
  • statusBarItem.errorBackground#D77474
  • statusBarItem.errorForeground#0A0A0A
  • statusBarItem.errorHoverBackground#D77474aa
  • statusBarItem.hoverBackground#D39A79aa
  • statusBarItem.prominentBackground#D39A79aa
  • statusBarItem.prominentForeground#0A0A0A
  • statusBarItem.prominentHoverBackground#D39A79aa
  • statusBarItem.prominentHoverForeground#0A0A0A
  • statusBarItem.remoteBackground#D16197
  • statusBarItem.remoteForeground#E7DFDA
  • statusBarItem.remoteHoverBackground#D16197aa
  • statusBarItem.warningBackground#D3A679
  • statusBarItem.warningForeground#0A0A0A
  • statusBarItem.warningHoverBackground#D3A679aa
  • tab.activeBackground#100E0F
  • tab.activeBorderTop#D16197
  • tab.activeForeground#E7DFDA
  • tab.border#24201E
  • tab.hoverBackground#100E0F80
  • tab.hoverForeground#E7DFDA
  • tab.inactiveBackground#080807
  • tab.inactiveForeground#7D5C6C
  • tab.selectedBackground#17121470
  • terminal.ansiBlack#000000
  • terminal.ansiBlue#8D64DE
  • terminal.ansiBrightBlack#3D3D3D
  • terminal.ansiBrightBlue#D6C3FB
  • terminal.ansiBrightCyan#43E7B0
  • terminal.ansiBrightGreen#3CFF3E
  • terminal.ansiBrightMagenta#F175CA
  • terminal.ansiBrightRed#EAA27A
  • terminal.ansiBrightWhite#FEFEFE
  • terminal.ansiBrightYellow#FCF9E8
  • terminal.ansiCyan#2A8768
  • terminal.ansiGreen#149615
  • terminal.ansiMagenta#C94FA3
  • terminal.ansiRed#C85B20
  • terminal.ansiWhite#EFEDE8
  • terminal.ansiYellow#D1C483
  • terminal.background#080807
  • terminal.border#24201E
  • terminal.foreground#E7DFDA
  • terminal.inactiveSelectionBackground#362C2570
  • terminal.selectionBackground#362C2570
  • textBlockQuote.background#211E1C
  • textBlockQuote.border#24201E
  • textCodeBlock.background#211E1C
  • textLink.activeForeground#7DA6CF
  • textLink.foreground#D39A79
  • textPreformat.background#211E1C
  • textPreformat.foreground#E7DFDA
  • textSeparator.foreground#E7DFDA
  • titleBar.activeBackground#100E0F
  • titleBar.activeForeground#E7DFDA
  • titleBar.inactiveBackground#100E0F
  • titleBar.inactiveForeground#7D5C6C
  • widget.border#24201E

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
meta.tag, string#E7DFDA
meta.diff, meta.diff.header#7D5C6C
meta.link.reference.def.restructuredtext, string.other.link.description, string.other.link.title#F6D4C1
emphasisitalic
strongbold
invalid#D77474strikethrough
invalid.deprecated#E7DFDAunderline italic
header#F6D4C1
source.ini, source.ignore, source#DFD4CE
markup.inserted#F6D4C1
markup.deleted#D77474
markup.changed#7DA6CF
markup.error#D77474
markup.underlineunderline
markup.bold#D3A679bold
markup.heading#D16197bold
markup.italic#DFD4CEitalic
markup.inline.raw, markup.raw.restructuredtext#D16197
markup.underline.link, markup.underline.link.image, markup.quote#7DA6CF
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext#D39A79
meta.separator.markdown#D16197
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown#F3D2BF
markup.heading.markdown punctuation.definition.string.begin, markup.heading.markdown punctuation.definition.string.end#D3A679
entity.name.class, entity.name.type.class, entity.other.inherited-class#D39A79
entity.name.tag, entity.other.attribute-name.parent-selector#F7DECF
entity.other.attribute-name#D39A79
entity.name.function, meta.function-call, meta.method-call, meta.method#D16197
meta.selector.css, meta.at-rule.function variable, meta.at-rule.mixin variable, variable.parameter, entity.name.variable.parameter#F1D9CA
support#F0B694
entity.name, variable.other.key#D16197
entity.name.type#F2BAD5
entity.name.type.module, entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type#EA9AAD
entity.other.attribute-name, entity.other.attribute-name.pseudo-class.css#ECC7B1
entity.other.attribute-name.class.css#D16197
storage.class, storage.type#D39A79
storage.modifier#EFB3D0
comment, punctuation.definition.comment, unused.comment, wildcard.comment#7D5C6C
constant#F6D4C1
constant.other.color#F0BFA3
constant.character.escape, constant.character.string.escape, constant.regexp, constant.language#EFA67B
constant.other.date, constant.other.timestamp#F0C6AD
keyword.operator#F5EBE5
keyword.other.unit#F0BFA3
keyword.control, keyword.other.template, keyword.other.substitution#F2C2A6
keyword.other.this#F6D4C1
keyword.control.import, keyword.control.from#E0C5A4
keyword.control.new, keyword.operator.new, keyword.other.important.css#D39A79
keyword.control.flow, keyword.control.loop, keyword.control.conditional, keyword.operator.logical, keyword.operator.relational, keyword.operator.comparison, keyword.operator.ternary#EEDA9A
meta.attribute-selector.scss#F0C9B2
entity.name.tag.css, entity.name.tag.less, entity.name.tag.custom.css#F7DECF
entity.name.tag.wildcard.css, entity.name.tag.wildcard.less, entity.name.tag.wildcard.scss, entity.name.tag.wildcard.sass#EFD7B3
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#D39A79
support.constant.property-value.css, constant.numeric.css#DFD4CE
keyword.control.at-rule.apply.tailwind#E0C5A4
keyword.control.at-rule.tailwind.tailwind#F2C2A6
keyword.control.at-rule.layer.tailwind#EEDA9A
meta.selector#F0C9B2
punctuation.definition.string.begin, punctuation.definition.string.end, punctuation.support.type.property-name.begin, punctuation.support.type.property-name.end#E1D3CC
punctuation.definition.constant.restructuredtext#F6D4C1
string.quoted.docstring.multi#D16197
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#E1D3CC
punctuation, punctuation.definition.tag, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html#EFD7B3
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#EFEDE8
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#F0EDE5
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#FAF7F5
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#F6F1EF
punctuation.definition.directive.restructuredtext#F6D4C1
variable#ECCAB6
variable.other.alias.yaml#ECCAB6underline
variable.language, variable.parameter.function.language.special#EFA67B
variable.other.constant#F4E6D2
support.variable#ECCAB6
variable.other.property, support.variable.property, variable.object.property, variable.other.object.property#EAE6B8
support.function.magic, variable.other.predefined, storage.modifier.async, keyword.control.trycatch, keyword.control.trycatch.js, keyword.control.trycatch.ts#D3A679
support.function, support.type.property-name#F4E7CD
storage#F0C9B2
string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp#D1C483
punctuation.definition.group.capture.regexp#C85B20
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end#C85B20
punctuation.definition.character-class.regexp#FCF9E8
punctuation.definition.group.regexp#D6C3FB
punctuation.definition.group.assertion.regexp, keyword.operator.negation.regexp#C85B20
meta.assertion.look-ahead.regexp#D6C3FB
source.json meta.structure.dictionary.json support.type.property-name.json#D16197
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#D39A79
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#7DA6CF
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#D3A679
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#D77474
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#3C903C
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#D16197
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#D39A79
token.info-token#7DA6CF
token.warn-token#D3A679
token.error-token#D77474
token.debug-token#D3A679