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#1D111170
  • activityBar.activeBorder#DC7171
  • activityBar.background#141010
  • activityBar.foreground#F6EFEF
  • activityBar.inactiveForeground#606B64
  • activityBarBadge.background#8CC09B
  • activityBarBadge.foreground#1D1111
  • activityBarTop.foreground#F6EFEF
  • badge.background#8CC09B
  • badge.foreground#1D1111
  • breadcrumb.activeForeground#F6EFEF
  • breadcrumb.activeSelectionForeground#F6EFEF
  • breadcrumb.background#141010
  • breadcrumb.focusForeground#F6EFEF
  • breadcrumb.foreground#606B64
  • breadcrumbPicker.background#141010
  • button.background#8CC09Bdb
  • button.foreground#1D1111
  • button.hoverBackground#8CC09B
  • button.secondaryBackground#DC7171db
  • button.secondaryForeground#1D1111
  • button.secondaryHoverBackground#DC7171
  • checkbox.background#101913
  • checkbox.foreground#F6EFEF
  • debugToolBar.background#8EA6BD
  • debugToolBar.foreground#1D1111
  • descriptionForeground#EEDDDD
  • diffEditor.diagonalFill#8EA6BD
  • diffEditor.insertedLineBackground#8EA6BD40
  • diffEditor.insertedTextBackground#8EA6BD50
  • diffEditor.insertedTextBorder#8EA6BD
  • diffEditor.removedLineBackground#B6959540
  • diffEditor.removedTextBackground#B6959550
  • diffEditor.removedTextBorder#B69595
  • diffEditorGutter.insertedLineBackground#8EA6BD
  • diffEditorGutter.removedLineBackground#B69595
  • disabledForeground#606B64
  • dropdown.background#271C1C
  • dropdown.border#2A1E1E
  • dropdown.foreground#F6EFEF
  • editor.background#101913
  • editor.findMatchBackground#4C2F2F70
  • editor.findMatchForeground#F6EFEF
  • editor.findMatchHighlightBackground#1D111170
  • editor.findMatchHighlightForeground#F6EFEF
  • editor.findRangeHighlightBackground#3E232270
  • editor.foldBackground#1D111170
  • editor.foldPlaceholderForeground#F6EFEF
  • editor.foreground#F6EFEF
  • editor.hoverHighlightBackground#1D111170
  • editor.inactiveSelectionBackground#3E232270
  • editor.lineHighlightBackground#00000010
  • editor.placeholder.foreground#EEDDDD
  • editor.rangeHighlightBackground#1D111170
  • editor.selectionBackground#3E232270
  • editor.selectionForeground#F6EFEF
  • editor.selectionHighlightBackground#3E232270
  • editor.snippetFinalTabstopHighlightBackground#1D111170
  • editor.snippetTabstopHighlightBackground#1D111170
  • editor.symbolHighlightBackground#1D111170
  • editor.wordHighlightBackground#1D111170
  • editor.wordHighlightStrongBackground#1D111150
  • editor.wordHighlightTextBackground#1D111170
  • editorCodeLens.foreground#606B64
  • editorCursor.background#1D111170
  • editorCursor.foreground#DC7171
  • editorError.foreground#B69595
  • editorGroup.border#2A1E1E
  • editorGroup.dropBackground#271C1C
  • editorGroup.emptyBackground#101913
  • editorGroupHeader.border#2A1E1E
  • editorGroupHeader.tabsBackground#101913
  • editorGutter.addedBackground#39A739
  • editorGutter.background#101913
  • editorGutter.commentRangeForeground#606B64
  • editorGutter.deletedBackground#B69595
  • editorGutter.modifiedBackground#8EA6BD
  • editorHint.foreground#39A739
  • editorHoverWidget.background#101913
  • editorHoverWidget.border#2A1E1E
  • editorHoverWidget.foreground#F6EFEF
  • editorHoverWidget.highlightForeground#F6EFEF
  • editorHoverWidget.statusBarBackground#101913
  • editorIndentGuide.activeBackground1#DC7171
  • editorIndentGuide.background1#1D111170
  • editorInfo.foreground#8EA6BD
  • editorLineNumber.activeForeground#DC7171
  • editorLineNumber.dimmedForeground#606B6490
  • editorLineNumber.foreground#606B64
  • editorLink.activeForeground#8EA6BD
  • editorMarkerNavigation.background#141010
  • editorMarkerNavigationError.background#141010
  • editorMarkerNavigationWarning.background#141010
  • editorMultiCursor.primary.background#1D111170
  • editorMultiCursor.primary.foreground#DC7171
  • editorMultiCursor.secondary.background#1D111170
  • editorMultiCursor.secondary.foreground#F6EFEF
  • editorOverviewRuler.addedForeground#39A739
  • editorOverviewRuler.border#2A1E1E
  • editorOverviewRuler.commentForeground#606B64
  • editorOverviewRuler.commonContentForeground#F6EFEF
  • editorOverviewRuler.currentContentForeground#8EA6BD
  • editorOverviewRuler.deletedForeground#B69595
  • editorOverviewRuler.errorForeground#B69595
  • editorOverviewRuler.findMatchForeground#F6EFEF
  • editorOverviewRuler.incomingContentForeground#39A739
  • editorOverviewRuler.infoForeground#8EA6BD
  • editorOverviewRuler.modifiedForeground#8EA6BD
  • editorOverviewRuler.rangeHighlightForeground#1D111170
  • editorOverviewRuler.selectionHighlightForeground#3E232270
  • editorOverviewRuler.warningForeground#BFA68D
  • editorOverviewRuler.wordHighlightForeground#1D111170
  • editorOverviewRuler.wordHighlightStrongForeground#1D111170
  • editorRuler.foreground#1D111170
  • editorSuggestWidget.background#101913
  • editorSuggestWidget.border#2A1E1E
  • editorSuggestWidget.focusHighlightForeground#F6EFEF
  • editorSuggestWidget.foreground#606B64
  • editorSuggestWidget.highlightForeground#F6EFEF
  • editorSuggestWidget.selectedBackground#8CC09B80
  • editorSuggestWidget.selectedForeground#F6EFEF
  • editorUnicodeHighlight.background#1D111170
  • editorWarning.foreground#BFA68D
  • editorWhitespace.foreground#1D111170
  • editorWidget.background#101913
  • editorWidget.border#2A1E1E
  • editorWidget.foreground#F6EFEF
  • errorForeground#B69595
  • extensionButton.prominentBackground#8CC09Baa
  • extensionButton.prominentForeground#1D1111
  • extensionButton.prominentHoverBackground#8CC09B
  • focusBorder#2A1E1E
  • foreground#F6EFEF
  • gitDecoration.addedResourceForeground#39A739
  • gitDecoration.conflictingResourceForeground#BFA68D
  • gitDecoration.deletedResourceForeground#B69595
  • gitDecoration.ignoredResourceForeground#606B64
  • gitDecoration.modifiedResourceForeground#8EA6BD
  • gitDecoration.renamedResourceForeground#DC7171
  • gitDecoration.untrackedResourceForeground#EEDDDD
  • input.background#101913
  • input.border#606B64
  • input.foreground#F6EFEF
  • input.placeholderForeground#606B64
  • inputOption.activeBorder#DC7171
  • inputValidation.errorBorder#B69595
  • inputValidation.infoBorder#8EA6BD
  • inputValidation.warningBorder#BFA68D
  • list.activeSelectionBackground#8CC09B70
  • list.activeSelectionForeground#F6EFEF
  • list.dropBackground#271C1C
  • list.dropBetweenBackground#2A1E1E
  • list.errorForeground#B69595
  • list.focusBackground#8CC09B50
  • list.focusForeground#F6EFEF
  • list.highlightForeground#DC7171
  • list.hoverBackground#8CC09B20
  • list.hoverForeground#F6EFEF
  • list.inactiveFocusBackground#141010
  • list.inactiveSelectionBackground#8CC09B60
  • list.inactiveSelectionForeground#EEDDDD
  • list.warningForeground#BFA68D
  • listFilterWidget.background#271C1C
  • listFilterWidget.noMatchesOutline#B69595
  • listFilterWidget.outline#2A1E1E
  • merge.border#2A1E1E
  • merge.currentContentBackground#8EA6BD20
  • merge.currentHeaderBackground#8EA6BD40
  • merge.incomingContentBackground#39A73920
  • merge.incomingHeaderBackground#39A73940
  • mergeEditor.change.background#BFA68D
  • notificationLink.foreground#8EA6BD
  • notifications.background#141010
  • notifications.border#2A1E1E
  • notifications.foreground#F6EFEF
  • notificationsErrorIcon.foreground#B69595
  • notificationsInfoIcon.foreground#8EA6BD
  • notificationsWarningIcon.foreground#BFA68D
  • panel.background#141010
  • panel.border#DC7171
  • panelInput.border#606B64
  • panelTitle.activeBorder#DC7171
  • panelTitle.activeForeground#F6EFEF
  • panelTitle.inactiveForeground#606B64
  • peekView.border#8CC09B
  • peekViewEditor.background#101913
  • peekViewEditor.matchHighlightBackground#4C2F2F70
  • peekViewResult.background#101913
  • peekViewResult.fileForeground#F6EFEF
  • peekViewResult.lineForeground#F6EFEF
  • peekViewResult.matchHighlightBackground#1D111170
  • peekViewResult.selectionBackground#141010
  • peekViewResult.selectionForeground#F6EFEF
  • peekViewTitle.background#101913
  • peekViewTitleDescription.foreground#EEDDDD
  • peekViewTitleLabel.foreground#F6EFEF
  • pickerGroup.border#8CC09B
  • pickerGroup.foreground#EDB5B8
  • progressBar.background#DC7171
  • selection.background#8CC09B50
  • settings.checkboxBackground#101913
  • settings.checkboxBorder#2A1E1E
  • settings.checkboxForeground#F6EFEF
  • settings.dropdownBackground#101913
  • settings.dropdownBorder#2A1E1E
  • settings.dropdownForeground#F6EFEF
  • settings.focusedRowBackground#1D111170
  • settings.focusedRowBorder#606B64
  • settings.headerBorder#2A1E1E
  • settings.headerForeground#F6EFEF
  • settings.inactiveSelectedItemBorder#606B64
  • settings.modifiedItemIndicator#BFA68D
  • settings.numberInputBackground#101913
  • settings.numberInputBorder#606B64
  • settings.numberInputForeground#F6EFEF
  • settings.rowHoverBackground#1D111170
  • settings.settingsHeaderHoverForeground#F6EFEF
  • settings.textInputBackground#101913
  • settings.textInputBorder#606B64
  • settings.textInputForeground#F6EFEF
  • sideBar.background#101913
  • sideBarActivityBarTop.border#2A1E1E
  • sideBarSectionHeader.background#141010
  • sideBarSectionHeader.border#2A1E1E
  • sideBarStickyScroll.background#101913
  • sideBarStickyScroll.border#2A1E1E
  • sideBarStickyScroll.shadow#2A1E1E
  • sideBarTitle.background#101913
  • sideBarTitle.foreground#F6EFEF
  • statusBar.background#8CC09B
  • statusBar.debuggingBackground#BFA68D
  • statusBar.debuggingForeground#1D1111
  • statusBar.foreground#1D1111
  • statusBar.noFolderBackground#EEDDDD
  • statusBar.noFolderForeground#1D1111
  • statusBarItem.activeBackground#8CC09Baa
  • statusBarItem.errorBackground#B69595
  • statusBarItem.errorForeground#1D1111
  • statusBarItem.errorHoverBackground#B69595aa
  • statusBarItem.hoverBackground#8CC09Baa
  • statusBarItem.prominentBackground#8CC09Baa
  • statusBarItem.prominentForeground#1D1111
  • statusBarItem.prominentHoverBackground#8CC09Baa
  • statusBarItem.prominentHoverForeground#1D1111
  • statusBarItem.remoteBackground#DC7171
  • statusBarItem.remoteForeground#1D1111
  • statusBarItem.remoteHoverBackground#DC7171aa
  • statusBarItem.warningBackground#BFA68D
  • statusBarItem.warningForeground#1D1111
  • statusBarItem.warningHoverBackground#BFA68Daa
  • tab.activeBackground#141010
  • tab.activeBorderTop#DC7171
  • tab.activeForeground#F6EFEF
  • tab.border#2A1E1E
  • tab.hoverBackground#14101080
  • tab.hoverForeground#F6EFEF
  • tab.inactiveBackground#101913
  • tab.inactiveForeground#606B64
  • tab.selectedBackground#1D111170
  • terminal.ansiBlack#000000
  • terminal.ansiBlue#707EBD
  • terminal.ansiBrightBlack#353535
  • terminal.ansiBrightBlue#697DD6
  • terminal.ansiBrightCyan#ABE8CB
  • terminal.ansiBrightGreen#93E3A5
  • terminal.ansiBrightMagenta#B590D8
  • terminal.ansiBrightRed#DC6F49
  • terminal.ansiBrightWhite#FBFBFA
  • terminal.ansiBrightYellow#E5F0A2
  • terminal.ansiCyan#48926F
  • terminal.ansiGreen#4E955E
  • terminal.ansiMagenta#986DC2
  • terminal.ansiRed#C56E4F
  • terminal.ansiWhite#EFECE7
  • terminal.ansiYellow#A0B042
  • terminal.background#101913
  • terminal.border#2A1E1E
  • terminal.foreground#F6EFEF
  • terminal.inactiveSelectionBackground#3E232270
  • terminal.selectionBackground#3E232270
  • textBlockQuote.background#271C1C
  • textBlockQuote.border#2A1E1E
  • textCodeBlock.background#271C1C
  • textLink.activeForeground#8EA6BD
  • textLink.foreground#8CC09B
  • textPreformat.background#271C1C
  • textPreformat.foreground#F6EFEF
  • textSeparator.foreground#F6EFEF
  • titleBar.activeBackground#141010
  • titleBar.activeForeground#F6EFEF
  • titleBar.inactiveBackground#141010
  • titleBar.inactiveForeground#606B64
  • widget.border#2A1E1E

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
meta.tag, string#F6EFEF
meta.diff, meta.diff.header#606B64
meta.link.reference.def.restructuredtext, string.other.link.description, string.other.link.title#CAF2D5
emphasisitalic
strongbold
invalid#B69595strikethrough
invalid.deprecated#F6EFEFunderline italic
header#CAF2D5
source.ini, source.ignore, source#EEDDDD
markup.inserted#CAF2D5
markup.deleted#B69595
markup.changed#8EA6BD
markup.error#B69595
markup.underlineunderline
markup.bold#BFA68Dbold
markup.heading#DC7171bold
markup.italic#EEDDDDitalic
markup.inline.raw, markup.raw.restructuredtext#DC7171
markup.underline.link, markup.underline.link.image, markup.quote#8EA6BD
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext#8CC09B
meta.separator.markdown#DC7171
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown#EBADAD
markup.heading.markdown punctuation.definition.string.begin, markup.heading.markdown punctuation.definition.string.end#BFA68D
entity.name.class, entity.name.type.class, entity.other.inherited-class#8CC09B
entity.name.tag, entity.other.attribute-name.parent-selector#F2CACA
entity.other.attribute-name#8CC09B
entity.name.function, meta.function-call, meta.method-call, meta.method#DC7171
meta.selector.css, meta.at-rule.function variable, meta.at-rule.mixin variable, variable.parameter, entity.name.variable.parameter#F0C2C2
support#EBADAE
entity.name, variable.other.key#DC7171
entity.name.type#BEEFC9
entity.name.type.module, entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type#9CE7D1
entity.other.attribute-name, entity.other.attribute-name.pseudo-class.css#EDB5B5
entity.other.attribute-name.class.css#DC7171
storage.class, storage.type#8CC09B
storage.modifier#B5EDC5
comment, punctuation.definition.comment, unused.comment, wildcard.comment#606B64
constant#CAF2D5
constant.other.color#9CE7B1
constant.character.escape, constant.character.string.escape, constant.regexp, constant.language#E8A1A1
constant.other.date, constant.other.timestamp#C1F0CF
keyword.operator#F5D9D6
keyword.other.unit#A9EABC
keyword.control, keyword.other.template, keyword.other.substitution#EAA9A9
keyword.other.this#CAF2D5
keyword.control.import, keyword.control.from#E5A694
keyword.control.new, keyword.operator.new, keyword.other.important.css#8CC09B
keyword.control.flow, keyword.control.loop, keyword.control.conditional, keyword.operator.logical, keyword.operator.relational, keyword.operator.comparison, keyword.operator.ternary#E6B399
meta.attribute-selector.scss#B9EEC9
entity.name.tag.css, entity.name.tag.less, entity.name.tag.custom.css#F2CACA
entity.name.tag.wildcard.css, entity.name.tag.wildcard.less, entity.name.tag.wildcard.scss, entity.name.tag.wildcard.sass#F1C9C6
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#8CC09B
support.constant.property-value.css, constant.numeric.css#EEDDDD
keyword.control.at-rule.apply.tailwind#E5A694
keyword.control.at-rule.tailwind.tailwind#EAA9A9
keyword.control.at-rule.layer.tailwind#E6B399
meta.selector#B9EEC9
punctuation.definition.string.begin, punctuation.definition.string.end, punctuation.support.type.property-name.begin, punctuation.support.type.property-name.end#F0D5D6
punctuation.definition.constant.restructuredtext#CAF2D5
string.quoted.docstring.multi#DC7171
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#F0D5D6
punctuation, punctuation.definition.tag, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html#F1C9C6
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#EFECE7
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#EED4CD
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#F3E2DD
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#EFD2D2
punctuation.definition.directive.restructuredtext#CAF2D5
variable#EDB5B5
variable.other.alias.yaml#EDB5B5underline
variable.language, variable.parameter.function.language.special#E8A1A1
variable.other.constant#F0D2C2
support.variable#EDB5B5
variable.other.property, support.variable.property, variable.object.property, variable.other.object.property#EED7BA
support.function.magic, variable.other.predefined, storage.modifier.async, keyword.control.trycatch, keyword.control.trycatch.js, keyword.control.trycatch.ts#BFA68D
support.function, support.type.property-name#F6E5DA
storage#EEB9B9
string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp#A0B042
punctuation.definition.group.capture.regexp#C56E4F
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end#C56E4F
punctuation.definition.character-class.regexp#E5F0A2
punctuation.definition.group.regexp#697DD6
punctuation.definition.group.assertion.regexp, keyword.operator.negation.regexp#C56E4F
meta.assertion.look-ahead.regexp#697DD6
source.json meta.structure.dictionary.json support.type.property-name.json#DC7171
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#8CC09B
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#8EA6BD
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#BFA68D
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#B69595
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#39A739
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#DC7171
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#8CC09B
token.info-token#8EA6BD
token.warn-token#BFA68D
token.error-token#B69595
token.debug-token#BFA68D