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#111111
  • activityBar.border#00000000
  • activityBar.foreground#d0d0c8
  • activityBar.inactiveForeground#555555
  • activityBarBadge.background#de6a41
  • activityBarBadge.foreground#ffffff
  • badge.background#de6a41
  • badge.foreground#ffffff
  • breadcrumb.activeSelectionForeground#d0d0c8
  • breadcrumb.focusForeground#d0d0c8
  • breadcrumb.foreground#888888
  • breadcrumbPicker.background#161616
  • button.background#de6a41
  • button.foreground#ffffff
  • button.hoverBackground#d55a30
  • button.secondaryBackground#3a3a3a
  • button.secondaryForeground#d0d0c8
  • button.secondaryHoverBackground#4a4a4a
  • charts.blue#de6a41
  • charts.foreground#d0d0c8
  • charts.green#7a846a
  • charts.lines#d0d0c840
  • charts.orange#e88b5f
  • charts.purple#a8a67b
  • charts.red#ef597a
  • charts.yellow#a2a87c
  • chat.requestBackground#161616
  • chat.requestBorder#2a2a2a
  • chat.slashCommandBackground#d0d0c815
  • chat.slashCommandForeground#de6a41
  • commandCenter.activeBackground#d0d0c815
  • commandCenter.background#161616
  • commandCenter.border#2a2a2a
  • commandCenter.foreground#d0d0c8
  • commentsView.resolvedIcon#7a846a
  • commentsView.unresolvedIcon#de6a41
  • debugExceptionWidget.background#ef597a20
  • debugExceptionWidget.border#ef597a
  • debugIcon.continueForeground#7a846a
  • debugIcon.disconnectForeground#ef597a
  • debugIcon.pauseForeground#de6a41
  • debugIcon.startForeground#7a846a
  • debugIcon.stepIntoForeground#d0d0c8
  • debugIcon.stepOutForeground#d0d0c8
  • debugIcon.stepOverForeground#d0d0c8
  • debugIcon.stopForeground#ef597a
  • debugToolBar.background#111111
  • debugToolBar.border#2a2a2a
  • debugToolBar.foreground#d0d0c8
  • descriptionForeground#888888
  • dropdown.background#2a2a2a
  • dropdown.border#3a3a3a
  • dropdown.foreground#d0d0c8
  • dropdown.listBackground#2a2a2a
  • editor.background#1c1c1c
  • editor.findMatchBackground#de6a4160
  • editor.findMatchHighlightBackground#de6a4120
  • editor.findRangeHighlightBackground#de6a4110
  • editor.foreground#d0d0c8
  • editor.hoverHighlightBackground#de6a4110
  • editor.lineHighlightBackground#d0d0c806
  • editor.lineHighlightBorder#00000000
  • editor.rangeHighlightBackground#d0d0c810
  • editor.selectionBackground#de6a4133
  • editor.selectionHighlightBackground#de6a4120
  • editor.wordHighlightBackground#de6a4115
  • editor.wordHighlightStrongBackground#de6a4130
  • editorBracketMatch.background#de6a4130
  • editorBracketMatch.border#de6a41
  • editorCursor.foreground#de6a41
  • editorError.foreground#ef597a
  • editorGutter.addedBackground#7a846a50
  • editorGutter.background#1c1c1c
  • editorGutter.deletedBackground#ef597a50
  • editorGutter.foldingControlForeground#888888
  • editorGutter.modifiedBackground#de6a4150
  • editorHoverWidget.background#161616
  • editorHoverWidget.border#2a2a2a
  • editorHoverWidget.foreground#d0d0c8
  • editorHoverWidget.statusBarBackground#111111
  • editorIndentGuide.activeBackground#d0d0c825
  • editorIndentGuide.background#d0d0c810
  • editorInfo.foreground#de6a41
  • editorLineNumber.activeForeground#d0d0c8
  • editorLineNumber.foreground#555555
  • editorOverviewRuler.border#d0d0c80a
  • editorOverviewRuler.commonContentForeground#888888
  • editorOverviewRuler.currentContentForeground#de6a41
  • editorOverviewRuler.incomingContentForeground#7a846a
  • editorRuler.foreground#d0d0c815
  • editorStickyScroll.background#161616
  • editorStickyScrollHover.background#de6a4110
  • editorSuggestWidget.background#161616
  • editorSuggestWidget.border#2a2a2a
  • editorSuggestWidget.foreground#d0d0c8
  • editorSuggestWidget.highlightForeground#de6a41
  • editorSuggestWidget.selectedBackground#de6a41
  • editorSuggestWidget.selectedForeground#ffffff
  • editorWarning.foreground#a2a87c
  • editorWhitespace.foreground#d0d0c815
  • editorWidget.background#161616
  • editorWidget.border#2a2a2a
  • editorWidget.resizeBorder#de6a41
  • errorForeground#ef597a
  • extensionBadge.remoteBackground#de6a41
  • extensionBadge.remoteForeground#ffffff
  • extensionButton.prominentBackground#de6a41
  • extensionButton.prominentForeground#ffffff
  • extensionButton.prominentHoverBackground#d55a30
  • focusBorder#de6a41
  • foreground#d0d0c8
  • gitDecoration.addedResourceForeground#7a846a
  • gitDecoration.conflictingResourceForeground#ef597a
  • gitDecoration.deletedResourceForeground#ef597a
  • gitDecoration.ignoredResourceForeground#555555
  • gitDecoration.modifiedResourceForeground#de6a41
  • gitDecoration.stageDeletedResourceForeground#ef597a
  • gitDecoration.stageModifiedResourceForeground#e88b5f
  • gitDecoration.submoduleResourceForeground#777b6f
  • gitDecoration.untrackedResourceForeground#7a846a
  • icon.foreground#888888
  • inlineChat.background#161616
  • inlineChat.border#de6a41
  • inlineChat.foreground#d0d0c8
  • inlineChat.inputBackground#2a2a2a
  • inlineChat.inputBorder#00000000
  • input.background#2a2a2a
  • input.border#00000000
  • input.foreground#d0d0c8
  • input.placeholderForeground#555555
  • 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#2a2a2a
  • keybindingLabel.background#2a2a2a
  • keybindingLabel.border#3a3a3a
  • keybindingLabel.bottomBorder#4a4a4a
  • keybindingLabel.foreground#d0d0c8
  • list.activeSelectionBackground#de6a41
  • list.activeSelectionForeground#ffffff
  • list.errorForeground#ef597a
  • list.focusBackground#de6a4120
  • list.focusForeground#d0d0c8
  • list.highlightForeground#de6a41
  • list.hoverBackground#d0d0c810
  • list.hoverForeground#d0d0c8
  • list.inactiveSelectionBackground#de6a4130
  • list.inactiveSelectionForeground#d0d0c8
  • list.warningForeground#a2a87c
  • listFilterWidget.background#161616
  • listFilterWidget.noMatchesOutline#ef597a
  • listFilterWidget.outline#de6a41
  • menu.background#1c1c1c
  • menu.foreground#d0d0c8
  • menu.selectionBackground#de6a41
  • menu.selectionForeground#ffffff
  • menu.separatorBackground#2a2a2a
  • menubar.selectionBackground#d0d0c815
  • menubar.selectionForeground#d0d0c8
  • merge.commonContentBackground#d0d0c810
  • merge.commonHeaderBackground#d0d0c820
  • merge.currentContentBackground#de6a4120
  • merge.currentHeaderBackground#de6a4140
  • merge.incomingContentBackground#7a846a20
  • merge.incomingHeaderBackground#7a846a40
  • minimap.background#161616
  • minimap.errorHighlight#ef597a50
  • minimap.findMatchHighlight#de6a4150
  • minimap.selectionHighlight#de6a4130
  • minimap.warningHighlight#a2a87c50
  • minimapGutter.addedBackground#7a846a
  • minimapGutter.deletedBackground#ef597a
  • minimapGutter.modifiedBackground#de6a41
  • notebook.cellBorderColor#2a2a2a
  • notebook.cellHoverBackground#161616
  • notebook.cellInsertionIndicator#de6a41
  • notebook.focusedCellBackground#161616
  • notebook.focusedCellBorder#de6a41
  • notebook.focusedEditorBorder#de6a41
  • notebook.outputContainerBackgroundColor#161616
  • notebook.outputContainerBorderColor#2a2a2a
  • notebook.selectedCellBackground#d0d0c810
  • notificationCenterHeader.background#111111
  • notificationCenterHeader.foreground#d0d0c8
  • notificationLink.foreground#de6a41
  • notifications.background#1c1c1c
  • notifications.border#2a2a2a
  • notifications.foreground#d0d0c8
  • panel.background#1c1c1c
  • panel.border#2a2a2a
  • panel.foreground#d0d0c8
  • panelInput.border#2a2a2a
  • panelSection.border#2a2a2a
  • panelSectionHeader.background#161616
  • panelSectionHeader.foreground#d0d0c8
  • panelTitle.activeForeground#de6a41
  • panelTitle.inactiveForeground#555555
  • peekView.border#de6a41
  • peekViewEditor.background#161616
  • peekViewEditor.matchHighlightBackground#de6a4140
  • peekViewResult.background#161616
  • peekViewResult.fileForeground#d0d0c8
  • peekViewResult.lineForeground#888888
  • peekViewResult.matchHighlightBackground#de6a4140
  • peekViewResult.selectionBackground#de6a4130
  • peekViewResult.selectionForeground#ffffff
  • peekViewTitle.background#161616
  • peekViewTitleDescription.foreground#888888
  • peekViewTitleLabel.foreground#d0d0c8
  • ports.iconRunningProcessForeground#de6a41
  • problemsErrorIcon.foreground#ef597a
  • problemsInfoIcon.foreground#de6a41
  • problemsWarningIcon.foreground#a2a87c
  • progressBar.background#de6a41
  • sash.hoverBorder#de6a41
  • scrollbar.shadow#00000030
  • scrollbarSlider.activeBackground#de6a4150
  • scrollbarSlider.background#d0d0c820
  • scrollbarSlider.hoverBackground#de6a4130
  • settings.checkboxBackground#2a2a2a
  • settings.checkboxForeground#d0d0c8
  • settings.dropdownBackground#2a2a2a
  • settings.dropdownBorder#3a3a3a
  • settings.dropdownForeground#d0d0c8
  • settings.headerForeground#d0d0c8
  • settings.modifiedItemIndicator#de6a41
  • settings.numberInputBackground#2a2a2a
  • settings.numberInputForeground#d0d0c8
  • settings.textInputBackground#2a2a2a
  • settings.textInputForeground#d0d0c8
  • sideBar.background#161616
  • sideBar.border#2a2a2a
  • sideBar.foreground#d0d0c8
  • sideBarSectionHeader.background#2a2a2a
  • sideBarSectionHeader.foreground#d0d0c8
  • sideBarStripe.foreground#de6a41
  • sideBarTitle.foreground#d0d0c8
  • simpleFindWidget.sashBorder#de6a41
  • snippetTabHighlightBackground#de6a4140
  • statusBar.background#111111
  • statusBar.border#00000000
  • statusBar.debuggingBackground#de6a41
  • statusBar.debuggingForeground#ffffff
  • statusBar.foreground#d0d0c8
  • statusBar.noFolderBackground#111111
  • statusBarItem.activeBackground#de6a4130
  • statusBarItem.errorBackground#db0030
  • statusBarItem.errorForeground#ffffff
  • statusBarItem.hoverBackground#de6a4115
  • statusBarItem.prominentBackground#de6a4130
  • statusBarItem.prominentHoverBackground#de6a4150
  • 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#d0d0c8
  • symbolIcon.eventForeground#ef597a
  • symbolIcon.fieldForeground#d0d0c8
  • symbolIcon.fileForeground#de6a41
  • symbolIcon.folderForeground#de6a41
  • symbolIcon.functionForeground#de6a41
  • symbolIcon.interfaceForeground#e88b5f
  • symbolIcon.keyForeground#de6a41
  • symbolIcon.keywordForeground#d0d0c8
  • symbolIcon.methodForeground#de6a41
  • symbolIcon.moduleForeground#d0d0c8
  • symbolIcon.namespaceForeground#d0d0c8
  • symbolIcon.nullForeground#ef597a
  • symbolIcon.numberForeground#e88b5f
  • symbolIcon.objectForeground#d0d0c8
  • symbolIcon.operatorForeground#888888
  • symbolIcon.packageForeground#de6a41
  • symbolIcon.propertyForeground#d0d0c8
  • symbolIcon.referenceForeground#888888
  • symbolIcon.snippetForeground#7a846a
  • symbolIcon.stringForeground#7a846a
  • symbolIcon.structForeground#e88b5f
  • symbolIcon.textForeground#d0d0c8
  • symbolIcon.typeParameterForeground#e88b5f
  • symbolIcon.unitForeground#888888
  • symbolIcon.variableForeground#d0d0c8
  • tab.activeBackground#1c1c1c
  • tab.activeBorder#de6a41
  • tab.activeBorderTop#de6a41
  • tab.activeForeground#d0d0c8
  • tab.border#2a2a2a
  • tab.hoverBackground#de6a4110
  • tab.hoverForeground#d0d0c8
  • tab.inactiveBackground#161616
  • tab.inactiveForeground#555555
  • tab.lastPinnedBorder#2a2a2a
  • tab.unfocusedActiveBorderTop#00000000
  • terminal.ansiBlack#d0d0c8
  • terminal.ansiBlue#de6a41
  • terminal.ansiBrightBlack#888888
  • terminal.ansiBrightBlue#e88b5f
  • terminal.ansiBrightCyan#878b7f
  • terminal.ansiBrightGreen#8a947a
  • terminal.ansiBrightMagenta#b8b68b
  • terminal.ansiBrightRed#ff7090
  • terminal.ansiBrightWhite#d0d0c8
  • terminal.ansiBrightYellow#b2b88c
  • terminal.ansiCyan#777b6f
  • terminal.ansiGreen#7a846a
  • terminal.ansiMagenta#a8a67b
  • terminal.ansiRed#ef597a
  • terminal.ansiWhite#555555
  • terminal.ansiYellow#a2a87c
  • terminal.background#111111
  • terminal.border#2a2a2a
  • terminal.foreground#d0d0c8
  • terminal.selectionBackground#de6a4133
  • terminalCursor.background#1c1c1c
  • terminalCursor.foreground#de6a41
  • testing.iconErrored#ef597a
  • testing.iconFailed#ef597a
  • testing.iconPassed#7a846a
  • testing.iconQueued#a2a87c
  • testing.iconSkipped#555555
  • testing.iconUnset#888888
  • testing.peekBorder#ef597a
  • testing.runAction#7a846a
  • textBlockQuote.background#161616
  • textBlockQuote.border#de6a41
  • textCodeBlock.background#161616
  • textLink.activeForeground#e88b5f
  • textLink.foreground#de6a41
  • textPreformat.foreground#d0d0c8
  • textSeparator.foreground#2a2a2a
  • titleBar.activeBackground#161616
  • titleBar.activeForeground#d0d0c8
  • titleBar.border#2a2a2a
  • titleBar.inactiveBackground#111111
  • titleBar.inactiveForeground#555555
  • toolbar.activeBackground#de6a4125
  • toolbar.hoverBackground#de6a4115
  • tree.indentGuidesStroke#d0d0c815
  • walkThrough.embeddedEditorBackground#161616
  • welcomePage.background#1c1c1c
  • welcomePage.progress.background#de6a41
  • welcomePage.tileBackground#161616
  • welcomePage.tileShadow#00000030
  • widget.border#2a2a2a
  • widget.shadow#00000040

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#555555italic
comment.block.documentation#555555italic
comment.line.double-slash#555555italic
constant#e88b5f
constant.character#e88b5f
constant.language#d0d0c8
constant.numeric#e88b5f
entity.name#a2a87cbold
entity.name.function#de6a41bold
entity.name.method#de6a41bold
entity.name.type#a2a87cbold
entity.name.type.class#a2a87cbold
entity.name.type.enum#a2a87cbold
entity.name.section#de6a41bold
entity.name.tag#777b6f
entity.other.attribute-name#de6a41
entity.other.inherited-class#a2a87citalic
invalid#ef597a
invalid.deprecated#ff7090
keyword#d0d0c8
keyword.control#d0d0c8
keyword.operator#888888
keyword.other.unit#e88b5f
markup.boldbold
markup.changed#ff7090
markup.deleted#ef597a
markup.heading#de6a41bold
markup.inserted#7a846a
markup.italicitalic
markup.list#de6a41
markup.inline.raw, markup.raw#a2a87c
markup.quote#888888italic
markup.underlineunderline
markup.underline.link#de6a41underline
meta.link#de6a41
meta.preprocessor#888888
meta.tag#888888
punctuation#888888
punctuation.definition.tag#888888
punctuation.separator, punctuation.terminator#888888
storage#d0d0c8
storage.modifier#d0d0c8
storage.type#d0d0c8
string#7a846a
string.quoted#7a846a
string.regexp#a2a87c
string.unquoted#7a846a
string.other.link#de6a41underline
support#d0d0c8
support.function#de6a41
support.type#a2a87c
variable#d0d0c8
variable.language#d0d0c8italic
variable.other#d0d0c8
variable.other.property#d0d0c8
variable.other.constant#e88b5f
variable.parameter#d0d0c8italic
embedding#a2a87c
entity.name.function.decorator#a8a67b
variable.other.enummember#e88b5f
constant.character.escape#e88b5f
meta.object-literal.key#d0d0c8
entity.name.type.interface#a2a87cbold italic
variable.other.readwrite#d0d0c8
variable.other.object.property#d0d0c8
entity.name.tag.css#d0d0c8
entity.other.attribute-name.class.css#de6a41
entity.other.attribute-name.id.css#de6a41
entity.other.attribute-name.pseudo-class.css#a8a67b
entity.other.attribute-name.pseudo-element.css#a8a67b
support.type.property-name.css#d0d0c8
support.constant.property-value.css#7a846a
support.function.var.css#de6a41
keyword.unit.css#e88b5f
source.sass variable#d0d0c8
entity.name.tag.scss#d0d0c8
meta.property-value.scss variable#d0d0c8
source.ts keyword.operator#d0d0c8
source.ts keyword.control#d0d0c8
source.ts keyword.type#d0d0c8
source.ts storage.type#d0d0c8
meta.type.annotation.ts variable#d0d0c8
meta.type.annotation.ts type#d0d0c8
source.ts entity.name.type#d0d0c8bold
source.ts variable.other.constant#e88b5f
meta.arrow.ts variable#d0d0c8
source.tsx entity.name.tag#d0d0c8
source.tsx meta.tag variable#de6a41
source.python entity.name.function#de6a41
source.python keyword.control#d0d0c8
source.python storage.type#d0d0c8
source.python variable.parameter#d0d0c8italic
source.go keyword#d0d0c8
source.go entity.name.type#d0d0c8bold
source.go entity.name.function#de6a41
source.java keyword#d0d0c8
source.java storage.type#d0d0c8
source.java entity.name.type#d0d0c8bold
source.java entity.name.function#de6a41
source.rust keyword#d0d0c8
source.rust storage.type#d0d0c8
source.rust entity.name.type#d0d0c8bold
source.rust entity.name.function#de6a41
source.rust variable.language#d0d0c8italic
source.rust lifecycle#a8a67bitalic
source.rust macro#de6a41
source.c keyword#d0d0c8
source.c storage.type#d0d0c8
source.cpp keyword#d0d0c8
source.cpp storage.type#d0d0c8
source.yaml entity.name.tag#d0d0c8
source.yaml string#7a846a
source.yaml constant#e88b5f
source.toml entity.name.tag#d0d0c8
source.json string#7a846a
source.json support.type#e88b5f
source.json constant#e88b5f
text.html.markdown#d0d0c8
text.html.markdown markup.inline.raw#a2a87c
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#888888italic
text.html.markdown markup.raw#a2a87c
text.html.derivative entity.name.tag#d0d0c8
text.html.derivative entity.other.attribute-name#de6a41
diff#d0d0c8
diff.header#de6a41
diff.inserted#7a846a
diff.deleted#ef597a
diff.changed#e88b5f
log.error#ef597abold
log.warning#a2a87cbold
log.info#d0d0c8
log.verbose#888888
marker#d0d0c8
TheGreek by hyushie - VS Code Theme