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#2C443670
  • activityBar.activeBorder#00A83F
  • activityBar.background#2F322A
  • activityBar.foreground#D8E4DD
  • activityBar.inactiveForeground#5D7D68
  • activityBarBadge.background#FF6903
  • activityBarBadge.foreground#2D3125
  • activityBarTop.foreground#D8E4DD
  • badge.background#FF6903
  • badge.foreground#2D3125
  • breadcrumb.activeForeground#D8E4DD
  • breadcrumb.activeSelectionForeground#D8E4DD
  • breadcrumb.background#2F322A
  • breadcrumb.focusForeground#D8E4DD
  • breadcrumb.foreground#5D7D68
  • breadcrumbPicker.background#2F322A
  • button.background#FF6903db
  • button.foreground#2D3125
  • button.hoverBackground#FF6903
  • button.secondaryBackground#00A83Fdb
  • button.secondaryForeground#D8E4DD
  • button.secondaryHoverBackground#00A83F
  • checkbox.background#3A322C
  • checkbox.foreground#D8E4DD
  • debugToolBar.background#2192FF
  • debugToolBar.foreground#2D3125
  • descriptionForeground#DBCFC7
  • diffEditor.diagonalFill#2192FF
  • diffEditor.insertedLineBackground#2192FF40
  • diffEditor.insertedTextBackground#2192FF50
  • diffEditor.insertedTextBorder#2192FF
  • diffEditor.removedLineBackground#FF626240
  • diffEditor.removedTextBackground#FF626250
  • diffEditor.removedTextBorder#FF6262
  • diffEditorGutter.insertedLineBackground#2192FF
  • diffEditorGutter.removedLineBackground#FF6262
  • disabledForeground#5D7D68
  • dropdown.background#3A322C
  • dropdown.border#554235
  • dropdown.foreground#D8E4DD
  • editor.background#3A322C
  • editor.findMatchBackground#4A725A70
  • editor.findMatchForeground#D8E4DD
  • editor.findMatchHighlightBackground#2C443670
  • editor.findMatchHighlightForeground#D8E4DD
  • editor.findRangeHighlightBackground#42614E70
  • editor.foldBackground#2C443670
  • editor.foldPlaceholderForeground#D8E4DD
  • editor.foreground#D8E4DD
  • editor.hoverHighlightBackground#2C443670
  • editor.inactiveSelectionBackground#42614E70
  • editor.lineHighlightBackground#00000010
  • editor.placeholder.foreground#DBCFC7
  • editor.rangeHighlightBackground#2C443670
  • editor.selectionBackground#42614E70
  • editor.selectionForeground#D8E4DD
  • editor.selectionHighlightBackground#42614E70
  • editor.snippetFinalTabstopHighlightBackground#2C443670
  • editor.snippetTabstopHighlightBackground#2C443670
  • editor.symbolHighlightBackground#2C443670
  • editor.wordHighlightBackground#2C443670
  • editor.wordHighlightStrongBackground#2C443650
  • editor.wordHighlightTextBackground#2C443670
  • editorCodeLens.foreground#5D7D68
  • editorCursor.background#2C443670
  • editorCursor.foreground#00A83F
  • editorError.foreground#FF6262
  • editorGroup.border#554235
  • editorGroup.dropBackground#3A322C
  • editorGroup.emptyBackground#3A322C
  • editorGroupHeader.border#554235
  • editorGroupHeader.tabsBackground#3A322C
  • editorGutter.addedBackground#00B900
  • editorGutter.background#3A322C
  • editorGutter.commentRangeForeground#5D7D68
  • editorGutter.deletedBackground#FF6262
  • editorGutter.modifiedBackground#2192FF
  • editorHint.foreground#00B900
  • editorHoverWidget.background#3A322C
  • editorHoverWidget.border#554235
  • editorHoverWidget.foreground#D8E4DD
  • editorHoverWidget.highlightForeground#D8E4DD
  • editorHoverWidget.statusBarBackground#3A322C
  • editorIndentGuide.activeBackground1#00A83F
  • editorIndentGuide.background1#2C443670
  • editorInfo.foreground#2192FF
  • editorLineNumber.activeForeground#00A83F
  • editorLineNumber.dimmedForeground#5D7D6890
  • editorLineNumber.foreground#5D7D68
  • editorLink.activeForeground#2192FF
  • editorMarkerNavigation.background#2F322A
  • editorMarkerNavigationError.background#2F322A
  • editorMarkerNavigationWarning.background#2F322A
  • editorMultiCursor.primary.background#2C443670
  • editorMultiCursor.primary.foreground#00A83F
  • editorMultiCursor.secondary.background#2C443670
  • editorMultiCursor.secondary.foreground#D8E4DD
  • editorOverviewRuler.addedForeground#00B900
  • editorOverviewRuler.border#554235
  • editorOverviewRuler.commentForeground#5D7D68
  • editorOverviewRuler.commonContentForeground#D8E4DD
  • editorOverviewRuler.currentContentForeground#2192FF
  • editorOverviewRuler.deletedForeground#FF6262
  • editorOverviewRuler.errorForeground#FF6262
  • editorOverviewRuler.findMatchForeground#D8E4DD
  • editorOverviewRuler.incomingContentForeground#00B900
  • editorOverviewRuler.infoForeground#2192FF
  • editorOverviewRuler.modifiedForeground#2192FF
  • editorOverviewRuler.rangeHighlightForeground#2C443670
  • editorOverviewRuler.selectionHighlightForeground#42614E70
  • editorOverviewRuler.warningForeground#DE6C00
  • editorOverviewRuler.wordHighlightForeground#2C443670
  • editorOverviewRuler.wordHighlightStrongForeground#2C443670
  • editorRuler.foreground#2C443670
  • editorSuggestWidget.background#3A322C
  • editorSuggestWidget.border#554235
  • editorSuggestWidget.focusHighlightForeground#D8E4DD
  • editorSuggestWidget.foreground#5D7D68
  • editorSuggestWidget.highlightForeground#D8E4DD
  • editorSuggestWidget.selectedBackground#FF690380
  • editorSuggestWidget.selectedForeground#D8E4DD
  • editorUnicodeHighlight.background#2C443670
  • editorWarning.foreground#DE6C00
  • editorWhitespace.foreground#2C443670
  • editorWidget.background#3A322C
  • editorWidget.border#554235
  • editorWidget.foreground#D8E4DD
  • errorForeground#FF6262
  • extensionButton.prominentBackground#FF6903aa
  • extensionButton.prominentForeground#2D3125
  • extensionButton.prominentHoverBackground#FF6903
  • focusBorder#554235
  • foreground#D8E4DD
  • gitDecoration.addedResourceForeground#00B900
  • gitDecoration.conflictingResourceForeground#DE6C00
  • gitDecoration.deletedResourceForeground#FF6262
  • gitDecoration.ignoredResourceForeground#5D7D68
  • gitDecoration.modifiedResourceForeground#2192FF
  • gitDecoration.renamedResourceForeground#00A83F
  • gitDecoration.untrackedResourceForeground#DBCFC7
  • input.background#3A322C
  • input.border#5D7D68
  • input.foreground#D8E4DD
  • input.placeholderForeground#5D7D68
  • inputOption.activeBorder#00A83F
  • inputValidation.errorBorder#FF6262
  • inputValidation.infoBorder#2192FF
  • inputValidation.warningBorder#DE6C00
  • list.activeSelectionBackground#FF690370
  • list.activeSelectionForeground#D8E4DD
  • list.dropBackground#3A322C
  • list.dropBetweenBackground#554235
  • list.errorForeground#FF6262
  • list.focusBackground#FF690350
  • list.focusForeground#D8E4DD
  • list.highlightForeground#00A83F
  • list.hoverBackground#FF690320
  • list.hoverForeground#D8E4DD
  • list.inactiveFocusBackground#2F322A
  • list.inactiveSelectionBackground#FF690360
  • list.inactiveSelectionForeground#DBCFC7
  • list.warningForeground#DE6C00
  • listFilterWidget.background#3A322C
  • listFilterWidget.noMatchesOutline#FF6262
  • listFilterWidget.outline#554235
  • merge.border#554235
  • merge.currentContentBackground#2192FF20
  • merge.currentHeaderBackground#2192FF40
  • merge.incomingContentBackground#00B90020
  • merge.incomingHeaderBackground#00B90040
  • mergeEditor.change.background#DE6C00
  • notificationLink.foreground#2192FF
  • notifications.background#2F322A
  • notifications.border#554235
  • notifications.foreground#D8E4DD
  • notificationsErrorIcon.foreground#FF6262
  • notificationsInfoIcon.foreground#2192FF
  • notificationsWarningIcon.foreground#DE6C00
  • panel.background#2F322A
  • panel.border#00A83F
  • panelInput.border#5D7D68
  • panelTitle.activeBorder#00A83F
  • panelTitle.activeForeground#D8E4DD
  • panelTitle.inactiveForeground#5D7D68
  • peekView.border#FF6903
  • peekViewEditor.background#3A322C
  • peekViewEditor.matchHighlightBackground#4A725A70
  • peekViewResult.background#3A322C
  • peekViewResult.fileForeground#D8E4DD
  • peekViewResult.lineForeground#D8E4DD
  • peekViewResult.matchHighlightBackground#2C443670
  • peekViewResult.selectionBackground#2F322A
  • peekViewResult.selectionForeground#D8E4DD
  • peekViewTitle.background#3A322C
  • peekViewTitleDescription.foreground#DBCFC7
  • peekViewTitleLabel.foreground#D8E4DD
  • pickerGroup.border#FF6903
  • pickerGroup.foreground#D7EDB5
  • progressBar.background#00A83F
  • selection.background#FF690350
  • settings.checkboxBackground#3A322C
  • settings.checkboxBorder#554235
  • settings.checkboxForeground#D8E4DD
  • settings.dropdownBackground#3A322C
  • settings.dropdownBorder#554235
  • settings.dropdownForeground#D8E4DD
  • settings.focusedRowBackground#2C443670
  • settings.focusedRowBorder#5D7D68
  • settings.headerBorder#554235
  • settings.headerForeground#D8E4DD
  • settings.inactiveSelectedItemBorder#5D7D68
  • settings.modifiedItemIndicator#DE6C00
  • settings.numberInputBackground#3A322C
  • settings.numberInputBorder#5D7D68
  • settings.numberInputForeground#D8E4DD
  • settings.rowHoverBackground#2C443670
  • settings.settingsHeaderHoverForeground#D8E4DD
  • settings.textInputBackground#3A322C
  • settings.textInputBorder#5D7D68
  • settings.textInputForeground#D8E4DD
  • sideBar.background#3A322C
  • sideBarActivityBarTop.border#554235
  • sideBarSectionHeader.background#2F322A
  • sideBarSectionHeader.border#554235
  • sideBarStickyScroll.background#3A322C
  • sideBarStickyScroll.border#554235
  • sideBarStickyScroll.shadow#554235
  • sideBarTitle.background#3A322C
  • sideBarTitle.foreground#D8E4DD
  • statusBar.background#FF6903
  • statusBar.debuggingBackground#DE6C00
  • statusBar.debuggingForeground#D8E4DD
  • statusBar.foreground#2D3125
  • statusBar.noFolderBackground#DBCFC7
  • statusBar.noFolderForeground#2D3125
  • statusBarItem.activeBackground#FF6903aa
  • statusBarItem.errorBackground#FF6262
  • statusBarItem.errorForeground#2D3125
  • statusBarItem.errorHoverBackground#FF6262aa
  • statusBarItem.hoverBackground#FF6903aa
  • statusBarItem.prominentBackground#FF6903aa
  • statusBarItem.prominentForeground#2D3125
  • statusBarItem.prominentHoverBackground#FF6903aa
  • statusBarItem.prominentHoverForeground#2D3125
  • statusBarItem.remoteBackground#00A83F
  • statusBarItem.remoteForeground#D8E4DD
  • statusBarItem.remoteHoverBackground#00A83Faa
  • statusBarItem.warningBackground#DE6C00
  • statusBarItem.warningForeground#D8E4DD
  • statusBarItem.warningHoverBackground#DE6C00aa
  • tab.activeBackground#2F322A
  • tab.activeBorderTop#00A83F
  • tab.activeForeground#D8E4DD
  • tab.border#554235
  • tab.hoverBackground#2F322A80
  • tab.hoverForeground#D8E4DD
  • tab.inactiveBackground#3A322C
  • tab.inactiveForeground#5D7D68
  • tab.selectedBackground#2C443670
  • terminal.ansiBlack#000000
  • terminal.ansiBlue#7285FF
  • terminal.ansiBrightBlack#494949
  • terminal.ansiBrightBlue#7183FF
  • terminal.ansiBrightCyan#7AECBD
  • terminal.ansiBrightGreen#83EDA1
  • terminal.ansiBrightMagenta#B58AD4
  • terminal.ansiBrightRed#F36600
  • terminal.ansiBrightWhite#FDFDFC
  • terminal.ansiBrightYellow#EEF214
  • terminal.ansiCyan#00A35E
  • terminal.ansiGreen#3BBF60
  • terminal.ansiMagenta#B94EFF
  • terminal.ansiRed#FC6A00
  • terminal.ansiWhite#F3F1EE
  • terminal.ansiYellow#8C8F00
  • terminal.background#3A322C
  • terminal.border#554235
  • terminal.foreground#D8E4DD
  • terminal.inactiveSelectionBackground#42614E70
  • terminal.selectionBackground#42614E70
  • textBlockQuote.background#3A322C
  • textBlockQuote.border#554235
  • textCodeBlock.background#3A322C
  • textLink.activeForeground#2192FF
  • textLink.foreground#FF6903
  • textPreformat.background#3A322C
  • textPreformat.foreground#D8E4DD
  • textSeparator.foreground#D8E4DD
  • titleBar.activeBackground#2F322A
  • titleBar.activeForeground#D8E4DD
  • titleBar.inactiveBackground#2F322A
  • titleBar.inactiveForeground#5D7D68
  • widget.border#554235

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
meta.tag, string#D8E4DD
meta.diff, meta.diff.header#5D7D68
meta.link.reference.def.restructuredtext, string.other.link.description, string.other.link.title#D4EDDE
emphasisitalic
strongbold
invalid#FF6262strikethrough
invalid.deprecated#D8E4DDunderline italic
header#D4EDDE
source.ini, source.ignore, source#DBCFC7
markup.inserted#D4EDDE
markup.deleted#FF6262
markup.changed#2192FF
markup.error#FF6262
markup.underlineunderline
markup.bold#DE6C00bold
markup.heading#00A83Fbold
markup.italic#DBCFC7italic
markup.inline.raw, markup.raw.restructuredtext#00A83F
markup.underline.link, markup.underline.link.image, markup.quote#2192FF
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext#FF6903
meta.separator.markdown#00A83F
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown#BAEDCF
markup.heading.markdown punctuation.definition.string.begin, markup.heading.markdown punctuation.definition.string.end#DE6C00
entity.name.class, entity.name.type.class, entity.other.inherited-class#FF6903
entity.name.tag, entity.other.attribute-name.parent-selector#BFE8CF
entity.other.attribute-name#FF6903
entity.name.function, meta.function-call, meta.method-call, meta.method#00A83F
meta.selector.css, meta.at-rule.function variable, meta.at-rule.mixin variable, variable.parameter, entity.name.variable.parameter#DBEFBE
support#DA9AC1
entity.name, variable.other.key#00A83F
entity.name.type#C4DDEE
entity.name.type.module, entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type#AFBAE9
entity.other.attribute-name, entity.other.attribute-name.pseudo-class.css#D0F1DD
entity.other.attribute-name.class.css#00A83F
storage.class, storage.type#FF6903
storage.modifier#EAD2C3
comment, punctuation.definition.comment, unused.comment, wildcard.comment#5D7D68
constant#D4EDDE
constant.other.color#9BDEB6
constant.character.escape, constant.character.string.escape, constant.regexp, constant.language#DFAFCC
constant.other.date, constant.other.timestamp#D8EABD
keyword.operator#DDEDC5
keyword.other.unit#A6C7DD
keyword.control, keyword.other.template, keyword.other.substitution#9DC9E7
keyword.other.this#D4EDDE
keyword.control.import, keyword.control.from#9BB4D9
keyword.control.new, keyword.operator.new, keyword.other.important.css#FF6903
keyword.control.flow, keyword.control.loop, keyword.control.conditional, keyword.operator.logical, keyword.operator.relational, keyword.operator.comparison, keyword.operator.ternary#A1AEDD
meta.attribute-selector.scss#E5C2D7
entity.name.tag.css, entity.name.tag.less, entity.name.tag.custom.css#BFE8CF
entity.name.tag.wildcard.css, entity.name.tag.wildcard.less, entity.name.tag.wildcard.scss, entity.name.tag.wildcard.sass#C9E3DB
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#FF6903
support.constant.property-value.css, constant.numeric.css#DBCFC7
keyword.control.at-rule.apply.tailwind#9BB4D9
keyword.control.at-rule.tailwind.tailwind#9DC9E7
keyword.control.at-rule.layer.tailwind#A1AEDD
meta.selector#E5C2D7
punctuation.definition.string.begin, punctuation.definition.string.end, punctuation.support.type.property-name.begin, punctuation.support.type.property-name.end#EDF5E0
punctuation.definition.constant.restructuredtext#D4EDDE
string.quoted.docstring.multi#00A83F
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#EDF5E0
punctuation, punctuation.definition.tag, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html#C9E3DB
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#F3F1EE
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#E6F6DA
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#D5EEC8
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#FCFEFB
punctuation.definition.directive.restructuredtext#D4EDDE
variable#B4E9C9
variable.other.alias.yaml#B4E9C9underline
variable.language, variable.parameter.function.language.special#DFAFCC
variable.other.constant#D5F1E7
support.variable#B4E9C9
variable.other.property, support.variable.property, variable.object.property, variable.other.object.property#C3EAE3
support.function.magic, variable.other.predefined, storage.modifier.async, keyword.control.trycatch, keyword.control.trycatch.js, keyword.control.trycatch.ts#DE6C00
support.function, support.type.property-name#E5F6F0
storage#BCE6CD
string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp#8C8F00
punctuation.definition.group.capture.regexp#FC6A00
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end#FC6A00
punctuation.definition.character-class.regexp#EEF214
punctuation.definition.group.regexp#7183FF
punctuation.definition.group.assertion.regexp, keyword.operator.negation.regexp#FC6A00
meta.assertion.look-ahead.regexp#7183FF
source.json meta.structure.dictionary.json support.type.property-name.json#00A83F
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#FF6903
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#2192FF
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#DE6C00
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#FF6262
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#00B900
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#00A83F
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#FF6903
token.info-token#2192FF
token.warn-token#DE6C00
token.error-token#FF6262
token.debug-token#DE6C00