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#23262A70
  • activityBar.activeBorder#73BABF
  • activityBar.background#252223
  • activityBar.foreground#E5DEDC
  • activityBar.inactiveForeground#6D696B
  • activityBarBadge.background#87A8C4
  • activityBarBadge.foreground#222121
  • activityBarTop.foreground#E5DEDC
  • badge.background#87A8C4
  • badge.foreground#222121
  • breadcrumb.activeForeground#E5DEDC
  • breadcrumb.activeSelectionForeground#E5DEDC
  • breadcrumb.background#252223
  • breadcrumb.focusForeground#E5DEDC
  • breadcrumb.foreground#6D696B
  • breadcrumbPicker.background#252223
  • button.background#87A8C4db
  • button.foreground#222121
  • button.hoverBackground#87A8C4
  • button.secondaryBackground#73BABFdb
  • button.secondaryForeground#222121
  • button.secondaryHoverBackground#73BABF
  • checkbox.background#1B1D1D
  • checkbox.foreground#E5DEDC
  • debugToolBar.background#8AA6C1
  • debugToolBar.foreground#222121
  • descriptionForeground#CBD2D8
  • diffEditor.diagonalFill#8AA6C1
  • diffEditor.insertedLineBackground#8AA6C140
  • diffEditor.insertedTextBackground#8AA6C150
  • diffEditor.insertedTextBorder#8AA6C1
  • diffEditor.removedLineBackground#C7858540
  • diffEditor.removedTextBackground#C7858550
  • diffEditor.removedTextBorder#C78585
  • diffEditorGutter.insertedLineBackground#8AA6C1
  • diffEditorGutter.removedLineBackground#C78585
  • disabledForeground#6D696B
  • dropdown.background#353B3C
  • dropdown.border#363032
  • dropdown.foreground#E5DEDC
  • editor.background#1B1D1D
  • editor.findMatchBackground#3E4D5B70
  • editor.findMatchForeground#E5DEDC
  • editor.findMatchHighlightBackground#23262A70
  • editor.findMatchHighlightForeground#E5DEDC
  • editor.findRangeHighlightBackground#48383E70
  • editor.foldBackground#23262A70
  • editor.foldPlaceholderForeground#E5DEDC
  • editor.foreground#E5DEDC
  • editor.hoverHighlightBackground#23262A70
  • editor.inactiveSelectionBackground#48383E70
  • editor.lineHighlightBackground#00000010
  • editor.placeholder.foreground#CBD2D8
  • editor.rangeHighlightBackground#23262A70
  • editor.selectionBackground#48383E70
  • editor.selectionForeground#E5DEDC
  • editor.selectionHighlightBackground#48383E70
  • editor.snippetFinalTabstopHighlightBackground#23262A70
  • editor.snippetTabstopHighlightBackground#23262A70
  • editor.symbolHighlightBackground#23262A70
  • editor.wordHighlightBackground#23262A70
  • editor.wordHighlightStrongBackground#23262A50
  • editor.wordHighlightTextBackground#23262A70
  • editorCodeLens.foreground#6D696B
  • editorCursor.background#23262A70
  • editorCursor.foreground#73BABF
  • editorError.foreground#C78585
  • editorGroup.border#363032
  • editorGroup.dropBackground#353B3C
  • editorGroup.emptyBackground#1B1D1D
  • editorGroupHeader.border#363032
  • editorGroupHeader.tabsBackground#1B1D1D
  • editorGutter.addedBackground#4E924E
  • editorGutter.background#1B1D1D
  • editorGutter.commentRangeForeground#6D696B
  • editorGutter.deletedBackground#C78585
  • editorGutter.modifiedBackground#8AA6C1
  • editorHint.foreground#4E924E
  • editorHoverWidget.background#1B1D1D
  • editorHoverWidget.border#363032
  • editorHoverWidget.foreground#E5DEDC
  • editorHoverWidget.highlightForeground#E5DEDC
  • editorHoverWidget.statusBarBackground#1B1D1D
  • editorIndentGuide.activeBackground1#73BABF
  • editorIndentGuide.background1#23262A70
  • editorInfo.foreground#8AA6C1
  • editorLineNumber.activeForeground#73BABF
  • editorLineNumber.dimmedForeground#6D696B90
  • editorLineNumber.foreground#6D696B
  • editorLink.activeForeground#8AA6C1
  • editorMarkerNavigation.background#252223
  • editorMarkerNavigationError.background#252223
  • editorMarkerNavigationWarning.background#252223
  • editorMultiCursor.primary.background#23262A70
  • editorMultiCursor.primary.foreground#73BABF
  • editorMultiCursor.secondary.background#23262A70
  • editorMultiCursor.secondary.foreground#E5DEDC
  • editorOverviewRuler.addedForeground#4E924E
  • editorOverviewRuler.border#363032
  • editorOverviewRuler.commentForeground#6D696B
  • editorOverviewRuler.commonContentForeground#E5DEDC
  • editorOverviewRuler.currentContentForeground#8AA6C1
  • editorOverviewRuler.deletedForeground#C78585
  • editorOverviewRuler.errorForeground#C78585
  • editorOverviewRuler.findMatchForeground#E5DEDC
  • editorOverviewRuler.incomingContentForeground#4E924E
  • editorOverviewRuler.infoForeground#8AA6C1
  • editorOverviewRuler.modifiedForeground#8AA6C1
  • editorOverviewRuler.rangeHighlightForeground#23262A70
  • editorOverviewRuler.selectionHighlightForeground#48383E70
  • editorOverviewRuler.warningForeground#C4A687
  • editorOverviewRuler.wordHighlightForeground#23262A70
  • editorOverviewRuler.wordHighlightStrongForeground#23262A70
  • editorRuler.foreground#23262A70
  • editorSuggestWidget.background#1B1D1D
  • editorSuggestWidget.border#363032
  • editorSuggestWidget.focusHighlightForeground#E5DEDC
  • editorSuggestWidget.foreground#6D696B
  • editorSuggestWidget.highlightForeground#E5DEDC
  • editorSuggestWidget.selectedBackground#87A8C480
  • editorSuggestWidget.selectedForeground#E5DEDC
  • editorUnicodeHighlight.background#23262A70
  • editorWarning.foreground#C4A687
  • editorWhitespace.foreground#23262A70
  • editorWidget.background#1B1D1D
  • editorWidget.border#363032
  • editorWidget.foreground#E5DEDC
  • errorForeground#C78585
  • extensionButton.prominentBackground#87A8C4aa
  • extensionButton.prominentForeground#222121
  • extensionButton.prominentHoverBackground#87A8C4
  • focusBorder#363032
  • foreground#E5DEDC
  • gitDecoration.addedResourceForeground#4E924E
  • gitDecoration.conflictingResourceForeground#C4A687
  • gitDecoration.deletedResourceForeground#C78585
  • gitDecoration.ignoredResourceForeground#6D696B
  • gitDecoration.modifiedResourceForeground#8AA6C1
  • gitDecoration.renamedResourceForeground#73BABF
  • gitDecoration.untrackedResourceForeground#CBD2D8
  • input.background#1B1D1D
  • input.border#6D696B
  • input.foreground#E5DEDC
  • input.placeholderForeground#6D696B
  • inputOption.activeBorder#73BABF
  • inputValidation.errorBorder#C78585
  • inputValidation.infoBorder#8AA6C1
  • inputValidation.warningBorder#C4A687
  • list.activeSelectionBackground#87A8C470
  • list.activeSelectionForeground#E5DEDC
  • list.dropBackground#353B3C
  • list.dropBetweenBackground#363032
  • list.errorForeground#C78585
  • list.focusBackground#87A8C450
  • list.focusForeground#E5DEDC
  • list.highlightForeground#73BABF
  • list.hoverBackground#87A8C420
  • list.hoverForeground#E5DEDC
  • list.inactiveFocusBackground#252223
  • list.inactiveSelectionBackground#87A8C460
  • list.inactiveSelectionForeground#CBD2D8
  • list.warningForeground#C4A687
  • listFilterWidget.background#353B3C
  • listFilterWidget.noMatchesOutline#C78585
  • listFilterWidget.outline#363032
  • merge.border#363032
  • merge.currentContentBackground#8AA6C120
  • merge.currentHeaderBackground#8AA6C140
  • merge.incomingContentBackground#4E924E20
  • merge.incomingHeaderBackground#4E924E40
  • mergeEditor.change.background#C4A687
  • notificationLink.foreground#8AA6C1
  • notifications.background#252223
  • notifications.border#363032
  • notifications.foreground#E5DEDC
  • notificationsErrorIcon.foreground#C78585
  • notificationsInfoIcon.foreground#8AA6C1
  • notificationsWarningIcon.foreground#C4A687
  • panel.background#252223
  • panel.border#73BABF
  • panelInput.border#6D696B
  • panelTitle.activeBorder#73BABF
  • panelTitle.activeForeground#E5DEDC
  • panelTitle.inactiveForeground#6D696B
  • peekView.border#87A8C4
  • peekViewEditor.background#1B1D1D
  • peekViewEditor.matchHighlightBackground#3E4D5B70
  • peekViewResult.background#1B1D1D
  • peekViewResult.fileForeground#E5DEDC
  • peekViewResult.lineForeground#E5DEDC
  • peekViewResult.matchHighlightBackground#23262A70
  • peekViewResult.selectionBackground#252223
  • peekViewResult.selectionForeground#E5DEDC
  • peekViewTitle.background#1B1D1D
  • peekViewTitleDescription.foreground#CBD2D8
  • peekViewTitleLabel.foreground#E5DEDC
  • pickerGroup.border#87A8C4
  • pickerGroup.foreground#E7C2B6
  • progressBar.background#73BABF
  • selection.background#87A8C450
  • settings.checkboxBackground#1B1D1D
  • settings.checkboxBorder#363032
  • settings.checkboxForeground#E5DEDC
  • settings.dropdownBackground#1B1D1D
  • settings.dropdownBorder#363032
  • settings.dropdownForeground#E5DEDC
  • settings.focusedRowBackground#23262A70
  • settings.focusedRowBorder#6D696B
  • settings.headerBorder#363032
  • settings.headerForeground#E5DEDC
  • settings.inactiveSelectedItemBorder#6D696B
  • settings.modifiedItemIndicator#C4A687
  • settings.numberInputBackground#1B1D1D
  • settings.numberInputBorder#6D696B
  • settings.numberInputForeground#E5DEDC
  • settings.rowHoverBackground#23262A70
  • settings.settingsHeaderHoverForeground#E5DEDC
  • settings.textInputBackground#1B1D1D
  • settings.textInputBorder#6D696B
  • settings.textInputForeground#E5DEDC
  • sideBar.background#1B1D1D
  • sideBarActivityBarTop.border#363032
  • sideBarSectionHeader.background#252223
  • sideBarSectionHeader.border#363032
  • sideBarStickyScroll.background#1B1D1D
  • sideBarStickyScroll.border#363032
  • sideBarStickyScroll.shadow#363032
  • sideBarTitle.background#1B1D1D
  • sideBarTitle.foreground#E5DEDC
  • statusBar.background#87A8C4
  • statusBar.debuggingBackground#C4A687
  • statusBar.debuggingForeground#222121
  • statusBar.foreground#222121
  • statusBar.noFolderBackground#CBD2D8
  • statusBar.noFolderForeground#222121
  • statusBarItem.activeBackground#87A8C4aa
  • statusBarItem.errorBackground#C78585
  • statusBarItem.errorForeground#222121
  • statusBarItem.errorHoverBackground#C78585aa
  • statusBarItem.hoverBackground#87A8C4aa
  • statusBarItem.prominentBackground#87A8C4aa
  • statusBarItem.prominentForeground#222121
  • statusBarItem.prominentHoverBackground#87A8C4aa
  • statusBarItem.prominentHoverForeground#222121
  • statusBarItem.remoteBackground#73BABF
  • statusBarItem.remoteForeground#222121
  • statusBarItem.remoteHoverBackground#73BABFaa
  • statusBarItem.warningBackground#C4A687
  • statusBarItem.warningForeground#222121
  • statusBarItem.warningHoverBackground#C4A687aa
  • tab.activeBackground#252223
  • tab.activeBorderTop#73BABF
  • tab.activeForeground#E5DEDC
  • tab.border#363032
  • tab.hoverBackground#25222380
  • tab.hoverForeground#E5DEDC
  • tab.inactiveBackground#1B1D1D
  • tab.inactiveForeground#6D696B
  • tab.selectedBackground#23262A70
  • terminal.ansiBlack#000000
  • terminal.ansiBlue#5E8CC9
  • terminal.ansiBrightBlack#424242
  • terminal.ansiBrightBlue#A5C8F6
  • terminal.ansiBrightCyan#BFE3F6
  • terminal.ansiBrightGreen#1EF855
  • terminal.ansiBrightMagenta#EC61CD
  • terminal.ansiBrightRed#FBE4DB
  • terminal.ansiBrightWhite#FCFCFC
  • terminal.ansiBrightYellow#FCD2AE
  • terminal.ansiCyan#61A1C2
  • terminal.ansiGreen#139E37
  • terminal.ansiMagenta#F30EBF
  • terminal.ansiRed#CB866A
  • terminal.ansiWhite#F7F7F2
  • terminal.ansiYellow#C78247
  • terminal.background#1B1D1D
  • terminal.border#363032
  • terminal.foreground#E5DEDC
  • terminal.inactiveSelectionBackground#48383E70
  • terminal.selectionBackground#48383E70
  • textBlockQuote.background#353B3C
  • textBlockQuote.border#363032
  • textCodeBlock.background#353B3C
  • textLink.activeForeground#8AA6C1
  • textLink.foreground#87A8C4
  • textPreformat.background#353B3C
  • textPreformat.foreground#E5DEDC
  • textSeparator.foreground#E5DEDC
  • titleBar.activeBackground#252223
  • titleBar.activeForeground#E5DEDC
  • titleBar.inactiveBackground#252223
  • titleBar.inactiveForeground#6D696B
  • widget.border#363032

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
meta.tag, string#E5DEDC
meta.diff, meta.diff.header#6D696B
meta.link.reference.def.restructuredtext, string.other.link.description, string.other.link.title#C1D7EB
emphasisitalic
strongbold
invalid#C78585strikethrough
invalid.deprecated#E5DEDCunderline italic
header#C1D7EB
source.ini, source.ignore, source#CBD2D8
markup.inserted#C1D7EB
markup.deleted#C78585
markup.changed#8AA6C1
markup.error#C78585
markup.underlineunderline
markup.bold#C4A687bold
markup.heading#73BABFbold
markup.italic#CBD2D8italic
markup.inline.raw, markup.raw.restructuredtext#73BABF
markup.underline.link, markup.underline.link.image, markup.quote#8AA6C1
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext#87A8C4
meta.separator.markdown#73BABF
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown#EECEDB
markup.heading.markdown punctuation.definition.string.begin, markup.heading.markdown punctuation.definition.string.end#C4A687
entity.name.class, entity.name.type.class, entity.other.inherited-class#87A8C4
entity.name.tag, entity.other.attribute-name.parent-selector#C9EBED
entity.other.attribute-name#87A8C4
entity.name.function, meta.function-call, meta.method-call, meta.method#73BABF
meta.selector.css, meta.at-rule.function variable, meta.at-rule.mixin variable, variable.parameter, entity.name.variable.parameter#BED2E4
support#B2CDE6
entity.name, variable.other.key#73BABF
entity.name.type#BFE6E8
entity.name.type.module, entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type#B5D3E3
entity.other.attribute-name, entity.other.attribute-name.pseudo-class.css#D0EAEC
entity.other.attribute-name.class.css#73BABF
storage.class, storage.type#87A8C4
storage.modifier#EAD1C7
comment, punctuation.definition.comment, unused.comment, wildcard.comment#6D696B
constant#C1D7EB
constant.other.color#DD9CB7
constant.character.escape, constant.character.string.escape, constant.regexp, constant.language#A9C8E5
constant.other.date, constant.other.timestamp#E5C4B8
keyword.operator#E4EBF1
keyword.other.unit#B3E3E5
keyword.control, keyword.other.template, keyword.other.substitution#D680A3
keyword.other.this#C1D7EB
keyword.control.import, keyword.control.from#DFA4AF
keyword.control.new, keyword.operator.new, keyword.other.important.css#87A8C4
keyword.control.flow, keyword.control.loop, keyword.control.conditional, keyword.operator.logical, keyword.operator.relational, keyword.operator.comparison, keyword.operator.ternary#E2ABB3
meta.attribute-selector.scss#EECEDB
entity.name.tag.css, entity.name.tag.less, entity.name.tag.custom.css#C9EBED
entity.name.tag.wildcard.css, entity.name.tag.wildcard.less, entity.name.tag.wildcard.scss, entity.name.tag.wildcard.sass#CBE3EB
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#87A8C4
support.constant.property-value.css, constant.numeric.css#CBD2D8
keyword.control.at-rule.apply.tailwind#DFA4AF
keyword.control.at-rule.tailwind.tailwind#D680A3
keyword.control.at-rule.layer.tailwind#E2ABB3
meta.selector#EECEDB
punctuation.definition.string.begin, punctuation.definition.string.end, punctuation.support.type.property-name.begin, punctuation.support.type.property-name.end#E6DEDA
punctuation.definition.constant.restructuredtext#C1D7EB
string.quoted.docstring.multi#73BABF
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#E6DEDA
punctuation, punctuation.definition.tag, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html#CBE3EB
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#F7F7F2
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#EAE6E1
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#F1EDE9
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#C1D7EB
variable#BED2E4
variable.other.alias.yaml#BED2E4underline
variable.language, variable.parameter.function.language.special#A9C8E5
variable.other.constant#D7DCEF
support.variable#BED2E4
variable.other.property, support.variable.property, variable.object.property, variable.other.object.property#BFC2E3
support.function.magic, variable.other.predefined, storage.modifier.async, keyword.control.trycatch, keyword.control.trycatch.js, keyword.control.trycatch.ts#C4A687
support.function, support.type.property-name#EBCBCD
storage#E4C1B4
string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp#C78247
punctuation.definition.group.capture.regexp#CB866A
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end#CB866A
punctuation.definition.character-class.regexp#FCD2AE
punctuation.definition.group.regexp#A5C8F6
punctuation.definition.group.assertion.regexp, keyword.operator.negation.regexp#CB866A
meta.assertion.look-ahead.regexp#A5C8F6
source.json meta.structure.dictionary.json support.type.property-name.json#73BABF
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#87A8C4
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#8AA6C1
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#C4A687
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#C78585
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#4E924E
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#73BABF
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#87A8C4
token.info-token#8AA6C1
token.warn-token#C4A687
token.error-token#C78585
token.debug-token#C4A687