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#00000000
  • activityBar.activeBorder#00000000
  • activityBar.activeFocusBorder#00000000
  • activityBar.background#1D2021
  • activityBar.foreground#DDC7A1
  • activityBar.inactiveForeground#DDC7A160
  • activityBarBadge.background#D8A657
  • activityBarBadge.foreground#141617
  • badge.background#D8A657
  • badge.foreground#141617
  • breadcrumb.activeSelectionForeground#DDC7A1
  • breadcrumb.background#1D2021
  • breadcrumb.focusForeground#DDC7A1E0
  • breadcrumb.foreground#DDC7A1C0
  • breadcrumbPicker.background#141617
  • button.background#D8A657E0
  • button.border#D8A65780
  • button.foreground#141617
  • button.hoverBackground#D8A657
  • button.secondaryBackground#141617
  • button.secondaryBorder#D8A65780
  • button.secondaryForeground#DDC7A1
  • button.secondaryHoverBackground#1D2021
  • button.separator#00000000
  • charts.blue#7DAEA3
  • charts.foreground#DDC7A1
  • charts.green#A9B665
  • charts.orange#E78A4E
  • charts.purple#D3869B
  • charts.red#EA6962
  • charts.yellow#D8A657
  • checkbox.background#141617
  • checkbox.border#DDC7A180
  • checkbox.foreground#D8A657
  • debugConsole.errorForeground#EA6962
  • debugConsole.infoForeground#7DAEA3
  • debugConsole.sourceForeground#DDC7A1
  • debugConsole.warningForeground#D8A657
  • debugIcon.breakpointDisabledForeground#DDC7A1
  • debugIcon.breakpointForeground#D8A657
  • debugIcon.breakpointUnverifiedForeground#EA6962
  • debugIcon.continueForeground#7DAEA3
  • debugIcon.disconnectForeground#D3869B
  • debugIcon.pauseForeground#7DAEA3
  • debugIcon.restartForeground#89B482
  • debugIcon.startForeground#A9B665
  • debugIcon.stepBackForeground#7DAEA3
  • debugIcon.stepIntoForeground#7DAEA3
  • debugIcon.stepOutForeground#7DAEA3
  • debugIcon.stepOverForeground#7DAEA3
  • debugIcon.stopForeground#EA6962
  • debugTokenExpression.boolean#DDC7A1
  • debugTokenExpression.error#EA6962
  • debugTokenExpression.name#DDC7A1
  • debugTokenExpression.number#D3869B
  • debugTokenExpression.string#A9B665
  • debugTokenExpression.type#89B482
  • debugTokenExpression.value#DDC7A1
  • descriptionForeground#DDC7A1E0
  • diffEditor.diagonalFill#DDC7A180
  • diffEditor.insertedLineBackground#A9B66520
  • diffEditor.insertedTextBackground#A9B66520
  • diffEditor.removedLineBackground#EA696220
  • diffEditor.removedTextBackground#EA696220
  • dropdown.background#141617
  • dropdown.border#D8A65780
  • dropdown.foreground#DDC7A1
  • editor.background#1D2021
  • editor.findMatchBackground#DDC7A160
  • editor.findMatchHighlightBackground#DDC7A120
  • editor.findRangeHighlightBackground#D8A65710
  • editor.foreground#DDC7A1
  • editor.hoverHighlightBackground#DDC7A120
  • editor.inactiveLineHighlightBackground#DDC7A108
  • editor.inactiveSelectionBackground#DDC7A10A
  • editor.lineHighlightBackground#DDC7A10A
  • editor.rangeHighlightBackground#D8A65710
  • editor.selectionBackground#DDC7A120
  • editor.selectionHighlightBackground#DDC7A10C
  • editor.stackFrameHighlightBackground#D8A65710
  • editor.wordHighlightBackground#DDC7A10C
  • editor.wordHighlightStrongBackground#DDC7A120
  • editorBracketHighlight.foreground1#D8A657
  • editorBracketHighlight.foreground2#A9B665
  • editorBracketHighlight.foreground3#89B482
  • editorBracketHighlight.foreground4#7DAEA3
  • editorBracketHighlight.foreground5#D3869B
  • editorBracketHighlight.foreground6#7DAEA3
  • editorBracketHighlight.unexpectedBracket.foreground#EA6962
  • editorBracketMatch.background#DDC7A160
  • editorBracketMatch.border#00000000
  • editorBracketPairGuide.activeBackground1#D8A657
  • editorBracketPairGuide.activeBackground2#A9B665
  • editorBracketPairGuide.activeBackground3#89B482
  • editorBracketPairGuide.activeBackground4#7DAEA3
  • editorBracketPairGuide.activeBackground5#D3869B
  • editorBracketPairGuide.activeBackground6#7DAEA3
  • editorCursor.foreground#7DAEA3
  • editorError.background#00000000
  • editorError.foreground#EA6962
  • editorGroup.border#DDC7A10C
  • editorGroup.dropBackground#D8A65710
  • editorGroup.focusedEmptyBorder#DDC7A10C
  • editorGroupHeader.border#1D2021
  • editorGroupHeader.noTabsBackground#141617
  • editorGroupHeader.tabsBackground#141617
  • editorGroupHeader.tabsBorder#1D2021
  • editorGutter.addedBackground#A9B665C0
  • editorGutter.addedSecondaryBackground#A9B665C0
  • editorGutter.background#1D2021
  • editorGutter.deletedBackground#EA6962C0
  • editorGutter.deletedSecondaryBackground#EA6962C0
  • editorGutter.modifiedBackground#7DAEA3C0
  • editorGutter.modifiedSecondaryBackground#7DAEA3C0
  • editorHint.foreground#A9B665
  • editorHoverWidget.background#141617
  • editorHoverWidget.border#D8A65780
  • editorHoverWidget.foreground#DDC7A1
  • editorInfo.background#00000000
  • editorInfo.foreground#7DAEA3
  • editorInlayHint.background#00000000
  • editorInlayHint.foreground#DDC7A160
  • editorInlayHint.parameterBackground#00000000
  • editorInlayHint.parameterForeground#DDC7A160
  • editorInlayHint.typeBackground#00000000
  • editorInlayHint.typeForeground#DDC7A160
  • editorLightBulb.foreground#D8A657
  • editorLineNumber.activeForeground#DDC7A1C0
  • editorLineNumber.foreground#DDC7A140
  • editorLink.activeForeground#D8A657
  • editorRuler.foreground#DDC7A10C
  • editorStickyScroll.shadow#14161780
  • editorSuggestWidget.background#141617
  • editorSuggestWidget.border#D8A65780
  • editorSuggestWidget.foreground#DDC7A1
  • editorWarning.background#00000000
  • editorWarning.foreground#D8A657
  • editorWhitespace.foreground#DDC7A120
  • editorWidget.background#141617
  • editorWidget.border#D8A65780
  • editorWidget.foreground#DDC7A1
  • extensionBadge.remoteBackground#DDC7A1
  • extensionBadge.remoteForeground#141617
  • extensionIcon.preReleaseForeground#D8A657
  • extensionIcon.privateForeground#D8A657
  • extensionIcon.starForeground#D8A657
  • extensionIcon.verifiedForeground#D8A657
  • focusBorder#D8A657
  • foreground#DDC7A1E0
  • gitDecoration.addedResourceForeground#A9B665
  • gitDecoration.conflictingResourceForeground#D3869B
  • gitDecoration.deletedResourceForeground#EA6962
  • gitDecoration.ignoredResourceForeground#DDC7A160
  • gitDecoration.modifiedResourceForeground#7DAEA3
  • gitDecoration.renamedResourceForeground#89B482
  • gitDecoration.stageDeletedResourceForeground#EA6962
  • gitDecoration.stageModifiedResourceForeground#7DAEA3
  • gitDecoration.submoduleResourceForeground#DDC7A1
  • gitDecoration.untrackedResourceForeground#A9B665
  • icon.foreground#DDC7A1E0
  • input.background#00000000
  • input.border#DDC7A180
  • input.foreground#DDC7A1
  • input.placeholderForeground#DDC7A180
  • inputOption.activeBackground#D8A657
  • inputOption.activeBorder#00000000
  • inputOption.activeForeground#141617
  • inputOption.hoverBackground#D8A65740
  • inputValidation.errorBackground#00000000
  • inputValidation.errorBorder#00000000
  • inputValidation.errorForeground#7DAEA3
  • inputValidation.infoBackground#00000000
  • inputValidation.infoBorder#00000000
  • inputValidation.infoForeground#7DAEA3
  • inputValidation.warningBackground#00000000
  • inputValidation.warningBorder#00000000
  • inputValidation.warningForeground#D8A657
  • keybindingLabel.foreground#DDC7A1
  • keybindingTable.headerBackground#141617
  • keybindingTable.rowsBackground#141617
  • list.activeSelectionBackground#1D2021
  • list.activeSelectionForeground#DDC7A1
  • list.dropBackground#D8A65710
  • list.errorForeground#EA6962
  • list.focusAndSelectionOutline#D8A65780
  • list.focusBackground#1D2021
  • list.focusForeground#DDC7A1
  • list.focusOutline#00000000
  • list.highlightForeground#D8A657
  • list.hoverBackground#D8A65710
  • list.hoverForeground#DDC7A1
  • list.inactiveFocusBackground#1D2021A0
  • list.inactiveFocusOutline#DDC7A120
  • list.inactiveSelectionBackground#D8A65710
  • list.inactiveSelectionForeground#DDC7A1
  • list.invalidItemForeground#EA6962
  • list.warningForeground#D8A657
  • minimap.errorHighlight#EA6962C0
  • minimap.findMatchHighlight#DDC7A1E0
  • minimap.infoHighlight#7DAEA3C0
  • minimap.selectionHighlight#DDC7A140
  • minimap.warningHighlight#D8A657C0
  • minimapGutter.addedBackground#A9B665E0
  • minimapGutter.deletedBackground#EA6962E0
  • minimapGutter.modifiedBackground#7DAEA3E0
  • notificationCenterHeader.background#141617
  • notificationCenterHeader.foreground#DDC7A1
  • notifications.background#1D2021
  • notifications.border#D8A65780
  • notifications.foreground#DDC7A1
  • panel.background#141617
  • panel.border#00000000
  • panelTitle.activeBorder#00000000
  • panelTitle.activeForeground#DDC7A1
  • panelTitle.inactiveForeground#DDC7A1A0
  • peekView.border#D8A65780
  • peekViewEditor.background#141617
  • peekViewEditor.matchHighlightBackground#DDC7A140
  • peekViewEditorGutter.background#141617
  • peekViewResult.background#141617
  • peekViewResult.fileForeground#DDC7A1
  • peekViewResult.lineForeground#DDC7A1C0
  • peekViewResult.matchHighlightBackground#00000000
  • peekViewResult.selectionBackground#00000000
  • peekViewResult.selectionForeground#DDC7A1
  • peekViewTitle.background#141617
  • peekViewTitleDescription.foreground#DDC7A1
  • peekViewTitleLabel.foreground#DDC7A1
  • problemsErrorIcon.foreground#EA6962
  • problemsInfoIcon.foreground#7DAEA3
  • problemsWarningIcon.foreground#D8A657
  • progressBar.background#D8A657
  • sash.hoverBorder#DDC7A108
  • scrollbar.background#00000000
  • scrollbar.shadow#141617A0
  • scrollbarSlider.activeBackground#D8A65760
  • scrollbarSlider.background#DDC7A140
  • scrollbarSlider.hoverBackground#D8A65740
  • selection.background#DDC7A140
  • settings.dropdownBackground#141617
  • settings.dropdownBorder#DDC7A180
  • settings.modifiedItemIndicator#7DAEA3
  • settings.numberInputBackground#141617
  • settings.numberInputBorder#DDC7A180
  • settings.rowHoverBackground#DDC7A108
  • settings.textInputBorder#DDC7A180
  • settings.textInputForeground#A9B665
  • sideBar.background#141617
  • sideBar.border#00000000
  • sideBar.foreground#DDC7A1C0
  • sideBarSectionHeader.background#00000000
  • sideBarSectionHeader.foreground#DDC7A1E0
  • sideBarTitle.foreground#DDC7A1
  • statusBar.background#141617
  • statusBar.border#00000000
  • statusBar.debuggingBackground#141617
  • statusBar.foreground#DDC7A1C0
  • statusBar.noFolderBackground#141617
  • statusBarItem.activeBackground#141617
  • statusBarItem.hoverBackground#141617
  • statusBarItem.hoverForeground#DDC7A1
  • statusBarItem.remoteBackground#DDC7A1
  • statusBarItem.remoteForeground#141617
  • statusBarItem.remoteHoverBackground#DDC7A1
  • statusBarItem.remoteHoverForeground#141617
  • symbolIcon.classForeground#7DAEA3
  • symbolIcon.enumeratorForeground#7DAEA3
  • symbolIcon.enumeratorMemberForeground#DDC7A1
  • symbolIcon.eventForeground#89B482
  • symbolIcon.functionForeground#A9B665
  • symbolIcon.interfaceForeground#7DAEA3
  • symbolIcon.keywordForeground#EA6962
  • symbolIcon.methodForeground#A9B665
  • symbolIcon.namespaceForeground#89B482
  • symbolIcon.numberForeground#DDC7A1
  • symbolIcon.operatorForeground#E78A4E
  • symbolIcon.propertyForeground#DDC7A1
  • symbolIcon.stringForeground#D8A657
  • symbolIcon.structForeground#7DAEA3
  • symbolIcon.textForeground#DDC7A1
  • symbolIcon.typeParameterForeground#E78A4E
  • symbolIcon.variableForeground#DDC7A1
  • tab.activeBackground#1D2021
  • tab.activeForeground#DDC7A1
  • tab.border#00000000
  • tab.hoverBackground#141617
  • tab.hoverForeground#DDC7A1
  • tab.inactiveBackground#141617
  • tab.inactiveForeground#DDC7A1A0
  • tab.unfocusedActiveBackground#1D2021
  • tab.unfocusedActiveForeground#DDC7A180
  • tab.unfocusedHoverBackground#141617
  • tab.unfocusedHoverForeground#DDC7A1
  • tab.unfocusedInactiveForeground#DDC7A180
  • terminal.ansiBlack#141617
  • terminal.ansiBlue#7DAEA3
  • terminal.ansiBrightBlack#928374
  • terminal.ansiBrightBlue#8CB0A8
  • terminal.ansiBrightCyan#98B593
  • terminal.ansiBrightGreen#ABB578
  • terminal.ansiBrightMagenta#D699A9
  • terminal.ansiBrightRed#E3746F
  • terminal.ansiBrightWhite#DCCDB5
  • terminal.ansiBrightYellow#D6AC67
  • terminal.ansiCyan#89B482
  • terminal.ansiGreen#A9B665
  • terminal.ansiMagenta#D3869B
  • terminal.ansiRed#EA6962
  • terminal.ansiWhite#DDC7A1
  • terminal.ansiYellow#D8A657
  • terminal.background#1D2021
  • terminal.foreground#DDC7A1
  • terminalCursor.foreground#DDC7A1
  • terminalOverviewRuler.border#00000000
  • testing.iconErrored#EA6962
  • testing.iconFailed#EA6962
  • testing.iconPassed#A9B665
  • testing.iconQueued#7DAEA3
  • testing.iconSkipped#D3869B
  • testing.iconUnset#DDC7A1
  • testing.runAction#A9B665
  • textLink.activeForeground#7DAEA3
  • textLink.foreground#7DAEA3
  • textPreformat.background#00000000
  • textPreformat.foreground#DDC7A1
  • titleBar.activeBackground#1D2021
  • titleBar.activeForeground#DDC7A1
  • titleBar.inactiveBackground#1D2021
  • titleBar.inactiveForeground#DDC7A1
  • tree.indentGuidesStroke#DDC7A180
  • widget.border#DDC7A10C
  • widget.shadow#00000000

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
entity.name.namespace#89B482
entity.name.class#7DAEA3
entity.name.type,entity.name.type.enum,support.type,support.class#7DAEA3
variable,variable.parameter,variable.language#DDC7A1
meta.attribute#DDC7A1
entity.name.function.decorator#A9B665
entity.name.function,support.function,meta.function-call#A9B665
entity.name.method#A9B665
entity.name.function.macro#D3869B
comment,string.comment,punctuation.definition.comment,punctuation.definition.tag.begin,punctuation.definition.tag.end,string.quoted.docstring#DDC7A160
string#D8A657
keyword,keyword.control,keyword.operator,storage,storage.modifier,storage.type#EA6962
keyword.operator#E78A4E
constant,constant.language,constant.numeric#DDC7A1
text#DDC7A1
punctuation#DDC7A1E0
punctuation.separator#E78A4E
punctuation.support.type.property-name#DDC7A1A0
entity.name.tag,entity.other.attribute-name#DDC7A1
markup.italicitalic
markup.boldbold
markup.bold markup.italic,markup.italic markup.bolditalic bold
markup.link,markup.underline.linkunderline
markup.inline.raw.string,markup.raw.monospace#A9B665
markup.heading.heading-0.asciidoc#EA6962bold
markup.heading.heading-1.asciidoc#E78A4Ebold
markup.heading.heading-2.asciidoc#D8A657bold
markup.heading.heading-3.asciidoc#A9B665bold
markup.heading.heading-4.asciidoc#7DAEA3bold
markup.heading.heading-5.asciidoc#D3869Bbold
markup.heading.marker.asciidoc#DDC7A1A0
punctuation.definition.separator.diff#DDC7A1A0
punctuation.definition.from-file.diff#EA6962
punctuation.definition.to-file.diff#A9B665
meta.diff.header.from-file,meta.diff.header.to-file#DDC7A1
meta.diff.range.context,punctuation.definition.range.diff#E78A4E
meta.toc-list.line-number.diff#D3869B
markup.deleted.diff,punctuation.definition.deleted.diff#EA6962
markup.inserted.diff,punctuation.definition.inserted.diff#A9B665
markup.changed.diff,punctuation.definition.changed.diff#7DAEA3
entity.name.section.group-title.editorconfig,keyword.operator.glob.wildcard.editorconfig#DDC7A1
support.type.property-name#DDC7A1
fenced_code.block.language,punctuation.definition.markdown,punctuation.definition.raw.markdown#D3869B
heading.1.markdown,markup.heading.setext.1.markdown#EA6962bold
heading.2.markdown,markup.heading.setext.2.markdown#E78A4Ebold
heading.3.markdown#D8A657bold
heading.4.markdown#A9B665bold
heading.5.markdown#7DAEA3bold
heading.6.markdown#D3869Bbold
punctuation.definition.list.begin.markdown#EA6962
punctuation.definition.heading.markdown,punctuation.definition.string.begin.markdown,punctuation.definition.string.end.markdown,punctuation.definition.bold.markdown,punctuation.definition.italic.markdown,punctuation.definition.quote.begin.markdown,punctuation.definition.metadata.markdown,punctuation.separator.key-value.markdown,punctuation.definition.constant.markdown,meta.separator.markdown,punctuation.definition.constant.begin.markdown,punctuation.definition.constant.end.markdown,punctuation.definition.link.markdown#DDC7A1A0
punctuation.definition.string.heredoc.delimiter.shell,punctuation.definition.string.heredoc.quote.shell,punctuation.definition.variable.shell,variable.other.special.shell,variable.other.positional.shell,variable.other.bracket.shell,punctuation.definition.subshell.single.shell,punctuation.definition.subshell.single.shell#E78A4E
constant.other.option#DDC7A1
support.function.builtin.shell#D3869B
entity.other.document.begin.yaml#E78A4Ebold