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.activeBorder#de6a41
  • activityBar.activeFocusBorder#de6a41
  • activityBar.background#d0d0c8
  • activityBar.border#00000000
  • activityBar.foreground#242424
  • activityBar.inactiveForeground#8d8d85
  • activityBarBadge.background#de6a41
  • activityBarBadge.foreground#ffffff
  • badge.background#de6a41
  • badge.foreground#ffffff
  • breadcrumb.activeSelectionForeground#242424
  • breadcrumb.focusForeground#242424
  • breadcrumb.foreground#6b6b63
  • breadcrumbPicker.background#c5c5bd
  • button.background#242424
  • button.foreground#d0d0c8
  • button.hoverBackground#3a3a3a
  • button.secondaryBackground#8d8d85
  • button.secondaryForeground#242424
  • button.secondaryHoverBackground#9d9d95
  • charts.blue#de6a41
  • charts.foreground#242424
  • charts.green#7a846a
  • charts.lines#24242440
  • charts.orange#e88b5f
  • charts.purple#a8a67b
  • charts.red#db0030
  • charts.yellow#51573b
  • chat.requestBackground#c5c5bd
  • chat.requestBorder#babab2
  • chat.slashCommandBackground#24242415
  • chat.slashCommandForeground#de6a41
  • commandCenter.activeBackground#24242415
  • commandCenter.background#c5c5bd
  • commandCenter.border#babab2
  • commandCenter.foreground#242424
  • commentsView.resolvedIcon#7a846a
  • commentsView.unresolvedIcon#de6a41
  • debugExceptionWidget.background#db003020
  • debugExceptionWidget.border#db0030
  • debugIcon.continueForeground#7a846a
  • debugIcon.disconnectForeground#ef597a
  • debugIcon.pauseForeground#de6a41
  • debugIcon.startForeground#7a846a
  • debugIcon.stepIntoForeground#d0d0c8
  • debugIcon.stepOutForeground#d0d0c8
  • debugIcon.stepOverForeground#d0d0c8
  • debugIcon.stopForeground#db0030
  • debugToolBar.background#242424
  • debugToolBar.border#00000000
  • debugToolBar.foreground#d0d0c8
  • descriptionForeground#6b6b63
  • dropdown.background#babab2
  • dropdown.border#2424241a
  • dropdown.foreground#242424
  • dropdown.listBackground#c5c5bd
  • editor.background#d0d0c8
  • editor.findMatchBackground#de6a4160
  • editor.findMatchHighlightBackground#de6a4120
  • editor.findRangeHighlightBackground#de6a4110
  • editor.foreground#242424
  • editor.hoverHighlightBackground#de6a4110
  • editor.lineHighlightBackground#2424240d
  • editor.lineHighlightBorder#00000000
  • editor.rangeHighlightBackground#24242410
  • editor.selectionBackground#24242433
  • editor.selectionHighlightBackground#de6a4120
  • editor.wordHighlightBackground#de6a4120
  • editor.wordHighlightStrongBackground#de6a4130
  • editorBracketMatch.background#de6a4140
  • editorBracketMatch.border#de6a41
  • editorCursor.foreground#242424
  • editorError.foreground#db0030
  • editorGutter.addedBackground#7a846a60
  • editorGutter.background#d0d0c8
  • editorGutter.deletedBackground#db003060
  • editorGutter.foldingControlForeground#6b6b63
  • editorGutter.modifiedBackground#de6a4160
  • editorHoverWidget.background#c5c5bd
  • editorHoverWidget.border#babab2
  • editorHoverWidget.foreground#242424
  • editorHoverWidget.statusBarBackground#babab2
  • editorIndentGuide.activeBackground#2424242a
  • editorIndentGuide.background#24242412
  • editorInfo.foreground#de6a41
  • editorLineNumber.activeForeground#242424
  • editorLineNumber.foreground#8d8d85
  • editorOverviewRuler.border#2424240d
  • editorOverviewRuler.commonContentForeground#6b6b63
  • editorOverviewRuler.currentContentForeground#de6a41
  • editorOverviewRuler.incomingContentForeground#7a846a
  • editorRuler.foreground#2424241a
  • editorStickyScroll.background#c5c5bd
  • editorStickyScrollHover.background#de6a4110
  • editorSuggestWidget.background#c5c5bd
  • editorSuggestWidget.border#babab2
  • editorSuggestWidget.foreground#242424
  • editorSuggestWidget.highlightForeground#de6a41
  • editorSuggestWidget.selectedBackground#242424
  • editorSuggestWidget.selectedForeground#d0d0c8
  • editorWarning.foreground#51573b
  • editorWhitespace.foreground#2424241a
  • editorWidget.background#c5c5bd
  • editorWidget.border#babab2
  • editorWidget.resizeBorder#de6a41
  • errorForeground#db0030
  • extensionBadge.remoteBackground#de6a41
  • extensionBadge.remoteForeground#ffffff
  • extensionButton.prominentBackground#de6a41
  • extensionButton.prominentForeground#ffffff
  • extensionButton.prominentHoverBackground#d55a30
  • focusBorder#de6a41
  • foreground#242424
  • gitDecoration.addedResourceForeground#7a846a
  • gitDecoration.conflictingResourceForeground#ef597a
  • gitDecoration.deletedResourceForeground#db0030
  • gitDecoration.ignoredResourceForeground#8d8d85
  • gitDecoration.modifiedResourceForeground#de6a41
  • gitDecoration.stageDeletedResourceForeground#ef597a
  • gitDecoration.stageModifiedResourceForeground#e88b5f
  • gitDecoration.submoduleResourceForeground#363a34
  • gitDecoration.untrackedResourceForeground#7a846a
  • icon.foreground#6b6b63
  • inlineChat.background#c5c5bd
  • inlineChat.border#de6a41
  • inlineChat.foreground#242424
  • inlineChat.inputBackground#babab2
  • inlineChat.inputBorder#00000000
  • input.background#babab2
  • input.border#00000000
  • input.foreground#242424
  • input.placeholderForeground#8d8d85
  • inputOption.activeBackground#de6a41
  • inputOption.activeBorder#de6a41
  • inputOption.activeForeground#ffffff
  • inputValidation.errorBackground#db0030
  • inputValidation.errorBorder#db0030
  • inputValidation.errorForeground#ffffff
  • inputValidation.infoBackground#de6a41
  • inputValidation.infoBorder#de6a41
  • inputValidation.infoForeground#ffffff
  • inputValidation.warningBackground#51573b
  • inputValidation.warningBorder#51573b
  • inputValidation.warningForeground#ffffff
  • interactive.activeCodeBorder#de6a41
  • interactive.inactiveCodeBorder#babab2
  • keybindingLabel.background#babab2
  • keybindingLabel.border#2424241a
  • keybindingLabel.bottomBorder#2424242a
  • keybindingLabel.foreground#242424
  • list.activeSelectionBackground#242424
  • list.activeSelectionForeground#d0d0c8
  • list.errorForeground#db0030
  • list.focusBackground#24242412
  • list.focusForeground#242424
  • list.highlightForeground#de6a41
  • list.hoverBackground#de6a4112
  • list.hoverForeground#242424
  • list.inactiveSelectionBackground#2424242a
  • list.inactiveSelectionForeground#242424
  • list.warningForeground#51573b
  • listFilterWidget.background#c5c5bd
  • listFilterWidget.noMatchesOutline#db0030
  • listFilterWidget.outline#de6a41
  • menu.background#d0d0c8
  • menu.foreground#242424
  • menu.selectionBackground#242424
  • menu.selectionForeground#d0d0c8
  • menu.separatorBackground#babab2
  • menubar.selectionBackground#24242415
  • menubar.selectionForeground#242424
  • merge.commonContentBackground#24242410
  • merge.commonHeaderBackground#24242420
  • merge.currentContentBackground#de6a4120
  • merge.currentHeaderBackground#de6a4140
  • merge.incomingContentBackground#7a846a20
  • merge.incomingHeaderBackground#7a846a40
  • minimap.background#c5c5bd
  • minimap.errorHighlight#db003060
  • minimap.findMatchHighlight#de6a4160
  • minimap.selectionHighlight#24242440
  • minimap.warningHighlight#51573b60
  • minimapGutter.addedBackground#7a846a
  • minimapGutter.deletedBackground#db0030
  • minimapGutter.modifiedBackground#de6a41
  • notebook.cellBorderColor#babab2
  • notebook.cellHoverBackground#c5c5bd
  • notebook.cellInsertionIndicator#de6a41
  • notebook.focusedCellBackground#c5c5bd
  • notebook.focusedCellBorder#de6a41
  • notebook.focusedEditorBorder#de6a41
  • notebook.outputContainerBackgroundColor#c5c5bd
  • notebook.outputContainerBorderColor#babab2
  • notebook.selectedCellBackground#24242412
  • notificationCenterHeader.background#242424
  • notificationCenterHeader.foreground#d0d0c8
  • notificationLink.foreground#de6a41
  • notifications.background#d0d0c8
  • notifications.border#babab2
  • notifications.foreground#242424
  • panel.background#d0d0c8
  • panel.border#babab2
  • panel.foreground#242424
  • panelInput.border#babab2
  • panelSection.border#babab2
  • panelSectionHeader.background#c5c5bd
  • panelSectionHeader.foreground#242424
  • panelTitle.activeForeground#de6a41
  • panelTitle.inactiveForeground#6b6b63
  • peekView.border#de6a41
  • peekViewEditor.background#c5c5bd
  • peekViewEditor.matchHighlightBackground#de6a4140
  • peekViewResult.background#babab2
  • peekViewResult.fileForeground#242424
  • peekViewResult.lineForeground#6b6b63
  • peekViewResult.matchHighlightBackground#de6a4140
  • peekViewResult.selectionBackground#2424242a
  • peekViewResult.selectionForeground#242424
  • peekViewTitle.background#babab2
  • peekViewTitleDescription.foreground#6b6b63
  • peekViewTitleLabel.foreground#242424
  • ports.iconRunningProcessForeground#de6a41
  • problemsErrorIcon.foreground#db0030
  • problemsInfoIcon.foreground#de6a41
  • problemsWarningIcon.foreground#51573b
  • progressBar.background#de6a41
  • sash.hoverBorder#de6a41
  • scrollbar.shadow#2424241a
  • scrollbarSlider.activeBackground#de6a4155
  • scrollbarSlider.background#2424242a
  • scrollbarSlider.hoverBackground#de6a4133
  • settings.checkboxBackground#babab2
  • settings.checkboxForeground#242424
  • settings.dropdownBackground#babab2
  • settings.dropdownBorder#2424241a
  • settings.dropdownForeground#242424
  • settings.headerForeground#242424
  • settings.modifiedItemIndicator#de6a41
  • settings.numberInputBackground#babab2
  • settings.numberInputForeground#242424
  • settings.textInputBackground#babab2
  • settings.textInputForeground#242424
  • sideBar.background#d0d0c8
  • sideBar.border#c5c5bd
  • sideBar.foreground#242424
  • sideBarSectionHeader.background#c5c5bd
  • sideBarSectionHeader.foreground#242424
  • sideBarStripe.foreground#de6a41
  • sideBarTitle.foreground#242424
  • simpleFindWidget.sashBorder#de6a41
  • snippetTabHighlightBackground#de6a4140
  • statusBar.background#242424
  • statusBar.border#00000000
  • statusBar.debuggingBackground#de6a41
  • statusBar.debuggingForeground#ffffff
  • statusBar.foreground#d0d0c8
  • statusBar.noFolderBackground#242424
  • statusBarItem.activeBackground#de6a4140
  • statusBarItem.errorBackground#db0030
  • statusBarItem.errorForeground#ffffff
  • statusBarItem.hoverBackground#de6a4120
  • statusBarItem.prominentBackground#de6a4140
  • statusBarItem.prominentHoverBackground#de6a4160
  • statusBarItem.remoteBackground#de6a41
  • statusBarItem.remoteForeground#ffffff
  • statusBarItem.warningBackground#51573b
  • statusBarItem.warningForeground#ffffff
  • symbolIcon.arrayForeground#de6a41
  • symbolIcon.booleanForeground#de6a41
  • symbolIcon.classForeground#e88b5f
  • symbolIcon.colorForeground#7a846a
  • symbolIcon.constantForeground#e88b5f
  • symbolIcon.constructorForeground#de6a41
  • symbolIcon.enumeratorForeground#e88b5f
  • symbolIcon.enumeratorMemberForeground#242424
  • symbolIcon.eventForeground#ef597a
  • symbolIcon.fieldForeground#242424
  • symbolIcon.fileForeground#de6a41
  • symbolIcon.folderForeground#de6a41
  • symbolIcon.functionForeground#de6a41
  • symbolIcon.interfaceForeground#e88b5f
  • symbolIcon.keyForeground#de6a41
  • symbolIcon.keywordForeground#242424
  • symbolIcon.methodForeground#de6a41
  • symbolIcon.moduleForeground#242424
  • symbolIcon.namespaceForeground#242424
  • symbolIcon.nullForeground#db0030
  • symbolIcon.numberForeground#e88b5f
  • symbolIcon.objectForeground#242424
  • symbolIcon.operatorForeground#6b6b63
  • symbolIcon.packageForeground#de6a41
  • symbolIcon.propertyForeground#242424
  • symbolIcon.referenceForeground#6b6b63
  • symbolIcon.snippetForeground#7a846a
  • symbolIcon.stringForeground#7a846a
  • symbolIcon.structForeground#e88b5f
  • symbolIcon.textForeground#242424
  • symbolIcon.typeParameterForeground#e88b5f
  • symbolIcon.unitForeground#6b6b63
  • symbolIcon.variableForeground#242424
  • tab.activeBackground#d0d0c8
  • tab.activeBorder#de6a41
  • tab.activeBorderTop#de6a41
  • tab.activeForeground#242424
  • tab.border#babab2
  • tab.hoverBackground#de6a4110
  • tab.hoverForeground#242424
  • tab.inactiveBackground#c5c5bd
  • tab.inactiveForeground#6b6b63
  • tab.lastPinnedBorder#babab2
  • tab.unfocusedActiveBorderTop#00000000
  • terminal.ansiBlack#242424
  • terminal.ansiBlue#de6a41
  • terminal.ansiBrightBlack#6b6b63
  • terminal.ansiBrightBlue#e88b5f
  • terminal.ansiBrightCyan#777b6f
  • terminal.ansiBrightGreen#7a846a
  • terminal.ansiBrightMagenta#a8a67b
  • terminal.ansiBrightRed#ef597a
  • terminal.ansiBrightWhite#242424
  • terminal.ansiBrightYellow#a2a87c
  • terminal.ansiCyan#363a34
  • terminal.ansiGreen#2e3125
  • terminal.ansiMagenta#43432b
  • terminal.ansiRed#db0030
  • terminal.ansiWhite#8d8d85
  • terminal.ansiYellow#51573b
  • terminal.background#d0d0c8
  • terminal.border#babab2
  • terminal.foreground#242424
  • terminal.selectionBackground#24242433
  • terminalCursor.background#d0d0c8
  • terminalCursor.foreground#242424
  • testing.iconErrored#ef597a
  • testing.iconFailed#db0030
  • testing.iconPassed#7a846a
  • testing.iconQueued#51573b
  • testing.iconSkipped#8d8d85
  • testing.iconUnset#6b6b63
  • testing.peekBorder#db0030
  • testing.runAction#7a846a
  • textBlockQuote.background#c5c5bd
  • textBlockQuote.border#de6a41
  • textCodeBlock.background#c5c5bd
  • textLink.activeForeground#e88b5f
  • textLink.foreground#de6a41
  • textPreformat.foreground#242424
  • textSeparator.foreground#babab2
  • titleBar.activeBackground#c5c5bd
  • titleBar.activeForeground#242424
  • titleBar.border#babab2
  • titleBar.inactiveBackground#babab2
  • titleBar.inactiveForeground#6b6b63
  • toolbar.activeBackground#de6a4125
  • toolbar.hoverBackground#de6a4115
  • tree.indentGuidesStroke#24242415
  • walkThrough.embeddedEditorBackground#c5c5bd
  • welcomePage.background#d0d0c8
  • welcomePage.progress.background#de6a41
  • welcomePage.tileBackground#c5c5bd
  • welcomePage.tileShadow#24242410
  • widget.border#babab2
  • widget.shadow#24242420

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#8d8d85italic
comment.block.documentation#8d8d85italic
comment.line.double-slash#8d8d85italic
constant#e88b5f
constant.character, constant.other#e88b5f
constant.language#242424
constant.numeric#e88b5f
entity.name#51573bbold
entity.name.function, entity.name.method#de6a41bold
entity.name.type#51573bbold
entity.name.type.class#51573bbold
entity.name.type.enum#51573bbold
entity.name.section#de6a41bold
entity.name.tag#6b6b63
entity.other.attribute-name#de6a41
entity.other.inherited-class#51573bitalic
invalid#db0030
invalid.deprecated#ef597a
keyword#242424
keyword.control#242424
keyword.operator#6b6b63
keyword.other.unit#e88b5f
markup.boldbold
markup.changed#ef597a
markup.deleted#db0030
markup.heading#de6a41bold
markup.inserted#7a846a
markup.italicitalic
markup.list#de6a41
markup.inline.raw, markup.raw#51573b
markup.quote#6b6b63italic
markup.underlineunderline
markup.underline.link#de6a41underline
meta.link#de6a41
meta.preprocessor#6b6b63
meta.tag#6b6b63
punctuation#6b6b63
punctuation.definition.tag#6b6b63
punctuation.separator, punctuation.terminator#6b6b63
storage#242424
storage.modifier#242424
storage.type#242424
string#7a846a
string.quoted#7a846a
string.regexp#a2a87c
string.unquoted#7a846a
string.other.link#de6a41underline
support#242424
support.function#de6a41
support.type#51573b
variable#242424
variable.language#242424italic
variable.other#242424
variable.other.property#242424
variable.other.constant#e88b5f
variable.parameter#242424italic
embedding#51573b
entity.name.function.decorator#43432b
variable.other.enummember#e88b5f
constant.character.escape#e88b5f
meta.object-literal.key#242424
entity.name.type.interface#51573bbold italic
variable.other.readwrite#242424
variable.other.object.property#242424
entity.name.tag.css#242424
entity.other.attribute-name.class.css#de6a41
entity.other.attribute-name.id.css#de6a41
entity.other.attribute-name.pseudo-class.css#43432b
entity.other.attribute-name.pseudo-element.css#43432b
support.type.property-name.css#242424
support.constant.property-value.css#7a846a
support.function.var.css#de6a41
keyword.unit.css#e88b5f
source.sass variable#242424
entity.name.tag.scss#242424
meta.property-value.scss variable#242424
source.ts keyword.operator#242424
source.ts keyword.control#242424
source.ts keyword.type#242424
source.ts storage.type#242424
meta.type.annotation.ts variable#242424
meta.type.annotation.ts type#242424
source.ts entity.name.type#242424bold
source.ts variable.other.constant#e88b5f
meta.arrow.ts variable#242424
source.tsx entity.name.tag#242424
source.tsx meta.tag variable#de6a41
source.python entity.name.function#de6a41
source.python keyword.control#242424
source.python storage.type#242424
source.python variable.parameter#242424italic
source.go keyword#242424
source.go entity.name.type#242424bold
source.go entity.name.function#de6a41
source.java keyword#242424
source.java storage.type#242424
source.java entity.name.type#242424bold
source.java entity.name.function#de6a41
source.rust keyword#242424
source.rust storage.type#242424
source.rust entity.name.type#242424bold
source.rust entity.name.function#de6a41
source.rust variable.language#242424italic
source.rust lifecycle#43432bitalic
source.rust macro#de6a41
source.c keyword#242424
source.c storage.type#242424
source.cpp keyword#242424
source.cpp storage.type#242424
source.yaml entity.name.tag#242424
source.yaml string#7a846a
source.yaml constant#e88b5f
source.toml entity.name.tag#242424
source.json string#7a846a
source.json support.type#e88b5f
source.json constant#e88b5f
text.html.markdown#242424
text.html.markdown markup.inline.raw#51573b
text.html.markdown meta.directive.name#de6a41
text.html.markdown meta.link#de6a41
text.html.markdown string.other.link#de6a41
text.html.markdown markup.list#de6a41
text.html.markdown markup.quote#6b6b63italic
text.html.markdown markup.raw#51573b
text.html.derivative entity.name.tag#242424
text.html.derivative entity.other.attribute-name#de6a41
diff#242424
diff.header#de6a41
diff.inserted#7a846a
diff.deleted#db0030
diff.changed#e88b5f
log.error#db0030bold
log.warning#51573bbold
log.info#242424
log.verbose#6b6b63
marker#242424