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#4b3fd41f
  • activityBar.activeBorder#4b3fd4
  • activityBar.background#f2f2f5
  • activityBar.border#b9b7c4
  • activityBar.foreground#101014
  • activityBar.inactiveForeground#55525f
  • activityBarBadge.background#4b3fd4
  • activityBarBadge.foreground#ffffff
  • activityBarTop.activeBorder#4b3fd4
  • activityBarTop.foreground#101014
  • activityBarTop.inactiveForeground#55525f
  • badge.background#4b3fd4
  • badge.foreground#ffffff
  • breadcrumb.activeSelectionForeground#005f73
  • breadcrumb.background#ffffff
  • breadcrumb.focusForeground#101014
  • breadcrumb.foreground#3a3844
  • breadcrumbPicker.background#ffffff
  • button.background#4b3fd4
  • button.border#b9b7c4
  • button.foreground#ffffff
  • button.hoverBackground#3a2fb0
  • button.secondaryBackground#e6e6eb
  • button.secondaryForeground#101014
  • button.secondaryHoverBackground#6e6b7b
  • charts.blue#4b3fd4
  • charts.foreground#101014
  • charts.green#056839
  • charts.lines#b9b7c4
  • charts.orange#8a4b00
  • charts.purple#8a0f7a
  • charts.red#b3261e
  • charts.yellow#8a4b00
  • chat.editedFileForeground#8a4b00
  • chat.requestBorder#b9b7c4
  • chat.slashCommandBackground#4b3fd43d
  • chat.slashCommandForeground#4b3fd4
  • checkbox.background#ffffff
  • checkbox.border#6e6b7b
  • checkbox.foreground#101014
  • checkbox.selectBackground#4b3fd4
  • commandCenter.activeBackground#4b3fd43d
  • commandCenter.activeBorder#4b3fd4
  • commandCenter.background#f2f2f5
  • commandCenter.border#b9b7c4
  • commandCenter.foreground#101014
  • commandCenter.inactiveBorder#b9b7c4
  • debugExceptionWidget.background#ffffff
  • debugExceptionWidget.border#b3261e
  • debugIcon.breakpointDisabledForeground#55525f
  • debugIcon.breakpointForeground#b3261e
  • debugIcon.continueForeground#056839
  • debugIcon.startForeground#056839
  • debugIcon.stepIntoForeground#4b3fd4
  • debugIcon.stepOutForeground#4b3fd4
  • debugIcon.stepOverForeground#4b3fd4
  • debugIcon.stopForeground#b3261e
  • debugTokenExpression.boolean#6a1b9a
  • debugTokenExpression.error#b3261e
  • debugTokenExpression.name#101014
  • debugTokenExpression.number#00565f
  • debugTokenExpression.string#a03000
  • debugTokenExpression.value#101014
  • debugToolBar.background#ffffff
  • debugToolBar.border#b9b7c4
  • descriptionForeground#3a3844
  • diffEditor.border#b9b7c4
  • diffEditor.diagonalFill#b9b7c4
  • diffEditor.insertedLineBackground#0568391f
  • diffEditor.insertedTextBackground#05683933
  • diffEditor.removedLineBackground#b3261e1f
  • diffEditor.removedTextBackground#b3261e33
  • diffEditorOverview.insertedForeground#056839
  • diffEditorOverview.removedForeground#b3261e
  • disabledForeground#55525f
  • dropdown.background#ffffff
  • dropdown.border#6e6b7b
  • dropdown.foreground#101014
  • dropdown.listBackground#ffffff
  • editor.background#ffffff
  • editor.findMatchBackground#ffd54f
  • editor.findMatchBorder#8a4b00
  • editor.findMatchHighlightBackground#ffecb3
  • editor.findMatchHighlightBorder#8a4b00
  • editor.findRangeHighlightBackground#4b3fd41f
  • editor.focusedStackFrameHighlightBackground#05683933
  • editor.foldBackground#4b3fd41f
  • editor.foreground#101014
  • editor.hoverHighlightBackground#4b3fd41f
  • editor.inactiveSelectionBackground#4b3fd426
  • editor.lineHighlightBackground#f0effa
  • editor.lineHighlightBorder#d6d4e6
  • editor.rangeHighlightBackground#4b3fd41f
  • editor.selectionBackground#4b3fd44d
  • editor.selectionForeground#000000
  • editor.selectionHighlightBackground#4b3fd426
  • editor.selectionHighlightBorder#4b3fd4
  • editor.stackFrameHighlightBackground#fdf3e6
  • editor.wordHighlightBackground#4b3fd426
  • editor.wordHighlightStrongBackground#4b3fd44d
  • editorBracketHighlight.foreground1#4b3fd4
  • editorBracketHighlight.foreground2#005f73
  • editorBracketHighlight.foreground3#8a0f7a
  • editorBracketHighlight.foreground4#056839
  • editorBracketHighlight.foreground5#8a4b00
  • editorBracketHighlight.foreground6#123fb8
  • editorBracketHighlight.unexpectedBracket.foreground#b3261e
  • editorBracketMatch.background#4b3fd426
  • editorBracketMatch.border#4b3fd4
  • editorBracketPairGuide.activeBackground1#4b3fd4
  • editorBracketPairGuide.activeBackground2#005f73
  • editorBracketPairGuide.activeBackground3#8a0f7a
  • editorBracketPairGuide.background1#b9b7c4
  • editorCodeLens.foreground#55525f
  • editorCursor.foreground#005f73
  • editorError.foreground#b3261e
  • editorGhostText.foreground#55525f
  • editorGroup.border#b9b7c4
  • editorGroup.dropBackground#4b3fd43d
  • editorGroupHeader.noTabsBackground#f2f2f5
  • editorGroupHeader.tabsBackground#f2f2f5
  • editorGroupHeader.tabsBorder#b9b7c4
  • editorGutter.addedBackground#056839
  • editorGutter.background#ffffff
  • editorGutter.commentRangeForeground#55525f
  • editorGutter.deletedBackground#b3261e
  • editorGutter.modifiedBackground#005f73
  • editorHint.foreground#4b3fd4
  • editorHoverWidget.background#ffffff
  • editorHoverWidget.border#b9b7c4
  • editorHoverWidget.foreground#101014
  • editorHoverWidget.statusBarBackground#e6e6eb
  • editorIndentGuide.activeBackground1#4b3fd4aa
  • editorIndentGuide.background1#b9b7c4
  • editorInfo.foreground#005f73
  • editorInlayHint.background#4b3fd41f
  • editorInlayHint.foreground#3a3844
  • editorInlayHint.parameterBackground#4b3fd41f
  • editorInlayHint.parameterForeground#3a3844
  • editorInlayHint.typeBackground#4b3fd41f
  • editorInlayHint.typeForeground#8a0f7a
  • editorLineNumber.activeForeground#4b3fd4
  • editorLineNumber.foreground#7a7786
  • editorLink.activeForeground#005f73
  • editorMultiCursor.primary.foreground#005f73
  • editorMultiCursor.secondary.foreground#4b3fd4
  • editorOverviewRuler.addedForeground#056839
  • editorOverviewRuler.background#ffffff
  • editorOverviewRuler.border#b9b7c4
  • editorOverviewRuler.bracketMatchForeground#4b3fd4
  • editorOverviewRuler.commonContentForeground#55525f
  • editorOverviewRuler.currentContentForeground#005f73
  • editorOverviewRuler.deletedForeground#b3261e
  • editorOverviewRuler.errorForeground#b3261e
  • editorOverviewRuler.findMatchForeground#ffd54f
  • editorOverviewRuler.incomingContentForeground#4b3fd4
  • editorOverviewRuler.infoForeground#005f73
  • editorOverviewRuler.modifiedForeground#005f73
  • editorOverviewRuler.selectionHighlightForeground#4b3fd44d
  • editorOverviewRuler.warningForeground#8a4b00
  • editorOverviewRuler.wordHighlightForeground#4b3fd426
  • editorRuler.foreground#b9b7c4
  • editorStickyScroll.background#ffffff
  • editorStickyScroll.border#b9b7c4
  • editorStickyScroll.shadow#00000033
  • editorStickyScrollHover.background#e6e6eb
  • editorSuggestWidget.background#ffffff
  • editorSuggestWidget.border#b9b7c4
  • editorSuggestWidget.focusHighlightForeground#005f73
  • editorSuggestWidget.foreground#101014
  • editorSuggestWidget.highlightForeground#005f73
  • editorSuggestWidget.selectedBackground#4b3fd43d
  • editorSuggestWidget.selectedForeground#000000
  • editorUnnecessaryCode.border#8a4b00
  • editorWarning.foreground#8a4b00
  • editorWhitespace.foreground#7a7786
  • editorWidget.background#ffffff
  • editorWidget.border#b9b7c4
  • editorWidget.foreground#101014
  • errorForeground#b3261e
  • errorLens.errorBackground#fdeceb
  • errorLens.errorForeground#b3261e
  • errorLens.errorGutterIconColor#b3261e
  • errorLens.hintBackground#4b3fd41f
  • errorLens.hintForeground#3a3844
  • errorLens.infoBackground#e8f4f7
  • errorLens.infoForeground#005f73
  • errorLens.infoGutterIconColor#005f73
  • errorLens.statusBarErrorForeground#b3261e
  • errorLens.statusBarHintForeground#3a3844
  • errorLens.statusBarInfoForeground#005f73
  • errorLens.statusBarWarningForeground#8a4b00
  • errorLens.warningBackground#fdf3e6
  • errorLens.warningForeground#8a4b00
  • errorLens.warningGutterIconColor#8a4b00
  • focusBorder#4b3fd4
  • foreground#101014
  • gitDecoration.addedResourceForeground#056839
  • gitDecoration.conflictingResourceForeground#8a4b00
  • gitDecoration.deletedResourceForeground#b3261e
  • gitDecoration.ignoredResourceForeground#7a7786
  • gitDecoration.modifiedResourceForeground#005f73
  • gitDecoration.renamedResourceForeground#056839
  • gitDecoration.stageDeletedResourceForeground#b3261e
  • gitDecoration.stageModifiedResourceForeground#005f73
  • gitDecoration.submoduleResourceForeground#3a3844
  • gitDecoration.untrackedResourceForeground#4b3fd4
  • icon.foreground#101014
  • inlineChat.background#ffffff
  • inlineChat.border#4b3fd4
  • input.background#ffffff
  • input.border#6e6b7b
  • input.foreground#101014
  • input.placeholderForeground#55525f
  • inputOption.activeBackground#4b3fd44d
  • inputOption.activeBorder#4b3fd4
  • inputOption.activeForeground#101014
  • inputValidation.errorBackground#fdeceb
  • inputValidation.errorBorder#b3261e
  • inputValidation.errorForeground#b3261e
  • inputValidation.infoBackground#e8f4f7
  • inputValidation.infoBorder#005f73
  • inputValidation.warningBackground#fdf3e6
  • inputValidation.warningBorder#8a4b00
  • keybindingLabel.background#e6e6eb
  • keybindingLabel.border#b9b7c4
  • keybindingLabel.bottomBorder#b9b7c4
  • keybindingLabel.foreground#101014
  • list.activeSelectionBackground#4b3fd43d
  • list.activeSelectionForeground#000000
  • list.activeSelectionIconForeground#000000
  • list.dropBackground#4b3fd43d
  • list.errorForeground#b3261e
  • list.filterMatchBackground#ffecb3
  • list.filterMatchBorder#8a4b00
  • list.focusBackground#4b3fd43d
  • list.focusForeground#101014
  • list.focusHighlightForeground#005f73
  • list.focusOutline#4b3fd4
  • list.highlightForeground#005f73
  • list.hoverBackground#e6e6eb
  • list.hoverForeground#101014
  • list.inactiveSelectionBackground#4b3fd41f
  • list.inactiveSelectionForeground#101014
  • list.warningForeground#8a4b00
  • listFilterWidget.background#ffffff
  • listFilterWidget.noMatchesOutline#b3261e
  • listFilterWidget.outline#4b3fd4
  • menu.background#ffffff
  • menu.border#b9b7c4
  • menu.foreground#101014
  • menu.selectionBackground#4b3fd4
  • menu.selectionForeground#ffffff
  • menu.separatorBackground#b9b7c4
  • menubar.selectionBackground#4b3fd43d
  • menubar.selectionForeground#101014
  • merge.border#b9b7c4
  • merge.commonContentBackground#55525f1f
  • merge.commonHeaderBackground#55525f3d
  • merge.currentContentBackground#005f7326
  • merge.currentHeaderBackground#005f734d
  • merge.incomingContentBackground#4b3fd426
  • merge.incomingHeaderBackground#4b3fd44d
  • mergeEditor.change.background#05683933
  • mergeEditor.conflict.handledFocused.border#056839
  • mergeEditor.conflict.handledUnfocused.border#b9b7c4
  • mergeEditor.conflict.unhandledFocused.border#b3261e
  • mergeEditor.conflict.unhandledUnfocused.border#8a4b00
  • minimap.background#ffffff
  • minimap.errorHighlight#b3261e
  • minimap.findMatchHighlight#ffd54f
  • minimap.selectionHighlight#4b3fd44d
  • minimap.warningHighlight#8a4b00
  • minimapGutter.addedBackground#056839
  • minimapGutter.deletedBackground#b3261e
  • minimapGutter.modifiedBackground#005f73
  • minimapSlider.activeBackground#4b3fd44d
  • minimapSlider.background#4b3fd426
  • minimapSlider.hoverBackground#4b3fd44d
  • notificationCenterHeader.background#ffffff
  • notificationCenterHeader.foreground#101014
  • notificationLink.foreground#005f73
  • notifications.background#ffffff
  • notifications.border#b9b7c4
  • notifications.foreground#101014
  • notificationsErrorIcon.foreground#b3261e
  • notificationsInfoIcon.foreground#005f73
  • notificationsWarningIcon.foreground#8a4b00
  • panel.background#f2f2f5
  • panel.border#b9b7c4
  • panelInput.border#6e6b7b
  • panelSection.border#b9b7c4
  • panelSectionHeader.background#f2f2f5
  • panelTitle.activeBorder#4b3fd4
  • panelTitle.activeForeground#101014
  • panelTitle.inactiveForeground#55525f
  • peekView.border#4b3fd4
  • peekViewEditor.background#ffffff
  • peekViewEditor.matchHighlightBackground#ffd54f
  • peekViewEditor.matchHighlightBorder#8a4b00
  • peekViewEditorGutter.background#ffffff
  • peekViewResult.background#f2f2f5
  • peekViewResult.fileForeground#101014
  • peekViewResult.lineForeground#3a3844
  • peekViewResult.matchHighlightBackground#ffecb3
  • peekViewResult.selectionBackground#4b3fd43d
  • peekViewResult.selectionForeground#000000
  • peekViewTitle.background#ffffff
  • peekViewTitleDescription.foreground#3a3844
  • peekViewTitleLabel.foreground#101014
  • pickerGroup.border#b9b7c4
  • pickerGroup.foreground#005f73
  • ports.iconRunningProcessForeground#056839
  • problemsErrorIcon.foreground#b3261e
  • problemsInfoIcon.foreground#005f73
  • problemsWarningIcon.foreground#8a4b00
  • progressBar.background#4b3fd4
  • quickInput.background#ffffff
  • quickInput.foreground#101014
  • quickInputList.focusBackground#4b3fd43d
  • quickInputList.focusForeground#000000
  • quickInputTitle.background#e6e6eb
  • sash.hoverBorder#4b3fd4
  • scrollbar.shadow#00000033
  • scrollbarSlider.activeBackground#4b3fd44d
  • scrollbarSlider.background#4b3fd426
  • scrollbarSlider.hoverBackground#4b3fd44d
  • selection.background#4b3fd44d
  • settings.dropdownBackground#ffffff
  • settings.dropdownBorder#6e6b7b
  • settings.focusedRowBackground#4b3fd41f
  • settings.headerBorder#b9b7c4
  • settings.headerForeground#000000
  • settings.modifiedItemIndicator#4b3fd4
  • settings.sashBorder#b9b7c4
  • sideBar.background#f2f2f5
  • sideBar.border#b9b7c4
  • sideBar.foreground#101014
  • sideBarSectionHeader.background#f2f2f5
  • sideBarSectionHeader.border#b9b7c4
  • sideBarSectionHeader.foreground#3a3844
  • sideBarStickyScroll.background#f2f2f5
  • sideBarTitle.foreground#101014
  • statusBar.background#000000
  • statusBar.border#b9b7c4
  • statusBar.debuggingBackground#4b3fd4
  • statusBar.debuggingBorder#4b3fd4
  • statusBar.debuggingForeground#ffffff
  • statusBar.focusBorder#4b3fd4
  • statusBar.foreground#ffffff
  • statusBar.noFolderBackground#000000
  • statusBarItem.activeBackground#4b3fd44d
  • statusBarItem.errorBackground#b3261e
  • statusBarItem.errorForeground#ffffff
  • statusBarItem.hoverBackground#4b3fd44d
  • statusBarItem.hoverForeground#ffffff
  • statusBarItem.prominentBackground#4b3fd44d
  • statusBarItem.remoteBackground#4b3fd4
  • statusBarItem.remoteForeground#ffffff
  • statusBarItem.warningBackground#8a4b00
  • statusBarItem.warningForeground#ffffff
  • tab.activeBackground#ffffff
  • tab.activeBorder#ffffff
  • tab.activeBorderTop#4b3fd4
  • tab.activeForeground#000000
  • tab.border#b9b7c4
  • tab.hoverBackground#e6e6eb
  • tab.inactiveBackground#f2f2f5
  • tab.inactiveForeground#55525f
  • tab.lastPinnedBorder#b9b7c4
  • tab.selectedBackground#ffffff
  • tab.selectedBorderTop#005f73
  • tab.selectedForeground#000000
  • tab.unfocusedActiveBorderTop#b9b7c4
  • tab.unfocusedHoverBackground#e6e6eb
  • terminal.ansiBlack#101014
  • terminal.ansiBlue#4b3fd4
  • terminal.ansiBrightBlack#7a7786
  • terminal.ansiBrightBlue#3a2fb0
  • terminal.ansiBrightCyan#005f73
  • terminal.ansiBrightGreen#056839
  • terminal.ansiBrightMagenta#8a0f7a
  • terminal.ansiBrightRed#b3261e
  • terminal.ansiBrightWhite#101014
  • terminal.ansiBrightYellow#8a4b00
  • terminal.ansiCyan#005f73
  • terminal.ansiGreen#056839
  • terminal.ansiMagenta#8a0f7a
  • terminal.ansiRed#b3261e
  • terminal.ansiWhite#3a3844
  • terminal.ansiYellow#8a4b00
  • terminal.background#ffffff
  • terminal.border#b9b7c4
  • terminal.foreground#101014
  • terminal.inactiveSelectionBackground#4b3fd426
  • terminal.selectionBackground#4b3fd44d
  • terminal.tab.activeBorder#4b3fd4
  • terminalCommandDecoration.errorBackground#b3261e
  • terminalCommandDecoration.successBackground#056839
  • terminalCursor.foreground#005f73
  • testing.iconErrored#b3261e
  • testing.iconFailed#b3261e
  • testing.iconPassed#056839
  • testing.iconQueued#8a4b00
  • testing.iconSkipped#55525f
  • testing.iconUnset#55525f
  • testing.message.error.decorationForeground#b3261e
  • testing.message.error.lineBackground#b3261e33
  • testing.message.info.decorationForeground#005f73
  • testing.runAction#056839
  • textBlockQuote.background#ffffff
  • textBlockQuote.border#4b3fd4
  • textCodeBlock.background#e6e6eb
  • textLink.activeForeground#3a2fb0
  • textLink.foreground#005f73
  • textPreformat.background#e6e6eb
  • textPreformat.foreground#a03000
  • textSeparator.foreground#b9b7c4
  • titleBar.activeBackground#f2f2f5
  • titleBar.activeForeground#101014
  • titleBar.border#b9b7c4
  • titleBar.inactiveBackground#f2f2f5
  • titleBar.inactiveForeground#55525f
  • tree.inactiveIndentGuidesStroke#b9b7c4
  • tree.indentGuidesStroke#b9b7c4
  • walkThrough.embeddedEditorBackground#ffffff
  • welcomePage.progress.foreground#4b3fd4
  • welcomePage.tileBackground#ffffff
  • welcomePage.tileBorder#b9b7c4
  • widget.border#b9b7c4
  • widget.shadow#00000033

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
meta.embedded, source.groovy.embedded#101014—
emphasis—italic
strong—bold
comment, punctuation.definition.comment#55525f
keyword, keyword.control, keyword.other, storage, storage.type, storage.modifier#6a1b9abold
keyword.operator, punctuation.separator, punctuation.terminator#101014—
punctuation, meta.brace#3a3844—
string, string.quoted, meta.preprocessor.string#a03000—
constant.character.escape, constant.other.placeholder#8a0f7a—
constant.regexp, string.regexp#8a0f7a—
constant.numeric, meta.preprocessor.numeric, keyword.operator.plus.exponent, keyword.operator.minus.exponent#00565f—
constant.language, variable.other.enummember, constant.other#00565f—
variable.language, support.variable#8a0f7abold
entity.name.type, entity.name.class, entity.name.namespace, support.type, support.class, meta.object-literal.key.type#8a0f7a—
entity.name.function, support.function, meta.function-call, variable.function#123fb8—
variable, variable.other, meta.definition.variable, meta.structure.dictionary.key.python#101014—
variable.parameter, meta.parameter#101014—
invalid, invalid.illegal#b3261e—
invalid.deprecated#8a4b00strikethrough
entity.name.tag, meta.tag#6a1b9a—
punctuation.definition.tag#3a3844—
entity.other.attribute-name, meta.attribute#123fb8—
support.type.property-name.json, meta.object-literal.key, support.type.property-name#123fb8—
entity.name.tag.css, entity.other.attribute-name.class.css, entity.other.attribute-name.id.css, entity.other.attribute-name.pseudo-class, entity.other.attribute-name.pseudo-element.css#123fb8—
meta.preprocessor, entity.name.function.preprocessor#6a1b9a—
markup.heading#8a0f7abold
markup.bold#6a1b9abold
markup.italic#8a0f7aitalic
markup.underline—underline
markup.strikethrough—strikethrough
markup.inline.raw, markup.fenced_code.block#a03000—
markup.underline.link, string.other.link#005f73—
punctuation.definition.list.begin.markdown#4b3fd4—
punctuation.definition.quote.begin.markdown#55525f—
markup.inserted#056839—
markup.deleted#b3261e—
markup.changed#005f73—
keyword.operators#101014—
keyword.other.builtintypes.al#8a0f7a—
entity.name.applicationobject.al#8a0f7a—
identifier.quoted.double.al#101014—
keyword.other.property.al#123fb8—
keyword.other.metadata.al, entity.other.attribute.al#a81b60—
entity.name.function.alevent#a81b60—
entity.name.class.tablefield.al, entity.name.class.tablekey.al, entity.name.class.tablefieldgroup.al, entity.name.class.pagecontrol.al, entity.name.class.pageaction.al, entity.name.class.pageview.al, entity.name.class.reportlabel.al, entity.name.class.reportlayout.al, entity.name.class.querydataitem.al, entity.name.class.querycolumn.al, entity.name.class.queryfilter.al, entity.name.class.xmlporttableelement.al, entity.name.class.xmlporttextelement.al, entity.name.class.xmlportfieldelement.al, entity.name.class.xmlportfieldattribute.al#005a8a—
support.other.excluded.al#7a7786—
comment.documentation#55525f