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#0D110D70
  • activityBar.activeBorder#6A70D7
  • activityBar.background#050505
  • activityBar.foreground#F3EFED
  • activityBar.inactiveForeground#605C5A
  • activityBarBadge.background#D39779
  • activityBarBadge.foreground#0C0C0D
  • activityBarTop.foreground#F3EFED
  • badge.background#D39779
  • badge.foreground#0C0C0D
  • breadcrumb.activeForeground#F3EFED
  • breadcrumb.activeSelectionForeground#F3EFED
  • breadcrumb.background#050505
  • breadcrumb.focusForeground#F3EFED
  • breadcrumb.foreground#605C5A
  • breadcrumbPicker.background#050505
  • button.background#D39779db
  • button.foreground#0C0C0D
  • button.hoverBackground#D39779
  • button.secondaryBackground#6A70D7db
  • button.secondaryForeground#F3EFED
  • button.secondaryHoverBackground#6A70D7
  • checkbox.background#020302
  • checkbox.foreground#F3EFED
  • debugToolBar.background#7DA6CF
  • debugToolBar.foreground#0C0C0D
  • descriptionForeground#CECFDF
  • 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#605C5A
  • dropdown.background#0E0E11
  • dropdown.border#191F1A
  • dropdown.foreground#F3EFED
  • editor.background#020302
  • editor.findMatchBackground#27284470
  • editor.findMatchForeground#F3EFED
  • editor.findMatchHighlightBackground#0D110D70
  • editor.findMatchHighlightForeground#F3EFED
  • editor.findRangeHighlightBackground#30262170
  • editor.foldBackground#0D110D70
  • editor.foldPlaceholderForeground#F3EFED
  • editor.foreground#F3EFED
  • editor.hoverHighlightBackground#0D110D70
  • editor.inactiveSelectionBackground#30262170
  • editor.lineHighlightBackground#00000010
  • editor.placeholder.foreground#CECFDF
  • editor.rangeHighlightBackground#0D110D70
  • editor.selectionBackground#30262170
  • editor.selectionForeground#F3EFED
  • editor.selectionHighlightBackground#30262170
  • editor.snippetFinalTabstopHighlightBackground#0D110D70
  • editor.snippetTabstopHighlightBackground#0D110D70
  • editor.symbolHighlightBackground#0D110D70
  • editor.wordHighlightBackground#0D110D70
  • editor.wordHighlightStrongBackground#0D110D50
  • editor.wordHighlightTextBackground#0D110D70
  • editorCodeLens.foreground#605C5A
  • editorCursor.background#0D110D70
  • editorCursor.foreground#6A70D7
  • editorError.foreground#D77474
  • editorGroup.border#191F1A
  • editorGroup.dropBackground#0E0E11
  • editorGroup.emptyBackground#020302
  • editorGroupHeader.border#191F1A
  • editorGroupHeader.tabsBackground#020302
  • editorGutter.addedBackground#3C903C
  • editorGutter.background#020302
  • editorGutter.commentRangeForeground#605C5A
  • editorGutter.deletedBackground#D77474
  • editorGutter.modifiedBackground#7DA6CF
  • editorHint.foreground#3C903C
  • editorHoverWidget.background#020302
  • editorHoverWidget.border#191F1A
  • editorHoverWidget.foreground#F3EFED
  • editorHoverWidget.highlightForeground#F3EFED
  • editorHoverWidget.statusBarBackground#020302
  • editorIndentGuide.activeBackground1#6A70D7
  • editorIndentGuide.background1#0D110D70
  • editorInfo.foreground#7DA6CF
  • editorLineNumber.activeForeground#6A70D7
  • editorLineNumber.dimmedForeground#605C5A90
  • editorLineNumber.foreground#605C5A
  • editorLink.activeForeground#7DA6CF
  • editorMarkerNavigation.background#050505
  • editorMarkerNavigationError.background#050505
  • editorMarkerNavigationWarning.background#050505
  • editorMultiCursor.primary.background#0D110D70
  • editorMultiCursor.primary.foreground#6A70D7
  • editorMultiCursor.secondary.background#0D110D70
  • editorMultiCursor.secondary.foreground#F3EFED
  • editorOverviewRuler.addedForeground#3C903C
  • editorOverviewRuler.border#191F1A
  • editorOverviewRuler.commentForeground#605C5A
  • editorOverviewRuler.commonContentForeground#F3EFED
  • editorOverviewRuler.currentContentForeground#7DA6CF
  • editorOverviewRuler.deletedForeground#D77474
  • editorOverviewRuler.errorForeground#D77474
  • editorOverviewRuler.findMatchForeground#F3EFED
  • editorOverviewRuler.incomingContentForeground#3C903C
  • editorOverviewRuler.infoForeground#7DA6CF
  • editorOverviewRuler.modifiedForeground#7DA6CF
  • editorOverviewRuler.rangeHighlightForeground#0D110D70
  • editorOverviewRuler.selectionHighlightForeground#30262170
  • editorOverviewRuler.warningForeground#D3A679
  • editorOverviewRuler.wordHighlightForeground#0D110D70
  • editorOverviewRuler.wordHighlightStrongForeground#0D110D70
  • editorRuler.foreground#0D110D70
  • editorSuggestWidget.background#020302
  • editorSuggestWidget.border#191F1A
  • editorSuggestWidget.focusHighlightForeground#F3EFED
  • editorSuggestWidget.foreground#605C5A
  • editorSuggestWidget.highlightForeground#F3EFED
  • editorSuggestWidget.selectedBackground#D3977980
  • editorSuggestWidget.selectedForeground#F3EFED
  • editorUnicodeHighlight.background#0D110D70
  • editorWarning.foreground#D3A679
  • editorWhitespace.foreground#0D110D70
  • editorWidget.background#020302
  • editorWidget.border#191F1A
  • editorWidget.foreground#F3EFED
  • errorForeground#D77474
  • extensionButton.prominentBackground#D39779aa
  • extensionButton.prominentForeground#0C0C0D
  • extensionButton.prominentHoverBackground#D39779
  • focusBorder#191F1A
  • foreground#F3EFED
  • gitDecoration.addedResourceForeground#3C903C
  • gitDecoration.conflictingResourceForeground#D3A679
  • gitDecoration.deletedResourceForeground#D77474
  • gitDecoration.ignoredResourceForeground#605C5A
  • gitDecoration.modifiedResourceForeground#7DA6CF
  • gitDecoration.renamedResourceForeground#6A70D7
  • gitDecoration.untrackedResourceForeground#CECFDF
  • input.background#020302
  • input.border#605C5A
  • input.foreground#F3EFED
  • input.placeholderForeground#605C5A
  • inputOption.activeBorder#6A70D7
  • inputValidation.errorBorder#D77474
  • inputValidation.infoBorder#7DA6CF
  • inputValidation.warningBorder#D3A679
  • list.activeSelectionBackground#D3977970
  • list.activeSelectionForeground#F3EFED
  • list.dropBackground#0E0E11
  • list.dropBetweenBackground#191F1A
  • list.errorForeground#D77474
  • list.focusBackground#D3977950
  • list.focusForeground#F3EFED
  • list.highlightForeground#6A70D7
  • list.hoverBackground#D3977920
  • list.hoverForeground#F3EFED
  • list.inactiveFocusBackground#050505
  • list.inactiveSelectionBackground#D3977960
  • list.inactiveSelectionForeground#CECFDF
  • list.warningForeground#D3A679
  • listFilterWidget.background#0E0E11
  • listFilterWidget.noMatchesOutline#D77474
  • listFilterWidget.outline#191F1A
  • merge.border#191F1A
  • merge.currentContentBackground#7DA6CF20
  • merge.currentHeaderBackground#7DA6CF40
  • merge.incomingContentBackground#3C903C20
  • merge.incomingHeaderBackground#3C903C40
  • mergeEditor.change.background#D3A679
  • notificationLink.foreground#7DA6CF
  • notifications.background#050505
  • notifications.border#191F1A
  • notifications.foreground#F3EFED
  • notificationsErrorIcon.foreground#D77474
  • notificationsInfoIcon.foreground#7DA6CF
  • notificationsWarningIcon.foreground#D3A679
  • panel.background#050505
  • panel.border#6A70D7
  • panelInput.border#605C5A
  • panelTitle.activeBorder#6A70D7
  • panelTitle.activeForeground#F3EFED
  • panelTitle.inactiveForeground#605C5A
  • peekView.border#D39779
  • peekViewEditor.background#020302
  • peekViewEditor.matchHighlightBackground#27284470
  • peekViewResult.background#020302
  • peekViewResult.fileForeground#F3EFED
  • peekViewResult.lineForeground#F3EFED
  • peekViewResult.matchHighlightBackground#0D110D70
  • peekViewResult.selectionBackground#050505
  • peekViewResult.selectionForeground#F3EFED
  • peekViewTitle.background#020302
  • peekViewTitleDescription.foreground#CECFDF
  • peekViewTitleLabel.foreground#F3EFED
  • pickerGroup.border#D39779
  • pickerGroup.foreground#DFC9BF
  • progressBar.background#6A70D7
  • selection.background#D3977950
  • settings.checkboxBackground#020302
  • settings.checkboxBorder#191F1A
  • settings.checkboxForeground#F3EFED
  • settings.dropdownBackground#020302
  • settings.dropdownBorder#191F1A
  • settings.dropdownForeground#F3EFED
  • settings.focusedRowBackground#0D110D70
  • settings.focusedRowBorder#605C5A
  • settings.headerBorder#191F1A
  • settings.headerForeground#F3EFED
  • settings.inactiveSelectedItemBorder#605C5A
  • settings.modifiedItemIndicator#D3A679
  • settings.numberInputBackground#020302
  • settings.numberInputBorder#605C5A
  • settings.numberInputForeground#F3EFED
  • settings.rowHoverBackground#0D110D70
  • settings.settingsHeaderHoverForeground#F3EFED
  • settings.textInputBackground#020302
  • settings.textInputBorder#605C5A
  • settings.textInputForeground#F3EFED
  • sideBar.background#020302
  • sideBarActivityBarTop.border#191F1A
  • sideBarSectionHeader.background#050505
  • sideBarSectionHeader.border#191F1A
  • sideBarStickyScroll.background#020302
  • sideBarStickyScroll.border#191F1A
  • sideBarStickyScroll.shadow#191F1A
  • sideBarTitle.background#020302
  • sideBarTitle.foreground#F3EFED
  • statusBar.background#D39779
  • statusBar.debuggingBackground#D3A679
  • statusBar.debuggingForeground#0C0C0D
  • statusBar.foreground#0C0C0D
  • statusBar.noFolderBackground#CECFDF
  • statusBar.noFolderForeground#0C0C0D
  • statusBarItem.activeBackground#D39779aa
  • statusBarItem.errorBackground#D77474
  • statusBarItem.errorForeground#0C0C0D
  • statusBarItem.errorHoverBackground#D77474aa
  • statusBarItem.hoverBackground#D39779aa
  • statusBarItem.prominentBackground#D39779aa
  • statusBarItem.prominentForeground#0C0C0D
  • statusBarItem.prominentHoverBackground#D39779aa
  • statusBarItem.prominentHoverForeground#0C0C0D
  • statusBarItem.remoteBackground#6A70D7
  • statusBarItem.remoteForeground#F3EFED
  • statusBarItem.remoteHoverBackground#6A70D7aa
  • statusBarItem.warningBackground#D3A679
  • statusBarItem.warningForeground#0C0C0D
  • statusBarItem.warningHoverBackground#D3A679aa
  • tab.activeBackground#050505
  • tab.activeBorderTop#6A70D7
  • tab.activeForeground#F3EFED
  • tab.border#191F1A
  • tab.hoverBackground#05050580
  • tab.hoverForeground#F3EFED
  • tab.inactiveBackground#020302
  • tab.inactiveForeground#605C5A
  • tab.selectedBackground#0D110D70
  • terminal.ansiBlack#000000
  • terminal.ansiBlue#747EBA
  • terminal.ansiBrightBlack#373737
  • terminal.ansiBrightBlue#E9ECFB
  • terminal.ansiBrightCyan#68DCDA
  • terminal.ansiBrightGreen#61CD8D
  • terminal.ansiBrightMagenta#EF39D8
  • terminal.ansiBrightRed#E98393
  • terminal.ansiBrightWhite#FFFFFF
  • terminal.ansiBrightYellow#D1A85A
  • terminal.ansiCyan#438685
  • terminal.ansiGreen#45845E
  • terminal.ansiMagenta#CC2CB8
  • terminal.ansiRed#C65567
  • terminal.ansiWhite#F1EEEA
  • terminal.ansiYellow#94773D
  • terminal.background#020302
  • terminal.border#191F1A
  • terminal.foreground#F3EFED
  • terminal.inactiveSelectionBackground#30262170
  • terminal.selectionBackground#30262170
  • textBlockQuote.background#0E0E11
  • textBlockQuote.border#191F1A
  • textCodeBlock.background#0E0E11
  • textLink.activeForeground#7DA6CF
  • textLink.foreground#D39779
  • textPreformat.background#0E0E11
  • textPreformat.foreground#F3EFED
  • textSeparator.foreground#F3EFED
  • titleBar.activeBackground#050505
  • titleBar.activeForeground#F3EFED
  • titleBar.inactiveBackground#050505
  • titleBar.inactiveForeground#605C5A
  • widget.border#191F1A

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
meta.tag, string#F3EFED
meta.diff, meta.diff.header#605C5A
meta.link.reference.def.restructuredtext, string.other.link.description, string.other.link.title#D2D4E9
emphasisitalic
strongbold
invalid#D77474strikethrough
invalid.deprecated#F3EFEDunderline italic
header#D2D4E9
source.ini, source.ignore, source#CECFDF
markup.inserted#D2D4E9
markup.deleted#D77474
markup.changed#7DA6CF
markup.error#D77474
markup.underlineunderline
markup.bold#D3A679bold
markup.heading#6A70D7bold
markup.italic#CECFDFitalic
markup.inline.raw, markup.raw.restructuredtext#6A70D7
markup.underline.link, markup.underline.link.image, markup.quote#7DA6CF
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext#D39779
meta.separator.markdown#6A70D7
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown#E5D5CD
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#D39779
entity.name.tag, entity.other.attribute-name.parent-selector#D0D1E7
entity.other.attribute-name#D39779
entity.name.function, meta.function-call, meta.method-call, meta.method#6A70D7
meta.selector.css, meta.at-rule.function variable, meta.at-rule.mixin variable, variable.parameter, entity.name.variable.parameter#E7DBD5
support#B4DAB6
entity.name, variable.other.key#6A70D7
entity.name.type#C6C7E1
entity.name.type.module, entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type#B9ACD2
entity.other.attribute-name, entity.other.attribute-name.pseudo-class.css#E5D8D1
entity.other.attribute-name.class.css#6A70D7
storage.class, storage.type#D39779
storage.modifier#CDE4CE
comment, punctuation.definition.comment, unused.comment, wildcard.comment#605C5A
constant#D2D4E9
constant.other.color#DBC4B8
constant.character.escape, constant.character.string.escape, constant.regexp, constant.language#D1AF9E
constant.other.date, constant.other.timestamp#E0CCC3
keyword.operator#E3EDE4
keyword.other.unit#D8BEB1
keyword.control, keyword.other.template, keyword.other.substitution#BADEBC
keyword.other.this#D2D4E9
keyword.control.import, keyword.control.from#B7D2BC
keyword.control.new, keyword.operator.new, keyword.other.important.css#D39779
keyword.control.flow, keyword.control.loop, keyword.control.conditional, keyword.operator.logical, keyword.operator.relational, keyword.operator.comparison, keyword.operator.ternary#B4D9C5
meta.attribute-selector.scss#C3C4E0
entity.name.tag.css, entity.name.tag.less, entity.name.tag.custom.css#D0D1E7
entity.name.tag.wildcard.css, entity.name.tag.wildcard.less, entity.name.tag.wildcard.scss, entity.name.tag.wildcard.sass#CDCAE2
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#D39779
support.constant.property-value.css, constant.numeric.css#CECFDF
keyword.control.at-rule.apply.tailwind#B7D2BC
keyword.control.at-rule.tailwind.tailwind#BADEBC
keyword.control.at-rule.layer.tailwind#B4D9C5
meta.selector#C3C4E0
punctuation.definition.string.begin, punctuation.definition.string.end, punctuation.support.type.property-name.begin, punctuation.support.type.property-name.end#D4DDD5
punctuation.definition.constant.restructuredtext#D2D4E9
string.quoted.docstring.multi#6A70D7
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#D4DDD5
punctuation, punctuation.definition.tag, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html#CDCAE2
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#F1EEEA
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#E8EDEA
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#F9FBF9
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#EBF0EC
punctuation.definition.directive.restructuredtext#D2D4E9
variable#C1DCC3
variable.other.alias.yaml#C1DCC3underline
variable.language, variable.parameter.function.language.special#D1AF9E
variable.other.constant#DBEBE0
support.variable#C1DCC3
variable.other.property, support.variable.property, variable.object.property, variable.other.object.property#C9DFD1
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#F3EFE8
storage#E0CCC3
string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp#94773D
punctuation.definition.group.capture.regexp#C65567
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end#C65567
punctuation.definition.character-class.regexp#D1A85A
punctuation.definition.group.regexp#E9ECFB
punctuation.definition.group.assertion.regexp, keyword.operator.negation.regexp#C65567
meta.assertion.look-ahead.regexp#E9ECFB
source.json meta.structure.dictionary.json support.type.property-name.json#6A70D7
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#D39779
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#6A70D7
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#D39779
token.info-token#7DA6CF
token.warn-token#D3A679
token.error-token#D77474
token.debug-token#D3A679