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#27251B70
  • activityBar.activeBorder#94C36F
  • activityBar.background#2F2D1D
  • activityBar.foreground#BBDDE2
  • activityBar.inactiveForeground#546249
  • activityBarBadge.background#81C4CA
  • activityBarBadge.foreground#2B2612
  • activityBarTop.foreground#BBDDE2
  • badge.background#81C4CA
  • badge.foreground#2B2612
  • breadcrumb.activeForeground#BBDDE2
  • breadcrumb.activeSelectionForeground#BBDDE2
  • breadcrumb.background#2F2D1D
  • breadcrumb.focusForeground#BBDDE2
  • breadcrumb.foreground#546249
  • breadcrumbPicker.background#2F2D1D
  • button.background#81C4CAdb
  • button.foreground#2B2612
  • button.hoverBackground#81C4CA
  • button.secondaryBackground#94C36Fdb
  • button.secondaryForeground#2B2612
  • button.secondaryHoverBackground#94C36F
  • checkbox.background#28201A
  • checkbox.foreground#BBDDE2
  • debugToolBar.background#81A6CA
  • debugToolBar.foreground#2B2612
  • descriptionForeground#B7DDE1
  • diffEditor.diagonalFill#81A6CA
  • diffEditor.insertedLineBackground#81A6CA40
  • diffEditor.insertedTextBackground#81A6CA50
  • diffEditor.insertedTextBorder#81A6CA
  • diffEditor.removedLineBackground#CA818140
  • diffEditor.removedTextBackground#CA818150
  • diffEditor.removedTextBorder#CA8181
  • diffEditorGutter.insertedLineBackground#81A6CA
  • diffEditorGutter.removedLineBackground#CA8181
  • disabledForeground#546249
  • dropdown.background#1C1612
  • dropdown.border#41371B
  • dropdown.foreground#BBDDE2
  • editor.background#28201A
  • editor.findMatchBackground#35555A70
  • editor.findMatchForeground#BBDDE2
  • editor.findMatchHighlightBackground#27251B70
  • editor.findMatchHighlightForeground#BBDDE2
  • editor.findRangeHighlightBackground#48422D70
  • editor.foldBackground#27251B70
  • editor.foldPlaceholderForeground#BBDDE2
  • editor.foreground#BBDDE2
  • editor.hoverHighlightBackground#27251B70
  • editor.inactiveSelectionBackground#48422D70
  • editor.lineHighlightBackground#00000010
  • editor.placeholder.foreground#B7DDE1
  • editor.rangeHighlightBackground#27251B70
  • editor.selectionBackground#48422D70
  • editor.selectionForeground#BBDDE2
  • editor.selectionHighlightBackground#48422D70
  • editor.snippetFinalTabstopHighlightBackground#27251B70
  • editor.snippetTabstopHighlightBackground#27251B70
  • editor.symbolHighlightBackground#27251B70
  • editor.wordHighlightBackground#27251B70
  • editor.wordHighlightStrongBackground#27251B50
  • editor.wordHighlightTextBackground#27251B70
  • editorCodeLens.foreground#546249
  • editorCursor.background#27251B70
  • editorCursor.foreground#94C36F
  • editorError.foreground#CA8181
  • editorGroup.border#41371B
  • editorGroup.dropBackground#1C1612
  • editorGroup.emptyBackground#28201A
  • editorGroupHeader.border#41371B
  • editorGroupHeader.tabsBackground#28201A
  • editorGutter.addedBackground#3A8B3A
  • editorGutter.background#28201A
  • editorGutter.commentRangeForeground#546249
  • editorGutter.deletedBackground#CA8181
  • editorGutter.modifiedBackground#81A6CA
  • editorHint.foreground#3A8B3A
  • editorHoverWidget.background#28201A
  • editorHoverWidget.border#41371B
  • editorHoverWidget.foreground#BBDDE2
  • editorHoverWidget.highlightForeground#BBDDE2
  • editorHoverWidget.statusBarBackground#28201A
  • editorIndentGuide.activeBackground1#94C36F
  • editorIndentGuide.background1#27251B70
  • editorInfo.foreground#81A6CA
  • editorLineNumber.activeForeground#94C36F
  • editorLineNumber.dimmedForeground#54624990
  • editorLineNumber.foreground#546249
  • editorLink.activeForeground#81A6CA
  • editorMarkerNavigation.background#2F2D1D
  • editorMarkerNavigationError.background#2F2D1D
  • editorMarkerNavigationWarning.background#2F2D1D
  • editorMultiCursor.primary.background#27251B70
  • editorMultiCursor.primary.foreground#94C36F
  • editorMultiCursor.secondary.background#27251B70
  • editorMultiCursor.secondary.foreground#BBDDE2
  • editorOverviewRuler.addedForeground#3A8B3A
  • editorOverviewRuler.border#41371B
  • editorOverviewRuler.commentForeground#546249
  • editorOverviewRuler.commonContentForeground#BBDDE2
  • editorOverviewRuler.currentContentForeground#81A6CA
  • editorOverviewRuler.deletedForeground#CA8181
  • editorOverviewRuler.errorForeground#CA8181
  • editorOverviewRuler.findMatchForeground#BBDDE2
  • editorOverviewRuler.incomingContentForeground#3A8B3A
  • editorOverviewRuler.infoForeground#81A6CA
  • editorOverviewRuler.modifiedForeground#81A6CA
  • editorOverviewRuler.rangeHighlightForeground#27251B70
  • editorOverviewRuler.selectionHighlightForeground#48422D70
  • editorOverviewRuler.warningForeground#CAA681
  • editorOverviewRuler.wordHighlightForeground#27251B70
  • editorOverviewRuler.wordHighlightStrongForeground#27251B70
  • editorRuler.foreground#27251B70
  • editorSuggestWidget.background#28201A
  • editorSuggestWidget.border#41371B
  • editorSuggestWidget.focusHighlightForeground#BBDDE2
  • editorSuggestWidget.foreground#546249
  • editorSuggestWidget.highlightForeground#BBDDE2
  • editorSuggestWidget.selectedBackground#81C4CA80
  • editorSuggestWidget.selectedForeground#BBDDE2
  • editorUnicodeHighlight.background#27251B70
  • editorWarning.foreground#CAA681
  • editorWhitespace.foreground#27251B70
  • editorWidget.background#28201A
  • editorWidget.border#41371B
  • editorWidget.foreground#BBDDE2
  • errorForeground#CA8181
  • extensionButton.prominentBackground#81C4CAaa
  • extensionButton.prominentForeground#2B2612
  • extensionButton.prominentHoverBackground#81C4CA
  • focusBorder#41371B
  • foreground#BBDDE2
  • gitDecoration.addedResourceForeground#3A8B3A
  • gitDecoration.conflictingResourceForeground#CAA681
  • gitDecoration.deletedResourceForeground#CA8181
  • gitDecoration.ignoredResourceForeground#546249
  • gitDecoration.modifiedResourceForeground#81A6CA
  • gitDecoration.renamedResourceForeground#94C36F
  • gitDecoration.untrackedResourceForeground#B7DDE1
  • input.background#28201A
  • input.border#546249
  • input.foreground#BBDDE2
  • input.placeholderForeground#546249
  • inputOption.activeBorder#94C36F
  • inputValidation.errorBorder#CA8181
  • inputValidation.infoBorder#81A6CA
  • inputValidation.warningBorder#CAA681
  • list.activeSelectionBackground#81C4CA70
  • list.activeSelectionForeground#BBDDE2
  • list.dropBackground#1C1612
  • list.dropBetweenBackground#41371B
  • list.errorForeground#CA8181
  • list.focusBackground#81C4CA50
  • list.focusForeground#BBDDE2
  • list.highlightForeground#94C36F
  • list.hoverBackground#81C4CA20
  • list.hoverForeground#BBDDE2
  • list.inactiveFocusBackground#2F2D1D
  • list.inactiveSelectionBackground#81C4CA60
  • list.inactiveSelectionForeground#B7DDE1
  • list.warningForeground#CAA681
  • listFilterWidget.background#1C1612
  • listFilterWidget.noMatchesOutline#CA8181
  • listFilterWidget.outline#41371B
  • merge.border#41371B
  • merge.currentContentBackground#81A6CA20
  • merge.currentHeaderBackground#81A6CA40
  • merge.incomingContentBackground#3A8B3A20
  • merge.incomingHeaderBackground#3A8B3A40
  • mergeEditor.change.background#CAA681
  • notificationLink.foreground#81A6CA
  • notifications.background#2F2D1D
  • notifications.border#41371B
  • notifications.foreground#BBDDE2
  • notificationsErrorIcon.foreground#CA8181
  • notificationsInfoIcon.foreground#81A6CA
  • notificationsWarningIcon.foreground#CAA681
  • panel.background#2F2D1D
  • panel.border#94C36F
  • panelInput.border#546249
  • panelTitle.activeBorder#94C36F
  • panelTitle.activeForeground#BBDDE2
  • panelTitle.inactiveForeground#546249
  • peekView.border#81C4CA
  • peekViewEditor.background#28201A
  • peekViewEditor.matchHighlightBackground#35555A70
  • peekViewResult.background#28201A
  • peekViewResult.fileForeground#BBDDE2
  • peekViewResult.lineForeground#BBDDE2
  • peekViewResult.matchHighlightBackground#27251B70
  • peekViewResult.selectionBackground#2F2D1D
  • peekViewResult.selectionForeground#BBDDE2
  • peekViewTitle.background#28201A
  • peekViewTitleDescription.foreground#B7DDE1
  • peekViewTitleLabel.foreground#BBDDE2
  • pickerGroup.border#81C4CA
  • pickerGroup.foreground#C9EAAE
  • progressBar.background#94C36F
  • selection.background#81C4CA50
  • settings.checkboxBackground#28201A
  • settings.checkboxBorder#41371B
  • settings.checkboxForeground#BBDDE2
  • settings.dropdownBackground#28201A
  • settings.dropdownBorder#41371B
  • settings.dropdownForeground#BBDDE2
  • settings.focusedRowBackground#27251B70
  • settings.focusedRowBorder#546249
  • settings.headerBorder#41371B
  • settings.headerForeground#BBDDE2
  • settings.inactiveSelectedItemBorder#546249
  • settings.modifiedItemIndicator#CAA681
  • settings.numberInputBackground#28201A
  • settings.numberInputBorder#546249
  • settings.numberInputForeground#BBDDE2
  • settings.rowHoverBackground#27251B70
  • settings.settingsHeaderHoverForeground#BBDDE2
  • settings.textInputBackground#28201A
  • settings.textInputBorder#546249
  • settings.textInputForeground#BBDDE2
  • sideBar.background#28201A
  • sideBarActivityBarTop.border#41371B
  • sideBarSectionHeader.background#2F2D1D
  • sideBarSectionHeader.border#41371B
  • sideBarStickyScroll.background#28201A
  • sideBarStickyScroll.border#41371B
  • sideBarStickyScroll.shadow#41371B
  • sideBarTitle.background#28201A
  • sideBarTitle.foreground#BBDDE2
  • statusBar.background#81C4CA
  • statusBar.debuggingBackground#CAA681
  • statusBar.debuggingForeground#2B2612
  • statusBar.foreground#2B2612
  • statusBar.noFolderBackground#B7DDE1
  • statusBar.noFolderForeground#2B2612
  • statusBarItem.activeBackground#81C4CAaa
  • statusBarItem.errorBackground#CA8181
  • statusBarItem.errorForeground#2B2612
  • statusBarItem.errorHoverBackground#CA8181aa
  • statusBarItem.hoverBackground#81C4CAaa
  • statusBarItem.prominentBackground#81C4CAaa
  • statusBarItem.prominentForeground#2B2612
  • statusBarItem.prominentHoverBackground#81C4CAaa
  • statusBarItem.prominentHoverForeground#2B2612
  • statusBarItem.remoteBackground#94C36F
  • statusBarItem.remoteForeground#2B2612
  • statusBarItem.remoteHoverBackground#94C36Faa
  • statusBarItem.warningBackground#CAA681
  • statusBarItem.warningForeground#2B2612
  • statusBarItem.warningHoverBackground#CAA681aa
  • tab.activeBackground#2F2D1D
  • tab.activeBorderTop#94C36F
  • tab.activeForeground#BBDDE2
  • tab.border#41371B
  • tab.hoverBackground#2F2D1D80
  • tab.hoverForeground#BBDDE2
  • tab.inactiveBackground#28201A
  • tab.inactiveForeground#546249
  • tab.selectedBackground#27251B70
  • terminal.ansiBlack#000000
  • terminal.ansiBlue#618CE9
  • terminal.ansiBrightBlack#494949
  • terminal.ansiBrightBlue#E5EEFF
  • terminal.ansiBrightCyan#DBF1FE
  • terminal.ansiBrightGreen#D4FFE3
  • terminal.ansiBrightMagenta#FF5FD7
  • terminal.ansiBrightRed#FFC2C0
  • terminal.ansiBrightWhite#F9F9F8
  • terminal.ansiBrightYellow#E4F284
  • terminal.ansiCyan#8CBFDD
  • terminal.ansiGreen#3CE475
  • terminal.ansiMagenta#F32BC2
  • terminal.ansiRed#EC5652
  • terminal.ansiWhite#FEFEFE
  • terminal.ansiYellow#B4C63C
  • terminal.background#28201A
  • terminal.border#41371B
  • terminal.foreground#BBDDE2
  • terminal.inactiveSelectionBackground#48422D70
  • terminal.selectionBackground#48422D70
  • textBlockQuote.background#1C1612
  • textBlockQuote.border#41371B
  • textCodeBlock.background#1C1612
  • textLink.activeForeground#81A6CA
  • textLink.foreground#81C4CA
  • textPreformat.background#1C1612
  • textPreformat.foreground#BBDDE2
  • textSeparator.foreground#BBDDE2
  • titleBar.activeBackground#2F2D1D
  • titleBar.activeForeground#BBDDE2
  • titleBar.inactiveBackground#2F2D1D
  • titleBar.inactiveForeground#546249
  • widget.border#41371B

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
meta.tag, string#BBDDE2
meta.diff, meta.diff.header#546249
meta.link.reference.def.restructuredtext, string.other.link.description, string.other.link.title#C6EAF0
emphasisitalic
strongbold
invalid#CA8181strikethrough
invalid.deprecated#BBDDE2underline italic
header#C6EAF0
source.ini, source.ignore, source#B7DDE1
markup.inserted#C6EAF0
markup.deleted#CA8181
markup.changed#81A6CA
markup.error#CA8181
markup.underlineunderline
markup.bold#CAA681bold
markup.heading#94C36Fbold
markup.italic#B7DDE1italic
markup.inline.raw, markup.raw.restructuredtext#94C36F
markup.underline.link, markup.underline.link.image, markup.quote#81A6CA
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext#81C4CA
meta.separator.markdown#94C36F
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown#EFCBC2
markup.heading.markdown punctuation.definition.string.begin, markup.heading.markdown punctuation.definition.string.end#CAA681
entity.name.class, entity.name.type.class, entity.other.inherited-class#81C4CA
entity.name.tag, entity.other.attribute-name.parent-selector#F1DACA
entity.other.attribute-name#81C4CA
entity.name.function, meta.function-call, meta.method-call, meta.method#94C36F
meta.selector.css, meta.at-rule.function variable, meta.at-rule.mixin variable, variable.parameter, entity.name.variable.parameter#BFE8EE
support#AADFE9
entity.name, variable.other.key#94C36F
entity.name.type#CBEBB3
entity.name.type.module, entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type#A8E6A3
entity.other.attribute-name, entity.other.attribute-name.pseudo-class.css#C2E9EF
entity.other.attribute-name.class.css#94C36F
storage.class, storage.type#81C4CA
storage.modifier#C3EAEF
comment, punctuation.definition.comment, unused.comment, wildcard.comment#546249
constant#C6EAF0
constant.other.color#EADDAE
constant.character.escape, constant.character.string.escape, constant.regexp, constant.language#EAC6AE
constant.other.date, constant.other.timestamp#BEE8EE
keyword.operator#F2D5CF
keyword.other.unit#A3DFE6
keyword.control, keyword.other.template, keyword.other.substitution#E9DAAA
keyword.other.this#C6EAF0
keyword.control.import, keyword.control.from#E4E9AA
keyword.control.new, keyword.operator.new, keyword.other.important.css#81C4CA
keyword.control.flow, keyword.control.loop, keyword.control.conditional, keyword.operator.logical, keyword.operator.relational, keyword.operator.comparison, keyword.operator.ternary#E2E7A6
meta.attribute-selector.scss#C9EAAE
entity.name.tag.css, entity.name.tag.less, entity.name.tag.custom.css#F1DACA
entity.name.tag.wildcard.css, entity.name.tag.wildcard.less, entity.name.tag.wildcard.scss, entity.name.tag.wildcard.sass#EBD4B2
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#81C4CA
support.constant.property-value.css, constant.numeric.css#B7DDE1
keyword.control.at-rule.apply.tailwind#E4E9AA
keyword.control.at-rule.tailwind.tailwind#E9DAAA
keyword.control.at-rule.layer.tailwind#E2E7A6
meta.selector#C9EAAE
punctuation.definition.string.begin, punctuation.definition.string.end, punctuation.support.type.property-name.begin, punctuation.support.type.property-name.end#F8EFED
punctuation.definition.constant.restructuredtext#C6EAF0
string.quoted.docstring.multi#94C36F
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#F8EFED
punctuation, punctuation.definition.tag, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html#EBD4B2
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#FEFEFE
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#EDD8CF
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#EEE0D2
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#F8F2ED
punctuation.definition.directive.restructuredtext#C6EAF0
variable#AEE3EA
variable.other.alias.yaml#AEE3EAunderline
variable.language, variable.parameter.function.language.special#EAC6AE
variable.other.constant#D3E6F3
support.variable#AEE3EA
variable.other.property, support.variable.property, variable.object.property, variable.other.object.property#BED3EE
support.function.magic, variable.other.predefined, storage.modifier.async, keyword.control.trycatch, keyword.control.trycatch.js, keyword.control.trycatch.ts#CAA681
support.function, support.type.property-name#F1DACB
storage#EDC6BA
string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp#B4C63C
punctuation.definition.group.capture.regexp#EC5652
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end#EC5652
punctuation.definition.character-class.regexp#E4F284
punctuation.definition.group.regexp#E5EEFF
punctuation.definition.group.assertion.regexp, keyword.operator.negation.regexp#EC5652
meta.assertion.look-ahead.regexp#E5EEFF
source.json meta.structure.dictionary.json support.type.property-name.json#94C36F
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#81C4CA
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#81A6CA
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#CAA681
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#CA8181
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#3A8B3A
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#94C36F
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#81C4CA
token.info-token#81A6CA
token.warn-token#CAA681
token.error-token#CA8181
token.debug-token#CAA681