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#10231570
  • activityBar.activeBorder#81B18E
  • activityBar.background#101E14
  • activityBar.foreground#CDE5CF
  • activityBar.inactiveForeground#4F6B66
  • activityBarBadge.background#84ADC7
  • activityBarBadge.foreground#25160E
  • activityBarTop.foreground#CDE5CF
  • badge.background#84ADC7
  • badge.foreground#25160E
  • breadcrumb.activeForeground#CDE5CF
  • breadcrumb.activeSelectionForeground#CDE5CF
  • breadcrumb.background#101E14
  • breadcrumb.focusForeground#CDE5CF
  • breadcrumb.foreground#4F6B66
  • breadcrumbPicker.background#101E14
  • button.background#84ADC7db
  • button.foreground#25160E
  • button.hoverBackground#84ADC7
  • button.secondaryBackground#81B18Edb
  • button.secondaryForeground#25160E
  • button.secondaryHoverBackground#81B18E
  • checkbox.background#111C1A
  • checkbox.foreground#CDE5CF
  • debugToolBar.background#83A6C9
  • debugToolBar.foreground#25160E
  • descriptionForeground#ACD8D0
  • diffEditor.diagonalFill#83A6C9
  • diffEditor.insertedLineBackground#83A6C940
  • diffEditor.insertedTextBackground#83A6C950
  • diffEditor.insertedTextBorder#83A6C9
  • diffEditor.removedLineBackground#C7858540
  • diffEditor.removedTextBackground#C7858550
  • diffEditor.removedTextBorder#C78585
  • diffEditorGutter.insertedLineBackground#83A6C9
  • diffEditorGutter.removedLineBackground#C78585
  • disabledForeground#4F6B66
  • dropdown.background#211B17
  • dropdown.border#163619
  • dropdown.foreground#CDE5CF
  • editor.background#111C1A
  • editor.findMatchBackground#283F5870
  • editor.findMatchForeground#CDE5CF
  • editor.findMatchHighlightBackground#10231570
  • editor.findMatchHighlightForeground#CDE5CF
  • editor.findRangeHighlightBackground#24422C70
  • editor.foldBackground#10231570
  • editor.foldPlaceholderForeground#CDE5CF
  • editor.foreground#CDE5CF
  • editor.hoverHighlightBackground#10231570
  • editor.inactiveSelectionBackground#24422C70
  • editor.lineHighlightBackground#00000010
  • editor.placeholder.foreground#ACD8D0
  • editor.rangeHighlightBackground#10231570
  • editor.selectionBackground#24422C70
  • editor.selectionForeground#CDE5CF
  • editor.selectionHighlightBackground#24422C70
  • editor.snippetFinalTabstopHighlightBackground#10231570
  • editor.snippetTabstopHighlightBackground#10231570
  • editor.symbolHighlightBackground#10231570
  • editor.wordHighlightBackground#10231570
  • editor.wordHighlightStrongBackground#10231550
  • editor.wordHighlightTextBackground#10231570
  • editorCodeLens.foreground#4F6B66
  • editorCursor.background#10231570
  • editorCursor.foreground#81B18E
  • editorError.foreground#C78585
  • editorGroup.border#163619
  • editorGroup.dropBackground#211B17
  • editorGroup.emptyBackground#111C1A
  • editorGroupHeader.border#163619
  • editorGroupHeader.tabsBackground#111C1A
  • editorGutter.addedBackground#2AAA2A
  • editorGutter.background#111C1A
  • editorGutter.commentRangeForeground#4F6B66
  • editorGutter.deletedBackground#C78585
  • editorGutter.modifiedBackground#83A6C9
  • editorHint.foreground#2AAA2A
  • editorHoverWidget.background#111C1A
  • editorHoverWidget.border#163619
  • editorHoverWidget.foreground#CDE5CF
  • editorHoverWidget.highlightForeground#CDE5CF
  • editorHoverWidget.statusBarBackground#111C1A
  • editorIndentGuide.activeBackground1#81B18E
  • editorIndentGuide.background1#10231570
  • editorInfo.foreground#83A6C9
  • editorLineNumber.activeForeground#81B18E
  • editorLineNumber.dimmedForeground#4F6B6690
  • editorLineNumber.foreground#4F6B66
  • editorLink.activeForeground#83A6C9
  • editorMarkerNavigation.background#101E14
  • editorMarkerNavigationError.background#101E14
  • editorMarkerNavigationWarning.background#101E14
  • editorMultiCursor.primary.background#10231570
  • editorMultiCursor.primary.foreground#81B18E
  • editorMultiCursor.secondary.background#10231570
  • editorMultiCursor.secondary.foreground#CDE5CF
  • editorOverviewRuler.addedForeground#2AAA2A
  • editorOverviewRuler.border#163619
  • editorOverviewRuler.commentForeground#4F6B66
  • editorOverviewRuler.commonContentForeground#CDE5CF
  • editorOverviewRuler.currentContentForeground#83A6C9
  • editorOverviewRuler.deletedForeground#C78585
  • editorOverviewRuler.errorForeground#C78585
  • editorOverviewRuler.findMatchForeground#CDE5CF
  • editorOverviewRuler.incomingContentForeground#2AAA2A
  • editorOverviewRuler.infoForeground#83A6C9
  • editorOverviewRuler.modifiedForeground#83A6C9
  • editorOverviewRuler.rangeHighlightForeground#10231570
  • editorOverviewRuler.selectionHighlightForeground#24422C70
  • editorOverviewRuler.warningForeground#C7A685
  • editorOverviewRuler.wordHighlightForeground#10231570
  • editorOverviewRuler.wordHighlightStrongForeground#10231570
  • editorRuler.foreground#10231570
  • editorSuggestWidget.background#111C1A
  • editorSuggestWidget.border#163619
  • editorSuggestWidget.focusHighlightForeground#CDE5CF
  • editorSuggestWidget.foreground#4F6B66
  • editorSuggestWidget.highlightForeground#CDE5CF
  • editorSuggestWidget.selectedBackground#84ADC780
  • editorSuggestWidget.selectedForeground#CDE5CF
  • editorUnicodeHighlight.background#10231570
  • editorWarning.foreground#C7A685
  • editorWhitespace.foreground#10231570
  • editorWidget.background#111C1A
  • editorWidget.border#163619
  • editorWidget.foreground#CDE5CF
  • errorForeground#C78585
  • extensionButton.prominentBackground#84ADC7aa
  • extensionButton.prominentForeground#25160E
  • extensionButton.prominentHoverBackground#84ADC7
  • focusBorder#163619
  • foreground#CDE5CF
  • gitDecoration.addedResourceForeground#2AAA2A
  • gitDecoration.conflictingResourceForeground#C7A685
  • gitDecoration.deletedResourceForeground#C78585
  • gitDecoration.ignoredResourceForeground#4F6B66
  • gitDecoration.modifiedResourceForeground#83A6C9
  • gitDecoration.renamedResourceForeground#81B18E
  • gitDecoration.untrackedResourceForeground#ACD8D0
  • input.background#111C1A
  • input.border#4F6B66
  • input.foreground#CDE5CF
  • input.placeholderForeground#4F6B66
  • inputOption.activeBorder#81B18E
  • inputValidation.errorBorder#C78585
  • inputValidation.infoBorder#83A6C9
  • inputValidation.warningBorder#C7A685
  • list.activeSelectionBackground#84ADC770
  • list.activeSelectionForeground#CDE5CF
  • list.dropBackground#211B17
  • list.dropBetweenBackground#163619
  • list.errorForeground#C78585
  • list.focusBackground#84ADC750
  • list.focusForeground#CDE5CF
  • list.highlightForeground#81B18E
  • list.hoverBackground#84ADC720
  • list.hoverForeground#CDE5CF
  • list.inactiveFocusBackground#101E14
  • list.inactiveSelectionBackground#84ADC760
  • list.inactiveSelectionForeground#ACD8D0
  • list.warningForeground#C7A685
  • listFilterWidget.background#211B17
  • listFilterWidget.noMatchesOutline#C78585
  • listFilterWidget.outline#163619
  • merge.border#163619
  • merge.currentContentBackground#83A6C920
  • merge.currentHeaderBackground#83A6C940
  • merge.incomingContentBackground#2AAA2A20
  • merge.incomingHeaderBackground#2AAA2A40
  • mergeEditor.change.background#C7A685
  • notificationLink.foreground#83A6C9
  • notifications.background#101E14
  • notifications.border#163619
  • notifications.foreground#CDE5CF
  • notificationsErrorIcon.foreground#C78585
  • notificationsInfoIcon.foreground#83A6C9
  • notificationsWarningIcon.foreground#C7A685
  • panel.background#101E14
  • panel.border#81B18E
  • panelInput.border#4F6B66
  • panelTitle.activeBorder#81B18E
  • panelTitle.activeForeground#CDE5CF
  • panelTitle.inactiveForeground#4F6B66
  • peekView.border#84ADC7
  • peekViewEditor.background#111C1A
  • peekViewEditor.matchHighlightBackground#283F5870
  • peekViewResult.background#111C1A
  • peekViewResult.fileForeground#CDE5CF
  • peekViewResult.lineForeground#CDE5CF
  • peekViewResult.matchHighlightBackground#10231570
  • peekViewResult.selectionBackground#101E14
  • peekViewResult.selectionForeground#CDE5CF
  • peekViewTitle.background#111C1A
  • peekViewTitleDescription.foreground#ACD8D0
  • peekViewTitleLabel.foreground#CDE5CF
  • pickerGroup.border#84ADC7
  • pickerGroup.foreground#AFD5EE
  • progressBar.background#81B18E
  • selection.background#84ADC750
  • settings.checkboxBackground#111C1A
  • settings.checkboxBorder#163619
  • settings.checkboxForeground#CDE5CF
  • settings.dropdownBackground#111C1A
  • settings.dropdownBorder#163619
  • settings.dropdownForeground#CDE5CF
  • settings.focusedRowBackground#10231570
  • settings.focusedRowBorder#4F6B66
  • settings.headerBorder#163619
  • settings.headerForeground#CDE5CF
  • settings.inactiveSelectedItemBorder#4F6B66
  • settings.modifiedItemIndicator#C7A685
  • settings.numberInputBackground#111C1A
  • settings.numberInputBorder#4F6B66
  • settings.numberInputForeground#CDE5CF
  • settings.rowHoverBackground#10231570
  • settings.settingsHeaderHoverForeground#CDE5CF
  • settings.textInputBackground#111C1A
  • settings.textInputBorder#4F6B66
  • settings.textInputForeground#CDE5CF
  • sideBar.background#111C1A
  • sideBarActivityBarTop.border#163619
  • sideBarSectionHeader.background#101E14
  • sideBarSectionHeader.border#163619
  • sideBarStickyScroll.background#111C1A
  • sideBarStickyScroll.border#163619
  • sideBarStickyScroll.shadow#163619
  • sideBarTitle.background#111C1A
  • sideBarTitle.foreground#CDE5CF
  • statusBar.background#84ADC7
  • statusBar.debuggingBackground#C7A685
  • statusBar.debuggingForeground#25160E
  • statusBar.foreground#25160E
  • statusBar.noFolderBackground#ACD8D0
  • statusBar.noFolderForeground#25160E
  • statusBarItem.activeBackground#84ADC7aa
  • statusBarItem.errorBackground#C78585
  • statusBarItem.errorForeground#25160E
  • statusBarItem.errorHoverBackground#C78585aa
  • statusBarItem.hoverBackground#84ADC7aa
  • statusBarItem.prominentBackground#84ADC7aa
  • statusBarItem.prominentForeground#25160E
  • statusBarItem.prominentHoverBackground#84ADC7aa
  • statusBarItem.prominentHoverForeground#25160E
  • statusBarItem.remoteBackground#81B18E
  • statusBarItem.remoteForeground#25160E
  • statusBarItem.remoteHoverBackground#81B18Eaa
  • statusBarItem.warningBackground#C7A685
  • statusBarItem.warningForeground#25160E
  • statusBarItem.warningHoverBackground#C7A685aa
  • tab.activeBackground#101E14
  • tab.activeBorderTop#81B18E
  • tab.activeForeground#CDE5CF
  • tab.border#163619
  • tab.hoverBackground#101E1480
  • tab.hoverForeground#CDE5CF
  • tab.inactiveBackground#111C1A
  • tab.inactiveForeground#4F6B66
  • tab.selectedBackground#10231570
  • terminal.ansiBlack#000000
  • terminal.ansiBlue#88829A
  • terminal.ansiBrightBlack#4B4B4B
  • terminal.ansiBrightBlue#8F7FBD
  • terminal.ansiBrightCyan#6CC5E8
  • terminal.ansiBrightGreen#D8E8D6
  • terminal.ansiBrightMagenta#E887DF
  • terminal.ansiBrightRed#E7B8CF
  • terminal.ansiBrightWhite#F8F8F7
  • terminal.ansiBrightYellow#D5C144
  • terminal.ansiCyan#298BB2
  • terminal.ansiGreen#7B857A
  • terminal.ansiMagenta#CA54BE
  • terminal.ansiRed#A0798C
  • terminal.ansiWhite#F5F4EF
  • terminal.ansiYellow#998A30
  • terminal.background#111C1A
  • terminal.border#163619
  • terminal.foreground#CDE5CF
  • terminal.inactiveSelectionBackground#24422C70
  • terminal.selectionBackground#24422C70
  • textBlockQuote.background#211B17
  • textBlockQuote.border#163619
  • textCodeBlock.background#211B17
  • textLink.activeForeground#83A6C9
  • textLink.foreground#84ADC7
  • textPreformat.background#211B17
  • textPreformat.foreground#CDE5CF
  • textSeparator.foreground#CDE5CF
  • titleBar.activeBackground#101E14
  • titleBar.activeForeground#CDE5CF
  • titleBar.inactiveBackground#101E14
  • titleBar.inactiveForeground#4F6B66
  • widget.border#163619

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
meta.tag, string#CDE5CF
meta.diff, meta.diff.header#4F6B66
meta.link.reference.def.restructuredtext, string.other.link.description, string.other.link.title#B7D3F0
emphasisitalic
strongbold
invalid#C78585strikethrough
invalid.deprecated#CDE5CFunderline italic
header#B7D3F0
source.ini, source.ignore, source#ACD8D0
markup.inserted#B7D3F0
markup.deleted#C78585
markup.changed#83A6C9
markup.error#C78585
markup.underlineunderline
markup.bold#C7A685bold
markup.heading#81B18Ebold
markup.italic#ACD8D0italic
markup.inline.raw, markup.raw.restructuredtext#81B18E
markup.underline.link, markup.underline.link.image, markup.quote#83A6C9
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext#84ADC7
meta.separator.markdown#81B18E
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown#C4E1F2
markup.heading.markdown punctuation.definition.string.begin, markup.heading.markdown punctuation.definition.string.end#C7A685
entity.name.class, entity.name.type.class, entity.other.inherited-class#84ADC7
entity.name.tag, entity.other.attribute-name.parent-selector#CDF4D8
entity.other.attribute-name#84ADC7
entity.name.function, meta.function-call, meta.method-call, meta.method#81B18E
meta.selector.css, meta.at-rule.function variable, meta.at-rule.mixin variable, variable.parameter, entity.name.variable.parameter#C9DEF3
support#E8AF91
entity.name, variable.other.key#81B18E
entity.name.type#F1CDBC
entity.name.type.module, entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type#EBD7A2
entity.other.attribute-name, entity.other.attribute-name.pseudo-class.css#CDF4EC
entity.other.attribute-name.class.css#81B18E
storage.class, storage.type#84ADC7
storage.modifier#B7DAF0
comment, punctuation.definition.comment, unused.comment, wildcard.comment#4F6B66
constant#B7D3F0
constant.other.color#9EEBA4
constant.character.escape, constant.character.string.escape, constant.regexp, constant.language#91E8D8
constant.other.date, constant.other.timestamp#B4D5EF
keyword.operator#B3D1EF
keyword.other.unit#9AE9B0
keyword.control, keyword.other.template, keyword.other.substitution#EAB59A
keyword.other.this#B7D3F0
keyword.control.import, keyword.control.from#E9C29A
keyword.control.new, keyword.operator.new, keyword.other.important.css#84ADC7
keyword.control.flow, keyword.control.loop, keyword.control.conditional, keyword.operator.logical, keyword.operator.relational, keyword.operator.comparison, keyword.operator.ternary#E9D796
meta.attribute-selector.scss#C4F2EA
entity.name.tag.css, entity.name.tag.less, entity.name.tag.custom.css#CDF4D8
entity.name.tag.wildcard.css, entity.name.tag.wildcard.less, entity.name.tag.wildcard.scss, entity.name.tag.wildcard.sass#B4EFD1
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#84ADC7
support.constant.property-value.css, constant.numeric.css#ACD8D0
keyword.control.at-rule.apply.tailwind#E9C29A
keyword.control.at-rule.tailwind.tailwind#EAB59A
keyword.control.at-rule.layer.tailwind#E9D796
meta.selector#C4F2EA
punctuation.definition.string.begin, punctuation.definition.string.end, punctuation.support.type.property-name.begin, punctuation.support.type.property-name.end#CDEFD4
punctuation.definition.constant.restructuredtext#B7D3F0
string.quoted.docstring.multi#81B18E
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#CDEFD4
punctuation, punctuation.definition.tag, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html#B4EFD1
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#F5F4EF
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#E8F8F0
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#DCF4E7
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#E0F5EB
punctuation.definition.directive.restructuredtext#B7D3F0
variable#B7F0BE
variable.other.alias.yaml#B7F0BEunderline
variable.language, variable.parameter.function.language.special#91E8D8
variable.other.constant#D1F5DF
support.variable#B7F0BE
variable.other.property, support.variable.property, variable.object.property, variable.other.object.property#BBF1E1
support.function.magic, variable.other.predefined, storage.modifier.async, keyword.control.trycatch, keyword.control.trycatch.js, keyword.control.trycatch.ts#C7A685
support.function, support.type.property-name#D9E1F7
storage#B3EFE4
string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp#998A30
punctuation.definition.group.capture.regexp#A0798C
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end#A0798C
punctuation.definition.character-class.regexp#D5C144
punctuation.definition.group.regexp#8F7FBD
punctuation.definition.group.assertion.regexp, keyword.operator.negation.regexp#A0798C
meta.assertion.look-ahead.regexp#8F7FBD
source.json meta.structure.dictionary.json support.type.property-name.json#81B18E
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#84ADC7
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#83A6C9
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#C7A685
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#2AAA2A
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#81B18E
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#84ADC7
token.info-token#83A6C9
token.warn-token#C7A685
token.error-token#C78585
token.debug-token#C7A685