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#6c63ff14
  • activityBar.activeBorder#6c63ff
  • activityBar.background#f4f3f8
  • activityBar.border#e1dfea
  • activityBar.foreground#171528
  • activityBar.inactiveForeground#77738a
  • activityBarBadge.background#6c63ff
  • activityBarBadge.foreground#ffffff
  • activityBarTop.activeBorder#6c63ff
  • activityBarTop.foreground#171528
  • activityBarTop.inactiveForeground#77738a
  • badge.background#6c63ff
  • badge.foreground#ffffff
  • breadcrumb.activeSelectionForeground#007a91
  • breadcrumb.background#ffffff
  • breadcrumb.focusForeground#171528
  • breadcrumb.foreground#5f5a70
  • breadcrumbPicker.background#ffffff
  • button.background#6c63ff
  • button.border#e1dfea
  • button.foreground#ffffff
  • button.hoverBackground#574fe0
  • button.secondaryBackground#eae9f2
  • button.secondaryForeground#171528
  • button.secondaryHoverBackground#c8c5d5
  • charts.blue#6c63ff
  • charts.foreground#171528
  • charts.green#047857
  • charts.lines#e1dfea
  • charts.orange#b45309
  • charts.purple#a21caf
  • charts.red#b42318
  • charts.yellow#b45309
  • chat.editedFileForeground#b45309
  • chat.requestBorder#e1dfea
  • chat.slashCommandBackground#6c63ff24
  • chat.slashCommandForeground#6c63ff
  • checkbox.background#ffffff
  • checkbox.border#c8c5d5
  • checkbox.foreground#171528
  • checkbox.selectBackground#6c63ff
  • commandCenter.activeBackground#6c63ff24
  • commandCenter.activeBorder#6c63ff
  • commandCenter.background#f4f3f8
  • commandCenter.border#e1dfea
  • commandCenter.foreground#171528
  • commandCenter.inactiveBorder#e1dfea
  • debugExceptionWidget.background#ffffff
  • debugExceptionWidget.border#b42318
  • debugIcon.breakpointDisabledForeground#77738a
  • debugIcon.breakpointForeground#b42318
  • debugIcon.continueForeground#047857
  • debugIcon.startForeground#047857
  • debugIcon.stepIntoForeground#6c63ff
  • debugIcon.stepOutForeground#6c63ff
  • debugIcon.stepOverForeground#6c63ff
  • debugIcon.stopForeground#b42318
  • debugTokenExpression.boolean#6c3fc4
  • debugTokenExpression.error#b42318
  • debugTokenExpression.name#171528
  • debugTokenExpression.number#007a91
  • debugTokenExpression.string#9a3412
  • debugTokenExpression.value#171528
  • debugToolBar.background#ffffff
  • debugToolBar.border#e1dfea
  • descriptionForeground#5f5a70
  • diffEditor.border#e1dfea
  • diffEditor.diagonalFill#e1dfea
  • diffEditor.insertedLineBackground#04785712
  • diffEditor.insertedTextBackground#04785722
  • diffEditor.removedLineBackground#b4231812
  • diffEditor.removedTextBackground#b4231822
  • diffEditorOverview.insertedForeground#047857
  • diffEditorOverview.removedForeground#b42318
  • disabledForeground#77738a
  • dropdown.background#ffffff
  • dropdown.border#c8c5d5
  • dropdown.foreground#171528
  • dropdown.listBackground#ffffff
  • editor.background#ffffff
  • editor.findMatchBackground#f6c45399
  • editor.findMatchBorder#b45309
  • editor.findMatchHighlightBackground#f6c45355
  • editor.findMatchHighlightBorder#b45309
  • editor.findRangeHighlightBackground#6c63ff14
  • editor.focusedStackFrameHighlightBackground#04785722
  • editor.foldBackground#6c63ff14
  • editor.foreground#171528
  • editor.hoverHighlightBackground#6c63ff14
  • editor.inactiveSelectionBackground#6c63ff18
  • editor.lineHighlightBackground#f7f7fa
  • editor.lineHighlightBorder#00000000
  • editor.rangeHighlightBackground#6c63ff14
  • editor.selectionBackground#6c63ff2e
  • editor.selectionForeground#000000
  • editor.selectionHighlightBackground#6c63ff1a
  • editor.selectionHighlightBorder#00000000
  • editor.stackFrameHighlightBackground#fdf6ec
  • editor.wordHighlightBackground#6c63ff1a
  • editor.wordHighlightStrongBackground#6c63ff2e
  • editorBracketHighlight.foreground1#6c63ff
  • editorBracketHighlight.foreground2#007a91
  • editorBracketHighlight.foreground3#a21caf
  • editorBracketHighlight.foreground4#047857
  • editorBracketHighlight.foreground5#b45309
  • editorBracketHighlight.foreground6#2563eb
  • editorBracketHighlight.unexpectedBracket.foreground#b42318
  • editorBracketMatch.background#6c63ff1a
  • editorBracketMatch.border#6c63ff
  • editorBracketPairGuide.activeBackground1#6c63ff
  • editorBracketPairGuide.activeBackground2#007a91
  • editorBracketPairGuide.activeBackground3#a21caf
  • editorBracketPairGuide.background1#e1dfea
  • editorCodeLens.foreground#77738a
  • editorCursor.foreground#007a91
  • editorError.foreground#b42318
  • editorGhostText.foreground#77738a
  • editorGroup.border#e1dfea
  • editorGroup.dropBackground#6c63ff24
  • editorGroupHeader.noTabsBackground#f4f3f8
  • editorGroupHeader.tabsBackground#f4f3f8
  • editorGroupHeader.tabsBorder#e1dfea
  • editorGutter.addedBackground#047857
  • editorGutter.background#ffffff
  • editorGutter.commentRangeForeground#77738a
  • editorGutter.deletedBackground#b42318
  • editorGutter.modifiedBackground#007a91
  • editorHint.foreground#6c63ff
  • editorHoverWidget.background#ffffff
  • editorHoverWidget.border#e1dfea
  • editorHoverWidget.foreground#171528
  • editorHoverWidget.statusBarBackground#eae9f2
  • editorIndentGuide.activeBackground1#6c63ff66
  • editorIndentGuide.background1#e1dfea
  • editorInfo.foreground#007a91
  • editorInlayHint.background#6c63ff14
  • editorInlayHint.foreground#5f5a70
  • editorInlayHint.parameterBackground#6c63ff14
  • editorInlayHint.parameterForeground#5f5a70
  • editorInlayHint.typeBackground#6c63ff14
  • editorInlayHint.typeForeground#a21caf
  • editorLineNumber.activeForeground#6c63ff
  • editorLineNumber.foreground#a09baf
  • editorLink.activeForeground#007a91
  • editorMultiCursor.primary.foreground#007a91
  • editorMultiCursor.secondary.foreground#6c63ff
  • editorOverviewRuler.addedForeground#047857
  • editorOverviewRuler.background#ffffff
  • editorOverviewRuler.border#e1dfea
  • editorOverviewRuler.bracketMatchForeground#6c63ff
  • editorOverviewRuler.commonContentForeground#77738a
  • editorOverviewRuler.currentContentForeground#007a91
  • editorOverviewRuler.deletedForeground#b42318
  • editorOverviewRuler.errorForeground#b42318
  • editorOverviewRuler.findMatchForeground#f6c45399
  • editorOverviewRuler.incomingContentForeground#6c63ff
  • editorOverviewRuler.infoForeground#007a91
  • editorOverviewRuler.modifiedForeground#007a91
  • editorOverviewRuler.selectionHighlightForeground#6c63ff2e
  • editorOverviewRuler.warningForeground#b45309
  • editorOverviewRuler.wordHighlightForeground#6c63ff1a
  • editorRuler.foreground#e1dfea
  • editorStickyScroll.background#ffffff
  • editorStickyScroll.border#e1dfea
  • editorStickyScroll.shadow#17152822
  • editorStickyScrollHover.background#eae9f2
  • editorSuggestWidget.background#ffffff
  • editorSuggestWidget.border#e1dfea
  • editorSuggestWidget.focusHighlightForeground#007a91
  • editorSuggestWidget.foreground#171528
  • editorSuggestWidget.highlightForeground#007a91
  • editorSuggestWidget.selectedBackground#6c63ff24
  • editorSuggestWidget.selectedForeground#000000
  • editorUnnecessaryCode.border#b45309
  • editorWarning.foreground#b45309
  • editorWhitespace.foreground#a09baf
  • editorWidget.background#ffffff
  • editorWidget.border#e1dfea
  • editorWidget.foreground#171528
  • errorForeground#b42318
  • errorLens.errorBackground#fdf2f1
  • errorLens.errorForeground#b42318
  • errorLens.errorGutterIconColor#b42318
  • errorLens.hintBackground#6c63ff14
  • errorLens.hintForeground#5f5a70
  • errorLens.infoBackground#eef8fb
  • errorLens.infoForeground#007a91
  • errorLens.infoGutterIconColor#007a91
  • errorLens.statusBarErrorForeground#b42318
  • errorLens.statusBarHintForeground#5f5a70
  • errorLens.statusBarInfoForeground#007a91
  • errorLens.statusBarWarningForeground#b45309
  • errorLens.warningBackground#fdf6ec
  • errorLens.warningForeground#b45309
  • errorLens.warningGutterIconColor#b45309
  • focusBorder#6c63ff
  • foreground#171528
  • gitDecoration.addedResourceForeground#047857
  • gitDecoration.conflictingResourceForeground#b45309
  • gitDecoration.deletedResourceForeground#b42318
  • gitDecoration.ignoredResourceForeground#a09baf
  • gitDecoration.modifiedResourceForeground#007a91
  • gitDecoration.renamedResourceForeground#047857
  • gitDecoration.stageDeletedResourceForeground#b42318
  • gitDecoration.stageModifiedResourceForeground#007a91
  • gitDecoration.submoduleResourceForeground#5f5a70
  • gitDecoration.untrackedResourceForeground#6c63ff
  • icon.foreground#171528
  • inlineChat.background#ffffff
  • inlineChat.border#6c63ff
  • input.background#ffffff
  • input.border#c8c5d5
  • input.foreground#171528
  • input.placeholderForeground#77738a
  • inputOption.activeBackground#6c63ff2e
  • inputOption.activeBorder#6c63ff
  • inputOption.activeForeground#171528
  • inputValidation.errorBackground#fdf2f1
  • inputValidation.errorBorder#b42318
  • inputValidation.errorForeground#b42318
  • inputValidation.infoBackground#eef8fb
  • inputValidation.infoBorder#007a91
  • inputValidation.warningBackground#fdf6ec
  • inputValidation.warningBorder#b45309
  • keybindingLabel.background#eae9f2
  • keybindingLabel.border#e1dfea
  • keybindingLabel.bottomBorder#e1dfea
  • keybindingLabel.foreground#171528
  • list.activeSelectionBackground#6c63ff24
  • list.activeSelectionForeground#000000
  • list.activeSelectionIconForeground#000000
  • list.dropBackground#6c63ff24
  • list.errorForeground#b42318
  • list.filterMatchBackground#f6c45355
  • list.filterMatchBorder#b45309
  • list.focusBackground#6c63ff24
  • list.focusForeground#171528
  • list.focusHighlightForeground#007a91
  • list.focusOutline#6c63ff
  • list.highlightForeground#007a91
  • list.hoverBackground#eae9f2
  • list.hoverForeground#171528
  • list.inactiveSelectionBackground#6c63ff14
  • list.inactiveSelectionForeground#171528
  • list.warningForeground#b45309
  • listFilterWidget.background#ffffff
  • listFilterWidget.noMatchesOutline#b42318
  • listFilterWidget.outline#6c63ff
  • menu.background#ffffff
  • menu.border#e1dfea
  • menu.foreground#171528
  • menu.selectionBackground#6c63ff
  • menu.selectionForeground#ffffff
  • menu.separatorBackground#e1dfea
  • menubar.selectionBackground#6c63ff24
  • menubar.selectionForeground#171528
  • merge.border#e1dfea
  • merge.commonContentBackground#77738a14
  • merge.commonHeaderBackground#77738a2e
  • merge.currentContentBackground#007a9118
  • merge.currentHeaderBackground#007a9133
  • merge.incomingContentBackground#6c63ff18
  • merge.incomingHeaderBackground#6c63ff33
  • mergeEditor.change.background#04785722
  • mergeEditor.conflict.handledFocused.border#047857
  • mergeEditor.conflict.handledUnfocused.border#e1dfea
  • mergeEditor.conflict.unhandledFocused.border#b42318
  • mergeEditor.conflict.unhandledUnfocused.border#b45309
  • minimap.background#ffffff
  • minimap.errorHighlight#b42318
  • minimap.findMatchHighlight#f6c45399
  • minimap.selectionHighlight#6c63ff2e
  • minimap.warningHighlight#b45309
  • minimapGutter.addedBackground#047857
  • minimapGutter.deletedBackground#b42318
  • minimapGutter.modifiedBackground#007a91
  • minimapSlider.activeBackground#6c63ff2e
  • minimapSlider.background#6c63ff1a
  • minimapSlider.hoverBackground#6c63ff2e
  • notificationCenterHeader.background#ffffff
  • notificationCenterHeader.foreground#171528
  • notificationLink.foreground#007a91
  • notifications.background#ffffff
  • notifications.border#e1dfea
  • notifications.foreground#171528
  • notificationsErrorIcon.foreground#b42318
  • notificationsInfoIcon.foreground#007a91
  • notificationsWarningIcon.foreground#b45309
  • panel.background#f4f3f8
  • panel.border#e1dfea
  • panelInput.border#c8c5d5
  • panelSection.border#e1dfea
  • panelSectionHeader.background#f4f3f8
  • panelTitle.activeBorder#6c63ff
  • panelTitle.activeForeground#171528
  • panelTitle.inactiveForeground#77738a
  • peekView.border#6c63ff
  • peekViewEditor.background#ffffff
  • peekViewEditor.matchHighlightBackground#f6c45399
  • peekViewEditor.matchHighlightBorder#b45309
  • peekViewEditorGutter.background#ffffff
  • peekViewResult.background#f4f3f8
  • peekViewResult.fileForeground#171528
  • peekViewResult.lineForeground#5f5a70
  • peekViewResult.matchHighlightBackground#f6c45355
  • peekViewResult.selectionBackground#6c63ff24
  • peekViewResult.selectionForeground#000000
  • peekViewTitle.background#ffffff
  • peekViewTitleDescription.foreground#5f5a70
  • peekViewTitleLabel.foreground#171528
  • pickerGroup.border#e1dfea
  • pickerGroup.foreground#007a91
  • ports.iconRunningProcessForeground#047857
  • problemsErrorIcon.foreground#b42318
  • problemsInfoIcon.foreground#007a91
  • problemsWarningIcon.foreground#b45309
  • progressBar.background#6c63ff
  • quickInput.background#ffffff
  • quickInput.foreground#171528
  • quickInputList.focusBackground#6c63ff24
  • quickInputList.focusForeground#000000
  • quickInputTitle.background#eae9f2
  • sash.hoverBorder#6c63ff
  • scrollbar.shadow#17152822
  • scrollbarSlider.activeBackground#6c63ff2e
  • scrollbarSlider.background#6c63ff1a
  • scrollbarSlider.hoverBackground#6c63ff2e
  • selection.background#6c63ff2e
  • settings.dropdownBackground#ffffff
  • settings.dropdownBorder#c8c5d5
  • settings.focusedRowBackground#6c63ff14
  • settings.headerBorder#e1dfea
  • settings.headerForeground#000000
  • settings.modifiedItemIndicator#6c63ff
  • settings.sashBorder#e1dfea
  • sideBar.background#f4f3f8
  • sideBar.border#e1dfea
  • sideBar.foreground#171528
  • sideBarSectionHeader.background#f4f3f8
  • sideBarSectionHeader.border#e1dfea
  • sideBarSectionHeader.foreground#5f5a70
  • sideBarStickyScroll.background#f4f3f8
  • sideBarTitle.foreground#171528
  • statusBar.background#000000
  • statusBar.border#e1dfea
  • statusBar.debuggingBackground#6c63ff
  • statusBar.debuggingBorder#6c63ff
  • statusBar.debuggingForeground#ffffff
  • statusBar.focusBorder#6c63ff
  • statusBar.foreground#ffffff
  • statusBar.noFolderBackground#000000
  • statusBarItem.activeBackground#6c63ff2e
  • statusBarItem.errorBackground#b42318
  • statusBarItem.errorForeground#ffffff
  • statusBarItem.hoverBackground#6c63ff2e
  • statusBarItem.hoverForeground#ffffff
  • statusBarItem.prominentBackground#6c63ff2e
  • statusBarItem.remoteBackground#6c63ff
  • statusBarItem.remoteForeground#ffffff
  • statusBarItem.warningBackground#b45309
  • statusBarItem.warningForeground#ffffff
  • tab.activeBackground#ffffff
  • tab.activeBorder#ffffff
  • tab.activeBorderTop#6c63ff
  • tab.activeForeground#000000
  • tab.border#e1dfea
  • tab.hoverBackground#eae9f2
  • tab.inactiveBackground#f4f3f8
  • tab.inactiveForeground#77738a
  • tab.lastPinnedBorder#e1dfea
  • tab.selectedBackground#ffffff
  • tab.selectedBorderTop#007a91
  • tab.selectedForeground#000000
  • tab.unfocusedActiveBorderTop#e1dfea
  • tab.unfocusedHoverBackground#eae9f2
  • terminal.ansiBlack#171528
  • terminal.ansiBlue#6c63ff
  • terminal.ansiBrightBlack#a09baf
  • terminal.ansiBrightBlue#574fe0
  • terminal.ansiBrightCyan#007a91
  • terminal.ansiBrightGreen#047857
  • terminal.ansiBrightMagenta#a21caf
  • terminal.ansiBrightRed#b42318
  • terminal.ansiBrightWhite#171528
  • terminal.ansiBrightYellow#b45309
  • terminal.ansiCyan#007a91
  • terminal.ansiGreen#047857
  • terminal.ansiMagenta#a21caf
  • terminal.ansiRed#b42318
  • terminal.ansiWhite#5f5a70
  • terminal.ansiYellow#b45309
  • terminal.background#ffffff
  • terminal.border#e1dfea
  • terminal.foreground#171528
  • terminal.inactiveSelectionBackground#6c63ff18
  • terminal.selectionBackground#6c63ff2e
  • terminal.tab.activeBorder#6c63ff
  • terminalCommandDecoration.errorBackground#b42318
  • terminalCommandDecoration.successBackground#047857
  • terminalCursor.foreground#007a91
  • testing.iconErrored#b42318
  • testing.iconFailed#b42318
  • testing.iconPassed#047857
  • testing.iconQueued#b45309
  • testing.iconSkipped#77738a
  • testing.iconUnset#77738a
  • testing.message.error.decorationForeground#b42318
  • testing.message.error.lineBackground#b4231822
  • testing.message.info.decorationForeground#007a91
  • testing.runAction#047857
  • textBlockQuote.background#ffffff
  • textBlockQuote.border#6c63ff
  • textCodeBlock.background#eae9f2
  • textLink.activeForeground#574fe0
  • textLink.foreground#007a91
  • textPreformat.background#eae9f2
  • textPreformat.foreground#9a3412
  • textSeparator.foreground#e1dfea
  • titleBar.activeBackground#f4f3f8
  • titleBar.activeForeground#171528
  • titleBar.border#e1dfea
  • titleBar.inactiveBackground#f4f3f8
  • titleBar.inactiveForeground#77738a
  • tree.inactiveIndentGuidesStroke#e1dfea
  • tree.indentGuidesStroke#e1dfea
  • walkThrough.embeddedEditorBackground#ffffff
  • welcomePage.progress.foreground#6c63ff
  • welcomePage.tileBackground#ffffff
  • welcomePage.tileBorder#e1dfea
  • widget.border#e1dfea
  • widget.shadow#17152822

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
meta.embedded, source.groovy.embedded#171528—
emphasis—italic
strong—bold
comment, punctuation.definition.comment#77738aitalic
keyword, keyword.control, keyword.other, storage, storage.type, storage.modifier#6c3fc4
keyword.operator, punctuation.separator, punctuation.terminator#403b55—
punctuation, meta.brace#5f5a70—
string, string.quoted, meta.preprocessor.string#9a3412—
constant.character.escape, constant.other.placeholder#a21caf—
constant.regexp, string.regexp#a21caf—
constant.numeric, meta.preprocessor.numeric, keyword.operator.plus.exponent, keyword.operator.minus.exponent#007a91—
constant.language, variable.other.enummember, constant.other#007a91—
variable.language, support.variable#a21caf
entity.name.type, entity.name.class, entity.name.namespace, support.type, support.class, meta.object-literal.key.type#a21caf—
entity.name.function, support.function, meta.function-call, variable.function#2563eb—
variable, variable.other, meta.definition.variable, meta.structure.dictionary.key.python#171528—
variable.parameter, meta.parameter#171528—
invalid, invalid.illegal#b42318—
invalid.deprecated#b45309strikethrough
entity.name.tag, meta.tag#6c3fc4—
punctuation.definition.tag#5f5a70—
entity.other.attribute-name, meta.attribute#2563eb—
support.type.property-name.json, meta.object-literal.key, support.type.property-name#2563eb—
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#2563eb—
meta.preprocessor, entity.name.function.preprocessor#6c3fc4—
markup.heading#a21cafbold
markup.bold#6c3fc4bold
markup.italic#a21cafitalic
markup.underline—underline
markup.strikethrough—strikethrough
markup.inline.raw, markup.fenced_code.block#9a3412—
markup.underline.link, string.other.link#007a91—
punctuation.definition.list.begin.markdown#6c63ff—
punctuation.definition.quote.begin.markdown#77738a—
markup.inserted#047857—
markup.deleted#b42318—
markup.changed#007a91—
keyword.operators#403b55—
keyword.other.builtintypes.al#a21caf—
entity.name.applicationobject.al#a21caf—
identifier.quoted.double.al#171528—
keyword.other.property.al#2563eb—
keyword.other.metadata.al, entity.other.attribute.al#be185d—
entity.name.function.alevent#be185d—
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#0b5fa5—
support.other.excluded.al#a09baf—
comment.documentation#77738aitalic