Skip to main content
Coding Theme

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#EDD1B5
  • activityBar.background#313531
  • activityBar.dropBorder#626A62
  • activityBar.foreground#EDD1B5
  • activityBar.inactiveForeground#D7DAD7
  • activityBarBadge.background#D99E63
  • activityBarBadge.foreground#313531
  • badge.background#D99E63
  • badge.foreground#313531
  • banner.background#3E433E
  • banner.foreground#EDD1B5
  • banner.iconForeground#D7DAD7
  • breadcrumb.activeSelectionForeground#D99E63
  • breadcrumb.background#313531
  • breadcrumb.focusForeground#D7DAD7
  • breadcrumb.foreground#7d7f73
  • breadcrumbPicker.background#3E433E
  • button.background#D99E63
  • button.foreground#313531
  • button.hoverBackground#D99E63e6
  • button.secondaryBackground#3E433E
  • button.secondaryForeground#EDD1B5
  • button.secondaryHoverBackground#626A62
  • charts.blue#FD6043
  • charts.foreground#EDD1B5
  • charts.green#FEA090
  • charts.lines#D7DAD7
  • charts.orange#D99E63
  • charts.purple#e4dec8
  • charts.red#a2c1e0
  • charts.yellow#d3b58f
  • checkbox.background#3E433E
  • checkbox.border#D7DAD726
  • checkbox.foreground#EDD1B5
  • debugExceptionWidget.background#3E433E
  • debugExceptionWidget.border#D7DAD726
  • debugIcon.breakpointCurrentStackframeForeground#D7DAD7
  • debugIcon.breakpointDisabledForeground#D7DAD7
  • debugIcon.breakpointForeground#D7DAD7
  • debugIcon.breakpointStackframeForeground#D7DAD7
  • debugIcon.breakpointUnverifiedForeground#D7DAD7
  • debugIcon.continueForeground#D7DAD7
  • debugIcon.disconnectForeground#D7DAD7
  • debugIcon.pauseForeground#D7DAD7
  • debugIcon.restartForeground#D7DAD7
  • debugIcon.startForeground#D7DAD7
  • debugIcon.stepBackForeground#D7DAD7
  • debugIcon.stepIntoForeground#D7DAD7
  • debugIcon.stepOutForeground#D7DAD7
  • debugIcon.stepOverForeground#D7DAD7
  • debugIcon.stopForeground#a2c1e0
  • debugToolBar.background#3E433E
  • debugToolBar.border#626A62
  • descriptionForeground#D7DAD7
  • diffEditor.border#626A62
  • diffEditor.diagonalFill#D7DAD74d
  • diffEditor.insertedLineBackground#FD604326
  • diffEditor.insertedTextBackground#FD604326
  • diffEditor.removedLineBackground#93E38026
  • diffEditor.removedTextBackground#93E38026
  • diffEditorOverview.insertedForeground#FD604380
  • diffEditorOverview.removedForeground#93E38080
  • dropdown.background#3E433E
  • dropdown.border#D7DAD726
  • dropdown.foreground#EDD1B5
  • dropdown.listBackground#3E433E
  • editor.background#313531
  • editor.findMatchBackground#D7DAD74d
  • editor.findMatchHighlightBackground#D7DAD74d
  • editor.findRangeHighlightBackground#D7DAD74d
  • editor.findRangeHighlightBorder#0000
  • editor.focusedStackFrameHighlightBackground#D7DAD726
  • editor.foldBackground#3E433E
  • editor.foreground#fafafa80
  • editor.hoverHighlightBackground#0000
  • editor.inactiveSelectionBackground#D7DAD710
  • editor.inlineValuesBackground#0000
  • editor.inlineValuesForeground#D7DAD7
  • editor.lineHighlightBackground#D7DAD710
  • editor.lineHighlightBorder#0000
  • editor.linkedEditingBackground#3E433E
  • editor.rangeHighlightBackground#D7DAD710
  • editor.rangeHighlightBorder#0000
  • editor.selectionBackground#D7DAD726
  • editor.selectionForeground#EDD1B5
  • editor.selectionHighlightBackground#D7DAD726
  • editor.selectionHighlightBorder#0000
  • editor.snippetFinalTabstopHighlightBackground#D7DAD726
  • editor.snippetFinalTabstopHighlightBorder#3E433E
  • editor.snippetTabstopHighlightBackground#D7DAD726
  • editor.snippetTabstopHighlightBorder#3E433E
  • editor.stackFrameHighlightBackground#D7DAD726
  • editor.symbolHighlightBackground#D7DAD726
  • editor.symbolHighlightBorder#0000
  • editor.wordHighlightBackground#D7DAD726
  • editor.wordHighlightBorder#0000
  • editor.wordHighlightStrongBackground#D7DAD726
  • editor.wordHighlightStrongBorder#D7DAD726
  • editorBracketHighlight.foreground1#93E38080
  • editorBracketHighlight.foreground2#FEA09080
  • editorBracketHighlight.foreground3#d3b58f80
  • editorBracketHighlight.foreground4#FD604380
  • editorBracketHighlight.foreground5#D99E6380
  • editorBracketHighlight.foreground6#e4dec880
  • editorBracketMatch.background#0000
  • editorBracketMatch.border#D7DAD7
  • editorBracketPairGuide.activeBackground1#FEA090
  • editorBracketPairGuide.activeBackground2#D99E63
  • editorBracketPairGuide.activeBackground3#e4dec8
  • editorBracketPairGuide.activeBackground4#FD6043
  • editorBracketPairGuide.activeBackground5#d3b58f
  • editorBracketPairGuide.activeBackground6#a2c1e0
  • editorBracketPairGuide.background1#FEA09080
  • editorBracketPairGuide.background2#D99E6380
  • editorBracketPairGuide.background3#e4dec880
  • editorBracketPairGuide.background4#FD604380
  • editorBracketPairGuide.background5#d3b58f80
  • editorBracketPairGuide.background6#93E38080
  • editorCodeLens.foreground#D99E63
  • editorCursor.background#EDD1B5
  • editorCursor.foreground#7d7f73
  • editorError.border#0000
  • editorError.foreground#a2c1e0
  • editorGhostText.foreground#D7DAD7
  • editorGroup.border#0000
  • editorGroup.dropBackground#3E433E
  • editorGroup.emptyBackground#0000
  • editorGroup.focusedEmptyBorder#0000
  • editorGroupHeader.noTabsBackground#0000
  • editorGroupHeader.tabsBackground#0000
  • editorGroupHeader.tabsBorder#0000
  • editorGutter.addedBackground#FD6043
  • editorGutter.background#0000
  • editorGutter.commentRangeForeground#D7DAD7
  • editorGutter.deletedBackground#a2c1e0
  • editorGutter.foldingControlForeground#e4dec8
  • editorGutter.modifiedBackground#D99E63
  • editorHint.border#0000
  • editorHint.foreground#D7DAD7
  • editorHoverWidget.background#3E433E
  • editorHoverWidget.border#7d7f7380
  • editorHoverWidget.foreground#D7DAD7
  • editorHoverWidget.highlightForeground#EDD1B5
  • editorHoverWidget.statusBarBackground#0000
  • editorIndentGuide.activeBackground#7d7f73
  • editorIndentGuide.background#D7DAD74d
  • editorInfo.border#626A62
  • editorInfo.foreground#FD6043
  • editorInlayHint.background#626A62
  • editorInlayHint.foreground#D7DAD7
  • editorInlayHint.parameterBackground#626A62
  • editorInlayHint.parameterForeground#e4dec8
  • editorInlayHint.typeBackground#626A62
  • editorInlayHint.typeForeground#FD6043
  • editorLightBulb.foreground#FEA090
  • editorLightBulbAutoFix.foreground#D99E63
  • editorLineNumber.activeForeground#EDD1B5
  • editorLineNumber.foreground#D7DAD7
  • editorLink.activeForeground#D99E63
  • editorMarkerNavigation.background#3E433E
  • editorMarkerNavigationError.background#3E433E
  • editorMarkerNavigationInfo.background#3E433E
  • editorMarkerNavigationWarning.background#3E433E
  • editorOverviewRuler.addedForeground#FD604380
  • editorOverviewRuler.background#313531
  • editorOverviewRuler.border#D7DAD74d
  • editorOverviewRuler.bracketMatchForeground#D7DAD7
  • editorOverviewRuler.commonContentForeground#D7DAD710
  • editorOverviewRuler.currentContentForeground#D7DAD726
  • editorOverviewRuler.deletedForeground#93E38080
  • editorOverviewRuler.errorForeground#93E38080
  • editorOverviewRuler.findMatchForeground#D7DAD74d
  • editorOverviewRuler.incomingContentForeground#e4dec880
  • editorOverviewRuler.infoForeground#FD604380
  • editorOverviewRuler.modifiedForeground#D99E6380
  • editorOverviewRuler.rangeHighlightForeground#D7DAD74d
  • editorOverviewRuler.selectionHighlightForeground#D7DAD74d
  • editorOverviewRuler.warningForeground#d3b58f80
  • editorOverviewRuler.wordHighlightForeground#D7DAD726
  • editorOverviewRuler.wordHighlightStrongForeground#D7DAD74d
  • editorPane.background#0000
  • editorRuler.foreground#D7DAD74d
  • editorSuggestWidget.background#3E433E
  • editorSuggestWidget.border#0000
  • editorSuggestWidget.focusHighlightForeground#D99E63
  • editorSuggestWidget.foreground#D7DAD7
  • editorSuggestWidget.highlightForeground#D99E63
  • editorSuggestWidget.selectedBackground#D7DAD726
  • editorSuggestWidget.selectedForeground#EDD1B5
  • editorSuggestWidget.selectedIconForeground#EDD1B5
  • editorUnnecessaryCode.border#0000
  • editorUnnecessaryCode.opacity#a2c1e080
  • editorWarning.border#0000
  • editorWarning.foreground#d3b58f
  • editorWhitespace.foreground#7d7f73
  • editorWidget.background#3E433E
  • editorWidget.border#626A62
  • editorWidget.foreground#D7DAD7
  • editorWidget.resizeBorder#7d7f73
  • errorForeground#a2c1e0
  • extensionBadge.remoteBackground#e4dec8
  • extensionBadge.remoteForeground#313531
  • extensionButton.prominentBackground#D99E63
  • extensionButton.prominentForeground#313531
  • extensionButton.prominentHoverBackground#D99E63e6
  • extensionIcon.preReleaseForeground#FEA090
  • extensionIcon.starForeground#D99E63
  • extensionIcon.verifiedForeground#e4dec8
  • focusBorder#D7DAD726
  • foreground#EDD1B5
  • gitDecoration.addedResourceForeground#FD6043
  • gitDecoration.conflictingResourceForeground#a2c1e0
  • gitDecoration.deletedResourceForeground#D7DAD7
  • gitDecoration.ignoredResourceForeground#7d7f73
  • gitDecoration.modifiedResourceForeground#D99E63
  • gitDecoration.renamedResourceForeground#FEA090
  • gitDecoration.stageDeletedResourceForeground#a2c1e0
  • gitDecoration.stageModifiedResourceForeground#e4dec8
  • gitDecoration.submoduleResourceForeground#d3b58f
  • gitDecoration.untrackedResourceForeground#d3b58f
  • icon.foreground#D7DAD7
  • input.background#626A6280
  • input.border#D7DAD726
  • input.foreground#EDD1B5
  • input.placeholderForeground#D7DAD7
  • inputOption.activeBackground#D99E63
  • inputOption.activeBorder#0000
  • inputOption.activeForeground#313531
  • inputValidation.errorBackground#3E433E
  • inputValidation.errorBorder#D7DAD74d
  • inputValidation.errorForeground#a2c1e0
  • inputValidation.infoBackground#3E433E
  • inputValidation.infoBorder#D7DAD74d
  • inputValidation.infoForeground#FD6043
  • inputValidation.warningBackground#3E433E
  • inputValidation.warningBorder#D7DAD74d
  • inputValidation.warningForeground#FD604380
  • keybindingLabel.background#626A62
  • keybindingLabel.border#D7DAD74d
  • keybindingLabel.bottomBorder#D7DAD74d
  • keybindingLabel.foreground#e4dec8
  • keybindingTable.headerBackground#626A62
  • keybindingTable.rowsBackground#3E433E
  • list.activeSelectionBackground#D7DAD726
  • list.activeSelectionForeground#EDD1B5
  • list.deemphasizedForeground#D7DAD7
  • list.dropBackground#3E433E
  • list.errorForeground#a2c1e0
  • list.filterMatchBackground#3E433E
  • list.filterMatchBorder#D99E63
  • list.focusBackground#D7DAD74d
  • list.focusForeground#EDD1B5
  • list.focusOutline#D7DAD726
  • list.highlightForeground#D99E63
  • list.hoverBackground#D7DAD710
  • list.hoverForeground#EDD1B5
  • list.inactiveFocusBackground#D7DAD710
  • list.inactiveSelectionBackground#3E433E
  • list.inactiveSelectionForeground#EDD1B5
  • list.invalidItemForeground#a2c1e0
  • list.warningForeground#d3b58f
  • listFilterWidget.background#3E433E
  • listFilterWidget.noMatchesOutline#a2c1e0
  • listFilterWidget.outline#626A62
  • menu.background#3E433E
  • menu.border#D7DAD710
  • menu.foreground#EDD1B5
  • menu.selectionBackground#D7DAD726
  • menu.selectionBorder#626A62
  • menu.selectionForeground#EDD1B5
  • menu.separatorBackground#D7DAD74d
  • menubar.selectionBackground#D7DAD726
  • menubar.selectionBorder#D7DAD710
  • menubar.selectionForeground#EDD1B5
  • merge.border#626A62
  • merge.commonContentBackground#D7DAD726
  • merge.commonHeaderBackground#D7DAD726
  • merge.currentContentBackground#d3b58f80
  • merge.currentHeaderBackground#d3b58f80
  • merge.incomingContentBackground#FD604380
  • merge.incomingHeaderBackground#FD604380
  • minimap.background#3E433E
  • minimap.errorHighlight#93E38080
  • minimap.findMatchHighlight#D7DAD726
  • minimap.selectionHighlight#D7DAD726
  • minimap.warningHighlight#d3b58f80
  • minimapGutter.addedBackground#FD6043
  • minimapGutter.deletedBackground#a2c1e0
  • minimapGutter.modifiedBackground#D99E63
  • minimapSlider.activeBackground#D7DAD74d
  • minimapSlider.background#D7DAD726
  • minimapSlider.hoverBackground#D7DAD726
  • notificationCenter.border#D7DAD726
  • notificationCenterHeader.background#3E433E
  • notificationCenterHeader.foreground#D7DAD7
  • notificationLink.foreground#e4dec8
  • notifications.background#3E433E
  • notifications.border#D7DAD726
  • notifications.foreground#EDD1B5
  • notificationsErrorIcon.foreground#a2c1e0
  • notificationsInfoIcon.foreground#FD6043
  • notificationsWarningIcon.foreground#d3b58f
  • notificationToast.border#D7DAD726
  • panel.background#313531
  • panel.border#626A62
  • panel.dropBorder#626A62
  • panelInput.border#3E433E
  • panelSection.dropBackground#D7DAD726
  • panelSectionHeader.background#3E433E
  • panelSectionHeader.foreground#EDD1B5
  • panelTitle.activeBorder#D7DAD74d
  • panelTitle.activeForeground#EDD1B5
  • panelTitle.inactiveForeground#D7DAD7
  • peekView.border#626A62
  • peekViewEditor.background#3E433E
  • peekViewEditor.matchHighlightBackground#D7DAD74d
  • peekViewResult.background#3E433E
  • peekViewResult.fileForeground#D7DAD7
  • peekViewResult.lineForeground#D7DAD7
  • peekViewResult.matchHighlightBackground#D7DAD74d
  • peekViewResult.selectionBackground#D7DAD726
  • peekViewResult.selectionForeground#EDD1B5
  • peekViewTitle.background#626A62
  • peekViewTitleDescription.foreground#D7DAD7
  • pickerGroup.border#D7DAD74d
  • pickerGroup.foreground#e4dec8
  • ports.iconRunningProcessForeground#D99E63
  • problemsErrorIcon.foreground#a2c1e0
  • problemsInfoIcon.foreground#FD6043
  • problemsWarningIcon.foreground#d3b58f
  • progressBar.background#D99E63
  • quickInput.background#3E433E
  • quickInput.foreground#D7DAD7
  • quickInputList.focusBackground#D7DAD726
  • quickInputList.focusForeground#EDD1B5
  • quickInputList.focusIconForeground#EDD1B5
  • scrollbar.shadow#0000
  • scrollbarSlider.activeBackground#FEA09080
  • scrollbarSlider.background#D7DAD726
  • scrollbarSlider.hoverBackground#D7DAD74d
  • searchEditor.findMatchBackground#D7DAD726
  • selection.background#D7DAD74d
  • settings.focusedRowBackground#3E433E
  • settings.focusedRowBorder#D7DAD726
  • settings.headerForeground#EDD1B5
  • settings.modifiedItemIndicator#D99E63
  • settings.rowHoverBackground#3E433E
  • sideBar.background#313531
  • sideBar.border#626A62
  • sideBar.dropBackground#3E433E
  • sideBar.foreground#D7DAD7
  • sideBarSectionHeader.background#0000
  • sideBarSectionHeader.border#D7DAD726
  • statusBar.background#313531
  • statusBar.debuggingBackground#e4dec8
  • statusBar.debuggingForeground#313531
  • statusBar.foreground#D7DAD7
  • statusBar.noFolderBackground#313531
  • statusBar.noFolderForeground#D7DAD7
  • statusBarItem.activeBackground#D7DAD74d
  • statusBarItem.errorBackground#313531
  • statusBarItem.errorForeground#a2c1e0
  • statusBarItem.hoverBackground#D7DAD726
  • statusBarItem.prominentBackground#626A62
  • statusBarItem.prominentForeground#EDD1B5
  • statusBarItem.prominentHoverBackground#D7DAD726
  • statusBarItem.remoteBackground#313531
  • statusBarItem.remoteForeground#d3b58f
  • symbolIcon.arrayForeground#D7DAD7
  • symbolIcon.classForeground#D7DAD7
  • symbolIcon.colorForeground#D7DAD7
  • symbolIcon.constantForeground#D7DAD7
  • symbolIcon.constructorForeground#D7DAD7
  • symbolIcon.enumeratorForeground#D7DAD7
  • symbolIcon.enumeratorMemberForeground#D7DAD7
  • symbolIcon.eventForeground#D7DAD7
  • symbolIcon.fieldForeground#D7DAD7
  • symbolIcon.fileForeground#D7DAD7
  • symbolIcon.folderForeground#D7DAD7
  • symbolIcon.functionForeground#D7DAD7
  • symbolIcon.interfaceForeground#D7DAD7
  • symbolIcon.keyForeground#D7DAD7
  • symbolIcon.keywordForeground#D7DAD7
  • symbolIcon.methodForeground#D7DAD7
  • symbolIcon.moduleForeground#D7DAD7
  • symbolIcon.namespaceForeground#D7DAD7
  • symbolIcon.nullForeground#D7DAD7
  • symbolIcon.numberForeground#D7DAD7
  • symbolIcon.objectForeground#D7DAD7
  • symbolIcon.operatorForeground#D7DAD7
  • symbolIcon.packageForeground#D7DAD7
  • symbolIcon.propertyForeground#D7DAD7
  • symbolIcon.referenceForeground#D7DAD7
  • symbolIcon.snippetForeground#D7DAD7
  • symbolIcon.stringForeground#D7DAD7
  • symbolIcon.structForeground#D7DAD7
  • symbolIcon.textForeground#D7DAD7
  • symbolIcon.typeParameterForeground#D7DAD7
  • symbolIcon.unitForeground#D7DAD7
  • symbolIcon.variableForeground#D7DAD7
  • tab.activeBackground#D7DAD710
  • tab.activeBorderTop#FD6043
  • tab.activeForeground#EDD1B5
  • tab.activeModifiedBorder#FD6043
  • tab.border#0000
  • tab.hoverBackground#D7DAD726
  • tab.inactiveBackground#0000
  • tab.inactiveForeground#D7DAD7
  • tab.inactiveModifiedBorder#FD604380
  • tab.lastPinnedBorder#7d7f73
  • tab.unfocusedActiveBackground#0000
  • tab.unfocusedHoverBackground#0000
  • tab.unfocusedInactiveBackground#0000
  • tab.unfocusedInactiveModifiedBorder#FD604380
  • terminal.ansiBlack#626A62
  • terminal.ansiBlue#FD6043
  • terminal.ansiBrightBlack#D7DAD7
  • terminal.ansiBrightBlue#FD6043
  • terminal.ansiBrightCyan#D99E63
  • terminal.ansiBrightGreen#FEA090
  • terminal.ansiBrightMagenta#e4dec8
  • terminal.ansiBrightRed#a2c1e0
  • terminal.ansiBrightWhite#EDD1B5
  • terminal.ansiBrightYellow#d3b58f
  • terminal.ansiCyan#D99E63
  • terminal.ansiGreen#FEA090
  • terminal.ansiMagenta#e4dec8
  • terminal.ansiRed#a2c1e0
  • terminal.ansiWhite#EDD1B5
  • terminal.ansiYellow#d3b58f
  • terminal.background#313531
  • terminal.border#626A62
  • terminal.dropBackground#D7DAD726
  • terminal.foreground#EDD1B5
  • terminal.selectionBackground#D7DAD726
  • terminal.tab.activeBorder#EDD1B5
  • terminalCursor.background#EDD1B5
  • terminalCursor.foreground#7d7f73
  • textBlockQuote.background#3E433E
  • textBlockQuote.border#D7DAD726
  • textCodeBlock.background#3E433E
  • textLink.activeForeground#e4dec8e6
  • textLink.foreground#e4dec8
  • textPreformat.foreground#d3b58f
  • textSeparator.foreground#D7DAD7
  • titleBar.activeBackground#313531
  • titleBar.activeForeground#D7DAD7
  • titleBar.border#626A62
  • titleBar.inactiveBackground#313531
  • toolbar.activeBackground#D7DAD74d
  • toolbar.hoverBackground#D7DAD726
  • tree.indentGuidesStroke#D7DAD7
  • walkThrough.embeddedEditorBackground#313531
  • welcomePage.background#313531
  • welcomePage.buttonBackground#3E433E
  • welcomePage.buttonHoverBackground#626A62
  • widget.shadow#1917244d
  • window.activeBorder#626A62
  • window.inactiveBorder#626A62

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#7d7f73italic
constant#FEA090
constant.numeric, constant.language, constant.charcter.escape#D99E63
entity.name#D99E63
entity.name.section, entity.name.tag, entity.name.namespace, entity.name.type#FD6043
entity.other.attribute-name, entity.other.inherited-class#e4dec8italic
invalid#a2c1e0
invalid.deprecated#D7DAD7
keyword#FEA090
markup.inserted.diff#FD6043
markup.deleted.diff#a2c1e0
meta.diff.range#e4dec8
meta.tag, meta.brace#EDD1B5
meta.import, meta.export#FEA090
meta.directive.vue#e4dec8italic
meta.property-name.css#FD6043
meta.property-value.css#d3b58f
meta.tag.other.html#D7DAD7
punctuation#D7DAD7
punctuation.accessor#FEA090
punctuation.definition.string#d3b58f
punctuation.definition.tag#7d7f73
storage.type, storage.modifier#FEA090
string#d3b58f
support#FD6043
support.constant#d3b58f
support.function#a2c1e0italic
variable#D99E63italic
variable.other, variable.language, variable.function, variable.argument#EDD1B5
variable.parameter#e4dec8
Bushland by Michael Andreuzza - VS Code Theme