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#18111170
  • activityBar.activeBorder#DE5455
  • activityBar.background#110E0E
  • activityBar.foreground#F4ECEC
  • activityBar.inactiveForeground#795A5A
  • activityBarBadge.background#DD706F
  • activityBarBadge.foreground#151414
  • activityBarTop.foreground#F4ECEC
  • badge.background#DD706F
  • badge.foreground#151414
  • breadcrumb.activeForeground#F4ECEC
  • breadcrumb.activeSelectionForeground#F4ECEC
  • breadcrumb.background#110E0E
  • breadcrumb.focusForeground#F4ECEC
  • breadcrumb.foreground#795A5A
  • breadcrumbPicker.background#110E0E
  • button.background#DD706Fdb
  • button.foreground#151414
  • button.hoverBackground#DD706F
  • button.secondaryBackground#DE5455db
  • button.secondaryForeground#F4ECEC
  • button.secondaryHoverBackground#DE5455
  • checkbox.background#0B0A0A
  • checkbox.foreground#F4ECEC
  • debugToolBar.background#74A6D8
  • debugToolBar.foreground#151414
  • descriptionForeground#DFC9C9
  • diffEditor.diagonalFill#74A6D8
  • diffEditor.insertedLineBackground#74A6D840
  • diffEditor.insertedTextBackground#74A6D850
  • diffEditor.insertedTextBorder#74A6D8
  • diffEditor.removedLineBackground#E26A6A40
  • diffEditor.removedTextBackground#E26A6A50
  • diffEditor.removedTextBorder#E26A6A
  • diffEditorGutter.insertedLineBackground#74A6D8
  • diffEditorGutter.removedLineBackground#E26A6A
  • disabledForeground#795A5A
  • dropdown.background#2D2424
  • dropdown.border#251D1E
  • dropdown.foreground#F4ECEC
  • editor.background#0B0A0A
  • editor.findMatchBackground#4E272770
  • editor.findMatchForeground#F4ECEC
  • editor.findMatchHighlightBackground#18111170
  • editor.findMatchHighlightForeground#F4ECEC
  • editor.findRangeHighlightBackground#38242470
  • editor.foldBackground#18111170
  • editor.foldPlaceholderForeground#F4ECEC
  • editor.foreground#F4ECEC
  • editor.hoverHighlightBackground#18111170
  • editor.inactiveSelectionBackground#38242470
  • editor.lineHighlightBackground#00000010
  • editor.placeholder.foreground#DFC9C9
  • editor.rangeHighlightBackground#18111170
  • editor.selectionBackground#38242470
  • editor.selectionForeground#F4ECEC
  • editor.selectionHighlightBackground#38242470
  • editor.snippetFinalTabstopHighlightBackground#18111170
  • editor.snippetTabstopHighlightBackground#18111170
  • editor.symbolHighlightBackground#18111170
  • editor.wordHighlightBackground#18111170
  • editor.wordHighlightStrongBackground#18111150
  • editor.wordHighlightTextBackground#18111170
  • editorCodeLens.foreground#795A5A
  • editorCursor.background#18111170
  • editorCursor.foreground#DE5455
  • editorError.foreground#E26A6A
  • editorGroup.border#251D1E
  • editorGroup.dropBackground#2D2424
  • editorGroup.emptyBackground#0B0A0A
  • editorGroupHeader.border#251D1E
  • editorGroupHeader.tabsBackground#0B0A0A
  • editorGutter.addedBackground#339933
  • editorGutter.background#0B0A0A
  • editorGutter.commentRangeForeground#795A5A
  • editorGutter.deletedBackground#E26A6A
  • editorGutter.modifiedBackground#74A6D8
  • editorHint.foreground#339933
  • editorHoverWidget.background#0B0A0A
  • editorHoverWidget.border#251D1E
  • editorHoverWidget.foreground#F4ECEC
  • editorHoverWidget.highlightForeground#F4ECEC
  • editorHoverWidget.statusBarBackground#0B0A0A
  • editorIndentGuide.activeBackground1#DE5455
  • editorIndentGuide.background1#18111170
  • editorInfo.foreground#74A6D8
  • editorLineNumber.activeForeground#DE5455
  • editorLineNumber.dimmedForeground#795A5A90
  • editorLineNumber.foreground#795A5A
  • editorLink.activeForeground#74A6D8
  • editorMarkerNavigation.background#110E0E
  • editorMarkerNavigationError.background#110E0E
  • editorMarkerNavigationWarning.background#110E0E
  • editorMultiCursor.primary.background#18111170
  • editorMultiCursor.primary.foreground#DE5455
  • editorMultiCursor.secondary.background#18111170
  • editorMultiCursor.secondary.foreground#F4ECEC
  • editorOverviewRuler.addedForeground#339933
  • editorOverviewRuler.border#251D1E
  • editorOverviewRuler.commentForeground#795A5A
  • editorOverviewRuler.commonContentForeground#F4ECEC
  • editorOverviewRuler.currentContentForeground#74A6D8
  • editorOverviewRuler.deletedForeground#E26A6A
  • editorOverviewRuler.errorForeground#E26A6A
  • editorOverviewRuler.findMatchForeground#F4ECEC
  • editorOverviewRuler.incomingContentForeground#339933
  • editorOverviewRuler.infoForeground#74A6D8
  • editorOverviewRuler.modifiedForeground#74A6D8
  • editorOverviewRuler.rangeHighlightForeground#18111170
  • editorOverviewRuler.selectionHighlightForeground#38242470
  • editorOverviewRuler.warningForeground#DDA66F
  • editorOverviewRuler.wordHighlightForeground#18111170
  • editorOverviewRuler.wordHighlightStrongForeground#18111170
  • editorRuler.foreground#18111170
  • editorSuggestWidget.background#0B0A0A
  • editorSuggestWidget.border#251D1E
  • editorSuggestWidget.focusHighlightForeground#F4ECEC
  • editorSuggestWidget.foreground#795A5A
  • editorSuggestWidget.highlightForeground#F4ECEC
  • editorSuggestWidget.selectedBackground#DD706F80
  • editorSuggestWidget.selectedForeground#F4ECEC
  • editorUnicodeHighlight.background#18111170
  • editorWarning.foreground#DDA66F
  • editorWhitespace.foreground#18111170
  • editorWidget.background#0B0A0A
  • editorWidget.border#251D1E
  • editorWidget.foreground#F4ECEC
  • errorForeground#E26A6A
  • extensionButton.prominentBackground#DD706Faa
  • extensionButton.prominentForeground#151414
  • extensionButton.prominentHoverBackground#DD706F
  • focusBorder#251D1E
  • foreground#F4ECEC
  • gitDecoration.addedResourceForeground#339933
  • gitDecoration.conflictingResourceForeground#DDA66F
  • gitDecoration.deletedResourceForeground#E26A6A
  • gitDecoration.ignoredResourceForeground#795A5A
  • gitDecoration.modifiedResourceForeground#74A6D8
  • gitDecoration.renamedResourceForeground#DE5455
  • gitDecoration.untrackedResourceForeground#DFC9C9
  • input.background#0B0A0A
  • input.border#795A5A
  • input.foreground#F4ECEC
  • input.placeholderForeground#795A5A
  • inputOption.activeBorder#DE5455
  • inputValidation.errorBorder#E26A6A
  • inputValidation.infoBorder#74A6D8
  • inputValidation.warningBorder#DDA66F
  • list.activeSelectionBackground#DD706F70
  • list.activeSelectionForeground#F4ECEC
  • list.dropBackground#2D2424
  • list.dropBetweenBackground#251D1E
  • list.errorForeground#E26A6A
  • list.focusBackground#DD706F50
  • list.focusForeground#F4ECEC
  • list.highlightForeground#DE5455
  • list.hoverBackground#DD706F20
  • list.hoverForeground#F4ECEC
  • list.inactiveFocusBackground#110E0E
  • list.inactiveSelectionBackground#DD706F60
  • list.inactiveSelectionForeground#DFC9C9
  • list.warningForeground#DDA66F
  • listFilterWidget.background#2D2424
  • listFilterWidget.noMatchesOutline#E26A6A
  • listFilterWidget.outline#251D1E
  • merge.border#251D1E
  • merge.currentContentBackground#74A6D820
  • merge.currentHeaderBackground#74A6D840
  • merge.incomingContentBackground#33993320
  • merge.incomingHeaderBackground#33993340
  • mergeEditor.change.background#DDA66F
  • notificationLink.foreground#74A6D8
  • notifications.background#110E0E
  • notifications.border#251D1E
  • notifications.foreground#F4ECEC
  • notificationsErrorIcon.foreground#E26A6A
  • notificationsInfoIcon.foreground#74A6D8
  • notificationsWarningIcon.foreground#DDA66F
  • panel.background#110E0E
  • panel.border#DE5455
  • panelInput.border#795A5A
  • panelTitle.activeBorder#DE5455
  • panelTitle.activeForeground#F4ECEC
  • panelTitle.inactiveForeground#795A5A
  • peekView.border#DD706F
  • peekViewEditor.background#0B0A0A
  • peekViewEditor.matchHighlightBackground#4E272770
  • peekViewResult.background#0B0A0A
  • peekViewResult.fileForeground#F4ECEC
  • peekViewResult.lineForeground#F4ECEC
  • peekViewResult.matchHighlightBackground#18111170
  • peekViewResult.selectionBackground#110E0E
  • peekViewResult.selectionForeground#F4ECEC
  • peekViewTitle.background#0B0A0A
  • peekViewTitleDescription.foreground#DFC9C9
  • peekViewTitleLabel.foreground#F4ECEC
  • pickerGroup.border#DD706F
  • pickerGroup.foreground#E7BCBB
  • progressBar.background#DE5455
  • selection.background#DD706F50
  • settings.checkboxBackground#0B0A0A
  • settings.checkboxBorder#251D1E
  • settings.checkboxForeground#F4ECEC
  • settings.dropdownBackground#0B0A0A
  • settings.dropdownBorder#251D1E
  • settings.dropdownForeground#F4ECEC
  • settings.focusedRowBackground#18111170
  • settings.focusedRowBorder#795A5A
  • settings.headerBorder#251D1E
  • settings.headerForeground#F4ECEC
  • settings.inactiveSelectedItemBorder#795A5A
  • settings.modifiedItemIndicator#DDA66F
  • settings.numberInputBackground#0B0A0A
  • settings.numberInputBorder#795A5A
  • settings.numberInputForeground#F4ECEC
  • settings.rowHoverBackground#18111170
  • settings.settingsHeaderHoverForeground#F4ECEC
  • settings.textInputBackground#0B0A0A
  • settings.textInputBorder#795A5A
  • settings.textInputForeground#F4ECEC
  • sideBar.background#0B0A0A
  • sideBarActivityBarTop.border#251D1E
  • sideBarSectionHeader.background#110E0E
  • sideBarSectionHeader.border#251D1E
  • sideBarStickyScroll.background#0B0A0A
  • sideBarStickyScroll.border#251D1E
  • sideBarStickyScroll.shadow#251D1E
  • sideBarTitle.background#0B0A0A
  • sideBarTitle.foreground#F4ECEC
  • statusBar.background#DD706F
  • statusBar.debuggingBackground#DDA66F
  • statusBar.debuggingForeground#151414
  • statusBar.foreground#151414
  • statusBar.noFolderBackground#DFC9C9
  • statusBar.noFolderForeground#151414
  • statusBarItem.activeBackground#DD706Faa
  • statusBarItem.errorBackground#E26A6A
  • statusBarItem.errorForeground#151414
  • statusBarItem.errorHoverBackground#E26A6Aaa
  • statusBarItem.hoverBackground#DD706Faa
  • statusBarItem.prominentBackground#DD706Faa
  • statusBarItem.prominentForeground#151414
  • statusBarItem.prominentHoverBackground#DD706Faa
  • statusBarItem.prominentHoverForeground#151414
  • statusBarItem.remoteBackground#DE5455
  • statusBarItem.remoteForeground#F4ECEC
  • statusBarItem.remoteHoverBackground#DE5455aa
  • statusBarItem.warningBackground#DDA66F
  • statusBarItem.warningForeground#151414
  • statusBarItem.warningHoverBackground#DDA66Faa
  • tab.activeBackground#110E0E
  • tab.activeBorderTop#DE5455
  • tab.activeForeground#F4ECEC
  • tab.border#251D1E
  • tab.hoverBackground#110E0E80
  • tab.hoverForeground#F4ECEC
  • tab.inactiveBackground#0B0A0A
  • tab.inactiveForeground#795A5A
  • tab.selectedBackground#18111170
  • terminal.ansiBlack#000000
  • terminal.ansiBlue#9B66D6
  • terminal.ansiBrightBlack#3D3D3D
  • terminal.ansiBrightBlue#9E61E0
  • terminal.ansiBrightCyan#6EF0F0
  • terminal.ansiBrightGreen#85E596
  • terminal.ansiBrightMagenta#CD55EE
  • terminal.ansiBrightRed#E5A385
  • terminal.ansiBrightWhite#F8F8F7
  • terminal.ansiBrightYellow#FCEDE1
  • terminal.ansiCyan#3BBBBB
  • terminal.ansiGreen#4EA95F
  • terminal.ansiMagenta#C72DF2
  • terminal.ansiRed#A97158
  • terminal.ansiWhite#F2F1EB
  • terminal.ansiYellow#C98C5B
  • terminal.background#0B0A0A
  • terminal.border#251D1E
  • terminal.foreground#F4ECEC
  • terminal.inactiveSelectionBackground#38242470
  • terminal.selectionBackground#38242470
  • textBlockQuote.background#2D2424
  • textBlockQuote.border#251D1E
  • textCodeBlock.background#2D2424
  • textLink.activeForeground#74A6D8
  • textLink.foreground#DD706F
  • textPreformat.background#2D2424
  • textPreformat.foreground#F4ECEC
  • textSeparator.foreground#F4ECEC
  • titleBar.activeBackground#110E0E
  • titleBar.activeForeground#F4ECEC
  • titleBar.inactiveBackground#110E0E
  • titleBar.inactiveForeground#795A5A
  • widget.border#251D1E

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
meta.tag, string#F4ECEC
meta.diff, meta.diff.header#795A5A
meta.link.reference.def.restructuredtext, string.other.link.description, string.other.link.title#F0D1D2
emphasisitalic
strongbold
invalid#E26A6Astrikethrough
invalid.deprecated#F4ECECunderline italic
header#F0D1D2
source.ini, source.ignore, source#DFC9C9
markup.inserted#F0D1D2
markup.deleted#E26A6A
markup.changed#74A6D8
markup.error#E26A6A
markup.underlineunderline
markup.bold#DDA66Fbold
markup.heading#DE5455bold
markup.italic#DFC9C9italic
markup.inline.raw, markup.raw.restructuredtext#DE5455
markup.underline.link, markup.underline.link.image, markup.quote#74A6D8
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext#DD706F
meta.separator.markdown#DE5455
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown#CFEDE3
markup.heading.markdown punctuation.definition.string.begin, markup.heading.markdown punctuation.definition.string.end#DDA66F
entity.name.class, entity.name.type.class, entity.other.inherited-class#DD706F
entity.name.tag, entity.other.attribute-name.parent-selector#EFD2D2
entity.other.attribute-name#DD706F
entity.name.function, meta.function-call, meta.method-call, meta.method#DE5455
meta.selector.css, meta.at-rule.function variable, meta.at-rule.mixin variable, variable.parameter, entity.name.variable.parameter#E3C0BF
support#DD9C9D
entity.name, variable.other.key#DE5455
entity.name.type#E9C4C4
entity.name.type.module, entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type#DEB9AB
entity.other.attribute-name, entity.other.attribute-name.pseudo-class.css#EBD1D0
entity.other.attribute-name.class.css#DE5455
storage.class, storage.type#DD706F
storage.modifier#E8C5C5
comment, punctuation.definition.comment, unused.comment, wildcard.comment#795A5A
constant#F0D1D2
constant.other.color#DC9E9D
constant.character.escape, constant.character.string.escape, constant.regexp, constant.language#DE9797
constant.other.date, constant.other.timestamp#EAC7C8
keyword.operator#DDC0C0
keyword.other.unit#E0AAA9
keyword.control, keyword.other.template, keyword.other.substitution#E3ABAB
keyword.other.this#F0D1D2
keyword.control.import, keyword.control.from#DCC3BC
keyword.control.new, keyword.operator.new, keyword.other.important.css#DD706F
keyword.control.flow, keyword.control.loop, keyword.control.conditional, keyword.operator.logical, keyword.operator.relational, keyword.operator.comparison, keyword.operator.ternary#E3BFB0
meta.attribute-selector.scss#E7C0C1
entity.name.tag.css, entity.name.tag.less, entity.name.tag.custom.css#EFD2D2
entity.name.tag.wildcard.css, entity.name.tag.wildcard.less, entity.name.tag.wildcard.scss, entity.name.tag.wildcard.sass#E8CDC5
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#DD706F
support.constant.property-value.css, constant.numeric.css#DFC9C9
keyword.control.at-rule.apply.tailwind#DCC3BC
keyword.control.at-rule.tailwind.tailwind#E3ABAB
keyword.control.at-rule.layer.tailwind#E3BFB0
meta.selector#E7C0C1
punctuation.definition.string.begin, punctuation.definition.string.end, punctuation.support.type.property-name.begin, punctuation.support.type.property-name.end#DDCFCF
punctuation.definition.constant.restructuredtext#F0D1D2
string.quoted.docstring.multi#DE5455
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#DDCFCF
punctuation, punctuation.definition.tag, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html#E8CDC5
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#F2F1EB
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#F7F4F3
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#E4DBD7
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#F7F4F3
punctuation.definition.directive.restructuredtext#F0D1D2
variable#E4C3C3
variable.other.alias.yaml#E4C3C3underline
variable.language, variable.parameter.function.language.special#DE9797
variable.other.constant#EEE1D7
support.variable#E4C3C3
variable.other.property, support.variable.property, variable.object.property, variable.other.object.property#E3CFC4
support.function.magic, variable.other.predefined, storage.modifier.async, keyword.control.trycatch, keyword.control.trycatch.js, keyword.control.trycatch.ts#DDA66F
support.function, support.type.property-name#DBEFF0
storage#E6BCBD
string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp#C98C5B
punctuation.definition.group.capture.regexp#A97158
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end#A97158
punctuation.definition.character-class.regexp#FCEDE1
punctuation.definition.group.regexp#9E61E0
punctuation.definition.group.assertion.regexp, keyword.operator.negation.regexp#A97158
meta.assertion.look-ahead.regexp#9E61E0
source.json meta.structure.dictionary.json support.type.property-name.json#DE5455
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#DD706F
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#74A6D8
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#DDA66F
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#E26A6A
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#339933
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#DE5455
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#DD706F
token.info-token#74A6D8
token.warn-token#DDA66F
token.error-token#E26A6A
token.debug-token#DDA66F