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#DCE4E470
  • activityBar.activeBorder#206968
  • activityBar.background#fff6d8
  • activityBar.foreground#241925
  • activityBar.inactiveForeground#CACBDA
  • activityBarBadge.background#1A4C4B
  • activityBarBadge.foreground#241925
  • activityBarTop.foreground#241925
  • badge.background#1A4C4B
  • badge.foreground#241925
  • breadcrumb.activeForeground#241925
  • breadcrumb.activeSelectionForeground#241925
  • breadcrumb.background#fff6d8
  • breadcrumb.focusForeground#241925
  • breadcrumb.foreground#CACBDA
  • breadcrumbPicker.background#fff6d8
  • button.background#1A4C4Bdb
  • button.foreground#241925
  • button.hoverBackground#1A4C4B
  • button.secondaryBackground#206968db
  • button.secondaryForeground#241925
  • button.secondaryHoverBackground#206968
  • checkbox.background#fffae2
  • checkbox.foreground#241925
  • debugToolBar.background#4073A5
  • debugToolBar.foreground#241925
  • descriptionForeground#211622
  • diffEditor.diagonalFill#4073A5
  • diffEditor.insertedLineBackground#4073A540
  • diffEditor.insertedTextBackground#4073A550
  • diffEditor.insertedTextBorder#4073A5
  • diffEditor.removedLineBackground#882A2A40
  • diffEditor.removedTextBackground#882A2A50
  • diffEditor.removedTextBorder#882A2A
  • diffEditorGutter.insertedLineBackground#4073A5
  • diffEditorGutter.removedLineBackground#882A2A
  • disabledForeground#CACBDA
  • dropdown.background#cdc7bb
  • dropdown.border#D0D0D7
  • dropdown.foreground#241925
  • editor.background#fffae2
  • editor.findMatchBackground#A8AACC70
  • editor.findMatchForeground#241925
  • editor.findMatchHighlightBackground#DCE4E470
  • editor.findMatchHighlightForeground#241925
  • editor.findRangeHighlightBackground#BDBED170
  • editor.foldBackground#DCE4E470
  • editor.foldPlaceholderForeground#241925
  • editor.foreground#241925
  • editor.hoverHighlightBackground#DCE4E470
  • editor.inactiveSelectionBackground#BDBED170
  • editor.lineHighlightBackground#00000010
  • editor.placeholder.foreground#211622
  • editor.rangeHighlightBackground#DCE4E470
  • editor.selectionBackground#BDBED170
  • editor.selectionForeground#241925
  • editor.selectionHighlightBackground#BDBED170
  • editor.snippetFinalTabstopHighlightBackground#DCE4E470
  • editor.snippetTabstopHighlightBackground#DCE4E470
  • editor.symbolHighlightBackground#DCE4E470
  • editor.wordHighlightBackground#DCE4E470
  • editor.wordHighlightStrongBackground#DCE4E450
  • editor.wordHighlightTextBackground#DCE4E470
  • editorCodeLens.foreground#CACBDA
  • editorCursor.background#DCE4E470
  • editorCursor.foreground#206968
  • editorError.foreground#882A2A
  • editorGroup.border#D0D0D7
  • editorGroup.dropBackground#cdc7bb
  • editorGroup.emptyBackground#fffae2
  • editorGroupHeader.border#D0D0D7
  • editorGroupHeader.tabsBackground#fffae2
  • editorGutter.addedBackground#275927
  • editorGutter.background#fffae2
  • editorGutter.commentRangeForeground#CACBDA
  • editorGutter.deletedBackground#882A2A
  • editorGutter.modifiedBackground#4073A5
  • editorHint.foreground#275927
  • editorHoverWidget.background#fffae2
  • editorHoverWidget.border#D0D0D7
  • editorHoverWidget.foreground#241925
  • editorHoverWidget.highlightForeground#241925
  • editorHoverWidget.statusBarBackground#fffae2
  • editorIndentGuide.activeBackground1#206968
  • editorIndentGuide.background1#DCE4E470
  • editorInfo.foreground#4073A5
  • editorLineNumber.activeForeground#206968
  • editorLineNumber.dimmedForeground#CACBDA90
  • editorLineNumber.foreground#CACBDA
  • editorLink.activeForeground#4073A5
  • editorMarkerNavigation.background#fff6d8
  • editorMarkerNavigationError.background#fff6d8
  • editorMarkerNavigationWarning.background#fff6d8
  • editorMultiCursor.primary.background#DCE4E470
  • editorMultiCursor.primary.foreground#206968
  • editorMultiCursor.secondary.background#DCE4E470
  • editorMultiCursor.secondary.foreground#241925
  • editorOverviewRuler.addedForeground#275927
  • editorOverviewRuler.border#D0D0D7
  • editorOverviewRuler.commentForeground#CACBDA
  • editorOverviewRuler.commonContentForeground#241925
  • editorOverviewRuler.currentContentForeground#4073A5
  • editorOverviewRuler.deletedForeground#882A2A
  • editorOverviewRuler.errorForeground#882A2A
  • editorOverviewRuler.findMatchForeground#241925
  • editorOverviewRuler.incomingContentForeground#275927
  • editorOverviewRuler.infoForeground#4073A5
  • editorOverviewRuler.modifiedForeground#4073A5
  • editorOverviewRuler.rangeHighlightForeground#DCE4E470
  • editorOverviewRuler.selectionHighlightForeground#BDBED170
  • editorOverviewRuler.warningForeground#84592E
  • editorOverviewRuler.wordHighlightForeground#DCE4E470
  • editorOverviewRuler.wordHighlightStrongForeground#DCE4E470
  • editorRuler.foreground#DCE4E470
  • editorSuggestWidget.background#fffae2
  • editorSuggestWidget.border#D0D0D7
  • editorSuggestWidget.focusHighlightForeground#241925
  • editorSuggestWidget.foreground#CACBDA
  • editorSuggestWidget.highlightForeground#241925
  • editorSuggestWidget.selectedBackground#1A4C4B80
  • editorSuggestWidget.selectedForeground#241925
  • editorUnicodeHighlight.background#DCE4E470
  • editorWarning.foreground#84592E
  • editorWhitespace.foreground#DCE4E470
  • editorWidget.background#fffae2
  • editorWidget.border#D0D0D7
  • editorWidget.foreground#241925
  • errorForeground#882A2A
  • extensionButton.prominentBackground#1A4C4Baa
  • extensionButton.prominentForeground#241925
  • extensionButton.prominentHoverBackground#1A4C4B
  • focusBorder#D0D0D7
  • foreground#241925
  • gitDecoration.addedResourceForeground#275927
  • gitDecoration.conflictingResourceForeground#84592E
  • gitDecoration.deletedResourceForeground#882A2A
  • gitDecoration.ignoredResourceForeground#CACBDA
  • gitDecoration.modifiedResourceForeground#4073A5
  • gitDecoration.renamedResourceForeground#206968
  • gitDecoration.untrackedResourceForeground#211622
  • input.background#fffae2
  • input.border#CACBDA
  • input.foreground#241925
  • input.placeholderForeground#CACBDA
  • inputOption.activeBorder#206968
  • inputValidation.errorBorder#882A2A
  • inputValidation.infoBorder#4073A5
  • inputValidation.warningBorder#84592E
  • list.activeSelectionBackground#1A4C4B70
  • list.activeSelectionForeground#241925
  • list.dropBackground#cdc7bb
  • list.dropBetweenBackground#D0D0D7
  • list.errorForeground#882A2A
  • list.focusBackground#1A4C4B50
  • list.focusForeground#241925
  • list.highlightForeground#206968
  • list.hoverBackground#1A4C4B20
  • list.hoverForeground#241925
  • list.inactiveFocusBackground#fff6d8
  • list.inactiveSelectionBackground#1A4C4B60
  • list.inactiveSelectionForeground#211622
  • list.warningForeground#84592E
  • listFilterWidget.background#cdc7bb
  • listFilterWidget.noMatchesOutline#882A2A
  • listFilterWidget.outline#D0D0D7
  • merge.border#D0D0D7
  • merge.currentContentBackground#4073A520
  • merge.currentHeaderBackground#4073A540
  • merge.incomingContentBackground#27592720
  • merge.incomingHeaderBackground#27592740
  • mergeEditor.change.background#84592E
  • notificationLink.foreground#4073A5
  • notifications.background#fff6d8
  • notifications.border#D0D0D7
  • notifications.foreground#241925
  • notificationsErrorIcon.foreground#882A2A
  • notificationsInfoIcon.foreground#4073A5
  • notificationsWarningIcon.foreground#84592E
  • panel.background#fff6d8
  • panel.border#206968
  • panelInput.border#CACBDA
  • panelTitle.activeBorder#206968
  • panelTitle.activeForeground#241925
  • panelTitle.inactiveForeground#CACBDA
  • peekView.border#1A4C4B
  • peekViewEditor.background#fffae2
  • peekViewEditor.matchHighlightBackground#A8AACC70
  • peekViewResult.background#fffae2
  • peekViewResult.fileForeground#241925
  • peekViewResult.lineForeground#241925
  • peekViewResult.matchHighlightBackground#DCE4E470
  • peekViewResult.selectionBackground#fff6d8
  • peekViewResult.selectionForeground#241925
  • peekViewTitle.background#fffae2
  • peekViewTitleDescription.foreground#211622
  • peekViewTitleLabel.foreground#241925
  • pickerGroup.border#1A4C4B
  • pickerGroup.foreground#00A9A5
  • progressBar.background#206968
  • selection.background#1A4C4B50
  • settings.checkboxBackground#fffae2
  • settings.checkboxBorder#D0D0D7
  • settings.checkboxForeground#241925
  • settings.dropdownBackground#fffae2
  • settings.dropdownBorder#D0D0D7
  • settings.dropdownForeground#241925
  • settings.focusedRowBackground#DCE4E470
  • settings.focusedRowBorder#CACBDA
  • settings.headerBorder#D0D0D7
  • settings.headerForeground#241925
  • settings.inactiveSelectedItemBorder#CACBDA
  • settings.modifiedItemIndicator#84592E
  • settings.numberInputBackground#fffae2
  • settings.numberInputBorder#CACBDA
  • settings.numberInputForeground#241925
  • settings.rowHoverBackground#DCE4E470
  • settings.settingsHeaderHoverForeground#241925
  • settings.textInputBackground#fffae2
  • settings.textInputBorder#CACBDA
  • settings.textInputForeground#241925
  • sideBar.background#fffae2
  • sideBarActivityBarTop.border#D0D0D7
  • sideBarSectionHeader.background#fff6d8
  • sideBarSectionHeader.border#D0D0D7
  • sideBarStickyScroll.background#fffae2
  • sideBarStickyScroll.border#D0D0D7
  • sideBarStickyScroll.shadow#D0D0D7
  • sideBarTitle.background#fffae2
  • sideBarTitle.foreground#241925
  • statusBar.background#1A4C4B
  • statusBar.debuggingBackground#84592E
  • statusBar.debuggingForeground#241925
  • statusBar.foreground#241925
  • statusBar.noFolderBackground#211622
  • statusBar.noFolderForeground#E1E0E1
  • statusBarItem.activeBackground#1A4C4Baa
  • statusBarItem.errorBackground#882A2A
  • statusBarItem.errorForeground#241925
  • statusBarItem.errorHoverBackground#882A2Aaa
  • statusBarItem.hoverBackground#1A4C4Baa
  • statusBarItem.prominentBackground#1A4C4Baa
  • statusBarItem.prominentForeground#E1E0E1
  • statusBarItem.prominentHoverBackground#1A4C4Baa
  • statusBarItem.prominentHoverForeground#E1E0E1
  • statusBarItem.remoteBackground#206968
  • statusBarItem.remoteForeground#241925
  • statusBarItem.remoteHoverBackground#206968aa
  • statusBarItem.warningBackground#84592E
  • statusBarItem.warningForeground#241925
  • statusBarItem.warningHoverBackground#84592Eaa
  • tab.activeBackground#fff6d8
  • tab.activeBorderTop#206968
  • tab.activeForeground#241925
  • tab.border#D0D0D7
  • tab.hoverBackground#fff6d880
  • tab.hoverForeground#241925
  • tab.inactiveBackground#fffae2
  • tab.inactiveForeground#CACBDA
  • tab.selectedBackground#DCE4E470
  • terminal.ansiBlack#000000
  • terminal.ansiBlue#3E2473
  • terminal.ansiBrightBlack#444444
  • terminal.ansiBrightBlue#5A13EC
  • terminal.ansiBrightCyan#00A06C
  • terminal.ansiBrightGreen#4BA100
  • terminal.ansiBrightMagenta#C273FF
  • terminal.ansiBrightRed#FF564F
  • terminal.ansiBrightWhite#868600
  • terminal.ansiBrightYellow#7D8600
  • terminal.ansiCyan#107E5B
  • terminal.ansiGreen#4CA000
  • terminal.ansiMagenta#7C10D5
  • terminal.ansiRed#FF625B
  • terminal.ansiWhite#DB6B00
  • terminal.ansiYellow#6C7220
  • terminal.background#fffae2
  • terminal.border#D0D0D7
  • terminal.foreground#241925
  • terminal.inactiveSelectionBackground#BDBED170
  • terminal.selectionBackground#BDBED170
  • textBlockQuote.background#cdc7bb
  • textBlockQuote.border#D0D0D7
  • textCodeBlock.background#cdc7bb
  • textLink.activeForeground#4073A5
  • textLink.foreground#1A4C4B
  • textPreformat.background#cdc7bb
  • textPreformat.foreground#241925
  • textSeparator.foreground#241925
  • titleBar.activeBackground#fff6d8
  • titleBar.activeForeground#241925
  • titleBar.inactiveBackground#fff6d8
  • titleBar.inactiveForeground#CACBDA
  • widget.border#D0D0D7

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
meta.tag, string#241925
meta.diff, meta.diff.header#CACBDA
meta.link.reference.def.restructuredtext, string.other.link.description, string.other.link.title#00A8A5
emphasisitalic
strongbold
invalid#882A2Astrikethrough
invalid.deprecated#241925underline italic
header#00A8A5
source.ini, source.ignore, source#211622
markup.inserted#00A8A5
markup.deleted#882A2A
markup.changed#4073A5
markup.error#882A2A
markup.underlineunderline
markup.bold#84592Ebold
markup.heading#206968bold
markup.italic#211622italic
markup.inline.raw, markup.raw.restructuredtext#206968
markup.underline.link, markup.underline.link.image, markup.quote#4073A5
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext#1A4C4B
meta.separator.markdown#206968
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown#7F1C88
markup.heading.markdown punctuation.definition.string.begin, markup.heading.markdown punctuation.definition.string.end#84592E
entity.name.class, entity.name.type.class, entity.other.inherited-class#1A4C4B
entity.name.tag, entity.other.attribute-name.parent-selector#1A208E
entity.other.attribute-name#1A4C4B
entity.name.function, meta.function-call, meta.method-call, meta.method#206968
meta.selector.css, meta.at-rule.function variable, meta.at-rule.mixin variable, variable.parameter, entity.name.variable.parameter#792380
support#4E0D54
entity.name, variable.other.key#206968
entity.name.type#161A6A
entity.name.type.module, entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type#261457
entity.other.attribute-name, entity.other.attribute-name.pseudo-class.css#1A6664
entity.other.attribute-name.class.css#206968
storage.class, storage.type#1A4C4B
storage.modifier#691970
comment, punctuation.definition.comment, unused.comment, wildcard.comment#CACBDA
constant#00A8A5
constant.other.color#65146C
constant.character.escape, constant.character.string.escape, constant.regexp, constant.language#0A0D48
constant.other.date, constant.other.timestamp#171C72
keyword.operator#85368C
keyword.other.unit#121663
keyword.control, keyword.other.template, keyword.other.substitution#5E1065
keyword.other.this#00A8A5
keyword.control.import, keyword.control.from#44183C
keyword.control.new, keyword.operator.new, keyword.other.important.css#1A4C4B
keyword.control.flow, keyword.control.loop, keyword.control.conditional, keyword.operator.logical, keyword.operator.relational, keyword.operator.comparison, keyword.operator.ternary#681358
meta.attribute-selector.scss#6F1877
entity.name.tag.css, entity.name.tag.less, entity.name.tag.custom.css#1A208E
entity.name.tag.wildcard.css, entity.name.tag.wildcard.less, entity.name.tag.wildcard.scss, entity.name.tag.wildcard.sass#311D81
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#1A4C4B
support.constant.property-value.css, constant.numeric.css#211622
keyword.control.at-rule.apply.tailwind#44183C
keyword.control.at-rule.tailwind.tailwind#5E1065
keyword.control.at-rule.layer.tailwind#681358
meta.selector#6F1877
punctuation.definition.string.begin, punctuation.definition.string.end, punctuation.support.type.property-name.begin, punctuation.support.type.property-name.end#434570
punctuation.definition.constant.restructuredtext#00A8A5
string.quoted.docstring.multi#206968
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#434570
punctuation, punctuation.definition.tag, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html#311D81
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#DB6B00
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#60548C
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#433C6C
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#444073
punctuation.definition.directive.restructuredtext#00A8A5
variable#1C1F64
variable.other.alias.yaml#1C1F64underline
variable.language, variable.parameter.function.language.special#0A0D48
variable.other.constant#342182
support.variable#1C1F64
variable.other.property, support.variable.property, variable.object.property, variable.other.object.property#4A2272
support.function.magic, variable.other.predefined, storage.modifier.async, keyword.control.trycatch, keyword.control.trycatch.js, keyword.control.trycatch.ts#84592E
support.function, support.type.property-name#9A2376
storage#00A9A6
string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp#6C7220
punctuation.definition.group.capture.regexp#FF625B
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end#FF625B
punctuation.definition.character-class.regexp#7D8600
punctuation.definition.group.regexp#5A13EC
punctuation.definition.group.assertion.regexp, keyword.operator.negation.regexp#FF625B
meta.assertion.look-ahead.regexp#5A13EC
source.json meta.structure.dictionary.json support.type.property-name.json#206968
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#1A4C4B
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#4073A5
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#84592E
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#882A2A
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#275927
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#206968
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#1A4C4B
token.info-token#4073A5
token.warn-token#84592E
token.error-token#882A2A
token.debug-token#84592E