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#E4E9E270
  • activityBar.activeBorder#483C13
  • activityBar.background#fff6d8
  • activityBar.foreground#3B2B26
  • activityBar.inactiveForeground#B2BBB3
  • activityBarBadge.background#4E4218
  • activityBarBadge.foreground#3B2B26
  • activityBarTop.foreground#3B2B26
  • badge.background#4E4218
  • badge.foreground#3B2B26
  • breadcrumb.activeForeground#3B2B26
  • breadcrumb.activeSelectionForeground#3B2B26
  • breadcrumb.background#fff6d8
  • breadcrumb.focusForeground#3B2B26
  • breadcrumb.foreground#B2BBB3
  • breadcrumbPicker.background#fff6d8
  • button.background#4E4218db
  • button.foreground#3B2B26
  • button.hoverBackground#4E4218
  • button.secondaryBackground#483C13db
  • button.secondaryForeground#3B2B26
  • button.secondaryHoverBackground#483C13
  • checkbox.background#fffae2
  • checkbox.foreground#3B2B26
  • debugToolBar.background#3C73AA
  • debugToolBar.foreground#3B2B26
  • descriptionForeground#394A30
  • diffEditor.diagonalFill#3C73AA
  • diffEditor.insertedLineBackground#3C73AA40
  • diffEditor.insertedTextBackground#3C73AA50
  • diffEditor.insertedTextBorder#3C73AA
  • diffEditor.removedLineBackground#8D262640
  • diffEditor.removedTextBackground#8D262650
  • diffEditor.removedTextBorder#8D2626
  • diffEditorGutter.insertedLineBackground#3C73AA
  • diffEditorGutter.removedLineBackground#8D2626
  • disabledForeground#B2BBB3
  • dropdown.background#cdc7bb
  • dropdown.border#DCDBD5
  • dropdown.foreground#3B2B26
  • editor.background#fffae2
  • editor.findMatchBackground#D2C9AD70
  • editor.findMatchForeground#3B2B26
  • editor.findMatchHighlightBackground#E4E9E270
  • editor.findMatchHighlightForeground#3B2B26
  • editor.findRangeHighlightBackground#C9D6C270
  • editor.foldBackground#E4E9E270
  • editor.foldPlaceholderForeground#3B2B26
  • editor.foreground#3B2B26
  • editor.hoverHighlightBackground#E4E9E270
  • editor.inactiveSelectionBackground#C9D6C270
  • editor.lineHighlightBackground#00000010
  • editor.placeholder.foreground#394A30
  • editor.rangeHighlightBackground#E4E9E270
  • editor.selectionBackground#C9D6C270
  • editor.selectionForeground#3B2B26
  • editor.selectionHighlightBackground#C9D6C270
  • editor.snippetFinalTabstopHighlightBackground#E4E9E270
  • editor.snippetTabstopHighlightBackground#E4E9E270
  • editor.symbolHighlightBackground#E4E9E270
  • editor.wordHighlightBackground#E4E9E270
  • editor.wordHighlightStrongBackground#E4E9E250
  • editor.wordHighlightTextBackground#E4E9E270
  • editorCodeLens.foreground#B2BBB3
  • editorCursor.background#E4E9E270
  • editorCursor.foreground#483C13
  • editorError.foreground#8D2626
  • editorGroup.border#DCDBD5
  • editorGroup.dropBackground#cdc7bb
  • editorGroup.emptyBackground#fffae2
  • editorGroupHeader.border#DCDBD5
  • editorGroupHeader.tabsBackground#fffae2
  • editorGutter.addedBackground#245B24
  • editorGutter.background#fffae2
  • editorGutter.commentRangeForeground#B2BBB3
  • editorGutter.deletedBackground#8D2626
  • editorGutter.modifiedBackground#3C73AA
  • editorHint.foreground#245B24
  • editorHoverWidget.background#fffae2
  • editorHoverWidget.border#DCDBD5
  • editorHoverWidget.foreground#3B2B26
  • editorHoverWidget.highlightForeground#3B2B26
  • editorHoverWidget.statusBarBackground#fffae2
  • editorIndentGuide.activeBackground1#483C13
  • editorIndentGuide.background1#E4E9E270
  • editorInfo.foreground#3C73AA
  • editorLineNumber.activeForeground#483C13
  • editorLineNumber.dimmedForeground#B2BBB390
  • editorLineNumber.foreground#B2BBB3
  • editorLink.activeForeground#3C73AA
  • editorMarkerNavigation.background#fff6d8
  • editorMarkerNavigationError.background#fff6d8
  • editorMarkerNavigationWarning.background#fff6d8
  • editorMultiCursor.primary.background#E4E9E270
  • editorMultiCursor.primary.foreground#483C13
  • editorMultiCursor.secondary.background#E4E9E270
  • editorMultiCursor.secondary.foreground#3B2B26
  • editorOverviewRuler.addedForeground#245B24
  • editorOverviewRuler.border#DCDBD5
  • editorOverviewRuler.commentForeground#B2BBB3
  • editorOverviewRuler.commonContentForeground#3B2B26
  • editorOverviewRuler.currentContentForeground#3C73AA
  • editorOverviewRuler.deletedForeground#8D2626
  • editorOverviewRuler.errorForeground#8D2626
  • editorOverviewRuler.findMatchForeground#3B2B26
  • editorOverviewRuler.incomingContentForeground#245B24
  • editorOverviewRuler.infoForeground#3C73AA
  • editorOverviewRuler.modifiedForeground#3C73AA
  • editorOverviewRuler.rangeHighlightForeground#E4E9E270
  • editorOverviewRuler.selectionHighlightForeground#C9D6C270
  • editorOverviewRuler.warningForeground#88592A
  • editorOverviewRuler.wordHighlightForeground#E4E9E270
  • editorOverviewRuler.wordHighlightStrongForeground#E4E9E270
  • editorRuler.foreground#E4E9E270
  • editorSuggestWidget.background#fffae2
  • editorSuggestWidget.border#DCDBD5
  • editorSuggestWidget.focusHighlightForeground#3B2B26
  • editorSuggestWidget.foreground#B2BBB3
  • editorSuggestWidget.highlightForeground#3B2B26
  • editorSuggestWidget.selectedBackground#4E421880
  • editorSuggestWidget.selectedForeground#3B2B26
  • editorUnicodeHighlight.background#E4E9E270
  • editorWarning.foreground#88592A
  • editorWhitespace.foreground#E4E9E270
  • editorWidget.background#fffae2
  • editorWidget.border#DCDBD5
  • editorWidget.foreground#3B2B26
  • errorForeground#8D2626
  • extensionButton.prominentBackground#4E4218aa
  • extensionButton.prominentForeground#3B2B26
  • extensionButton.prominentHoverBackground#4E4218
  • focusBorder#DCDBD5
  • foreground#3B2B26
  • gitDecoration.addedResourceForeground#245B24
  • gitDecoration.conflictingResourceForeground#88592A
  • gitDecoration.deletedResourceForeground#8D2626
  • gitDecoration.ignoredResourceForeground#B2BBB3
  • gitDecoration.modifiedResourceForeground#3C73AA
  • gitDecoration.renamedResourceForeground#483C13
  • gitDecoration.untrackedResourceForeground#394A30
  • input.background#fffae2
  • input.border#B2BBB3
  • input.foreground#3B2B26
  • input.placeholderForeground#B2BBB3
  • inputOption.activeBorder#483C13
  • inputValidation.errorBorder#8D2626
  • inputValidation.infoBorder#3C73AA
  • inputValidation.warningBorder#88592A
  • list.activeSelectionBackground#4E421870
  • list.activeSelectionForeground#3B2B26
  • list.dropBackground#cdc7bb
  • list.dropBetweenBackground#DCDBD5
  • list.errorForeground#8D2626
  • list.focusBackground#4E421850
  • list.focusForeground#3B2B26
  • list.highlightForeground#483C13
  • list.hoverBackground#4E421820
  • list.hoverForeground#3B2B26
  • list.inactiveFocusBackground#fff6d8
  • list.inactiveSelectionBackground#4E421860
  • list.inactiveSelectionForeground#394A30
  • list.warningForeground#88592A
  • listFilterWidget.background#cdc7bb
  • listFilterWidget.noMatchesOutline#8D2626
  • listFilterWidget.outline#DCDBD5
  • merge.border#DCDBD5
  • merge.currentContentBackground#3C73AA20
  • merge.currentHeaderBackground#3C73AA40
  • merge.incomingContentBackground#245B2420
  • merge.incomingHeaderBackground#245B2440
  • mergeEditor.change.background#88592A
  • notificationLink.foreground#3C73AA
  • notifications.background#fff6d8
  • notifications.border#DCDBD5
  • notifications.foreground#3B2B26
  • notificationsErrorIcon.foreground#8D2626
  • notificationsInfoIcon.foreground#3C73AA
  • notificationsWarningIcon.foreground#88592A
  • panel.background#fff6d8
  • panel.border#483C13
  • panelInput.border#B2BBB3
  • panelTitle.activeBorder#483C13
  • panelTitle.activeForeground#3B2B26
  • panelTitle.inactiveForeground#B2BBB3
  • peekView.border#4E4218
  • peekViewEditor.background#fffae2
  • peekViewEditor.matchHighlightBackground#D2C9AD70
  • peekViewResult.background#fffae2
  • peekViewResult.fileForeground#3B2B26
  • peekViewResult.lineForeground#3B2B26
  • peekViewResult.matchHighlightBackground#E4E9E270
  • peekViewResult.selectionBackground#fff6d8
  • peekViewResult.selectionForeground#3B2B26
  • peekViewTitle.background#fffae2
  • peekViewTitleDescription.foreground#394A30
  • peekViewTitleLabel.foreground#3B2B26
  • pickerGroup.border#4E4218
  • pickerGroup.foreground#3A6920
  • progressBar.background#483C13
  • selection.background#4E421850
  • settings.checkboxBackground#fffae2
  • settings.checkboxBorder#DCDBD5
  • settings.checkboxForeground#3B2B26
  • settings.dropdownBackground#fffae2
  • settings.dropdownBorder#DCDBD5
  • settings.dropdownForeground#3B2B26
  • settings.focusedRowBackground#E4E9E270
  • settings.focusedRowBorder#B2BBB3
  • settings.headerBorder#DCDBD5
  • settings.headerForeground#3B2B26
  • settings.inactiveSelectedItemBorder#B2BBB3
  • settings.modifiedItemIndicator#88592A
  • settings.numberInputBackground#fffae2
  • settings.numberInputBorder#B2BBB3
  • settings.numberInputForeground#3B2B26
  • settings.rowHoverBackground#E4E9E270
  • settings.settingsHeaderHoverForeground#3B2B26
  • settings.textInputBackground#fffae2
  • settings.textInputBorder#B2BBB3
  • settings.textInputForeground#3B2B26
  • sideBar.background#fffae2
  • sideBarActivityBarTop.border#DCDBD5
  • sideBarSectionHeader.background#fff6d8
  • sideBarSectionHeader.border#DCDBD5
  • sideBarStickyScroll.background#fffae2
  • sideBarStickyScroll.border#DCDBD5
  • sideBarStickyScroll.shadow#DCDBD5
  • sideBarTitle.background#fffae2
  • sideBarTitle.foreground#3B2B26
  • statusBar.background#4E4218
  • statusBar.debuggingBackground#88592A
  • statusBar.debuggingForeground#3B2B26
  • statusBar.foreground#3B2B26
  • statusBar.noFolderBackground#394A30
  • statusBar.noFolderForeground#EEEDED
  • statusBarItem.activeBackground#4E4218aa
  • statusBarItem.errorBackground#8D2626
  • statusBarItem.errorForeground#3B2B26
  • statusBarItem.errorHoverBackground#8D2626aa
  • statusBarItem.hoverBackground#4E4218aa
  • statusBarItem.prominentBackground#4E4218aa
  • statusBarItem.prominentForeground#EEEDED
  • statusBarItem.prominentHoverBackground#4E4218aa
  • statusBarItem.prominentHoverForeground#EEEDED
  • statusBarItem.remoteBackground#483C13
  • statusBarItem.remoteForeground#3B2B26
  • statusBarItem.remoteHoverBackground#483C13aa
  • statusBarItem.warningBackground#88592A
  • statusBarItem.warningForeground#3B2B26
  • statusBarItem.warningHoverBackground#88592Aaa
  • tab.activeBackground#fff6d8
  • tab.activeBorderTop#483C13
  • tab.activeForeground#3B2B26
  • tab.border#DCDBD5
  • tab.hoverBackground#fff6d880
  • tab.hoverForeground#3B2B26
  • tab.inactiveBackground#fffae2
  • tab.inactiveForeground#B2BBB3
  • tab.selectedBackground#E4E9E270
  • 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#DCDBD5
  • terminal.foreground#3B2B26
  • terminal.inactiveSelectionBackground#C9D6C270
  • terminal.selectionBackground#C9D6C270
  • textBlockQuote.background#cdc7bb
  • textBlockQuote.border#DCDBD5
  • textCodeBlock.background#cdc7bb
  • textLink.activeForeground#3C73AA
  • textLink.foreground#4E4218
  • textPreformat.background#cdc7bb
  • textPreformat.foreground#3B2B26
  • textSeparator.foreground#3B2B26
  • titleBar.activeBackground#fff6d8
  • titleBar.activeForeground#3B2B26
  • titleBar.inactiveBackground#fff6d8
  • titleBar.inactiveForeground#B2BBB3
  • widget.border#DCDBD5

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
meta.tag, string#3B2B26
meta.diff, meta.diff.header#B2BBB3
meta.link.reference.def.restructuredtext, string.other.link.description, string.other.link.title#359E00
emphasisitalic
strongbold
invalid#8D2626strikethrough
invalid.deprecated#3B2B26underline italic
header#359E00
source.ini, source.ignore, source#394A30
markup.inserted#359E00
markup.deleted#8D2626
markup.changed#3C73AA
markup.error#8D2626
markup.underlineunderline
markup.bold#88592Abold
markup.heading#483C13bold
markup.italic#394A30italic
markup.inline.raw, markup.raw.restructuredtext#483C13
markup.underline.link, markup.underline.link.image, markup.quote#3C73AA
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext#4E4218
meta.separator.markdown#483C13
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown#6F3625
markup.heading.markdown punctuation.definition.string.begin, markup.heading.markdown punctuation.definition.string.end#88592A
entity.name.class, entity.name.type.class, entity.other.inherited-class#4E4218
entity.name.tag, entity.other.attribute-name.parent-selector#753724
entity.other.attribute-name#4E4218
entity.name.function, meta.function-call, meta.method-call, meta.method#483C13
meta.selector.css, meta.at-rule.function variable, meta.at-rule.mixin variable, variable.parameter, entity.name.variable.parameter#2B6E38
support#534618
entity.name, variable.other.key#483C13
entity.name.type#20602C
entity.name.type.module, entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type#215E3E
entity.other.attribute-name, entity.other.attribute-name.pseudo-class.css#7B402E
entity.other.attribute-name.class.css#483C13
storage.class, storage.type#4E4218
storage.modifier#287136
comment, punctuation.definition.comment, unused.comment, wildcard.comment#B2BBB3
constant#359E00
constant.other.color#315A1C
constant.character.escape, constant.character.string.escape, constant.regexp, constant.language#195C26
constant.other.date, constant.other.timestamp#736226
keyword.operator#6D6136
keyword.other.unit#315A1C
keyword.control, keyword.other.template, keyword.other.substitution#372F10
keyword.other.this#359E00
keyword.control.import, keyword.control.from#4C4B24
keyword.control.new, keyword.operator.new, keyword.other.important.css#4E4218
keyword.control.flow, keyword.control.loop, keyword.control.conditional, keyword.operator.logical, keyword.operator.relational, keyword.operator.comparison, keyword.operator.ternary#48561A
meta.attribute-selector.scss#683222
entity.name.tag.css, entity.name.tag.less, entity.name.tag.custom.css#753724
entity.name.tag.wildcard.css, entity.name.tag.wildcard.less, entity.name.tag.wildcard.scss, entity.name.tag.wildcard.sass#754729
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#4E4218
support.constant.property-value.css, constant.numeric.css#394A30
keyword.control.at-rule.apply.tailwind#4C4B24
keyword.control.at-rule.tailwind.tailwind#372F10
keyword.control.at-rule.layer.tailwind#48561A
meta.selector#683222
punctuation.definition.string.begin, punctuation.definition.string.end, punctuation.support.type.property-name.begin, punctuation.support.type.property-name.end#6D654A
punctuation.definition.constant.restructuredtext#359E00
string.quoted.docstring.multi#483C13
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#6D654A
punctuation, punctuation.definition.tag, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html#754729
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#7E8900
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#8F8900
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#938C00
punctuation.definition.directive.restructuredtext#359E00
variable#5B4F24
variable.other.alias.yaml#5B4F24underline
variable.language, variable.parameter.function.language.special#195C26
variable.other.constant#7B9300
support.variable#5B4F24
variable.other.property, support.variable.property, variable.object.property, variable.other.object.property#718F00
support.function.magic, variable.other.predefined, storage.modifier.async, keyword.control.trycatch, keyword.control.trycatch.js, keyword.control.trycatch.ts#88592A
support.function, support.type.property-name#715628
storage#6F3625
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#483C13
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#4E4218
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#3C73AA
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#88592A
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#8D2626
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#245B24
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#483C13
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#4E4218
token.info-token#3C73AA
token.warn-token#88592A
token.error-token#8D2626
token.debug-token#88592A