Skip to main content
CodingTheme

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.background#424242
  • activityBar.border#424242
  • activityBar.foreground#d8d8d8
  • activityBar.inactiveForeground#A0A0A0
  • activityBarBadge.background#212121
  • activityBarBadge.foreground#FFFFFF
  • activityBarTop.foreground#D4D4D4
  • activityBarTop.inactiveForeground#A0A0A0
  • badge.background#E0E0E080
  • badge.foreground#333333
  • breadcrumb.activeSelectionForeground#424242
  • breadcrumb.background#F5F5F5
  • breadcrumb.focusForeground#424242
  • breadcrumb.foreground#8E8E8E
  • breadcrumbPicker.background#F0F0F0
  • button.background#757575DD
  • button.foreground#FFFFFF
  • button.hoverBackground#9E9E9EAA
  • button.secondaryBackground#E0E0E0
  • charts.blue#1E88E5
  • charts.foreground#424242
  • charts.green#7CB342
  • charts.lines#A0A0A0
  • charts.orange#F9A825
  • charts.purple#8E24AA
  • charts.red#D32F2F
  • charts.yellow#F9A825
  • chat.avatarBackground#757575
  • chat.avatarForeground#212121
  • chat.requestBorder#D0D0D0
  • chat.slashCommandBackground#E0E0E0
  • chat.slashCommandForeground#8E8E8E
  • debugConsole.errorForeground#D32F2F
  • debugConsole.infoForeground#757575
  • debugConsole.sourceForeground#424242
  • debugConsole.warningForeground#F9A825
  • debugConsoleInputIcon.foreground#424242
  • debugExceptionWidget.background#F0F0F0
  • debugExceptionWidget.border#D32F2F
  • debugIcon.breakpointDisabledForeground#A0A0A0
  • debugIcon.breakpointForeground#D32F2F
  • debugIcon.breakpointUnverifiedForeground#D32F2F
  • debugTokenExpression.boolean#757575
  • debugTokenExpression.error#D32F2F
  • debugTokenExpression.name#424242
  • debugTokenExpression.number#757575
  • debugTokenExpression.string#616161
  • debugTokenExpression.value#757575
  • debugToolBar.background#F0F0F0
  • debugView.stateLabelBackground#F0F0F0
  • debugView.stateLabelForeground#424242
  • debugView.valueChangedHighlight#A0A0A080
  • descriptionForeground#777777
  • diffEditor.diagonalFill#A0A0A0
  • diffEditor.insertedLineBackground#A0A0A030
  • diffEditor.insertedTextBackground#A0A0A030
  • diffEditor.removedLineBackground#E5737330
  • diffEditor.removedTextBackground#E5737330
  • diffEditor.unchangedCodeBackground#F0F0F080
  • diffEditorGutter.insertedLineBackground#A0A0A030
  • diffEditorGutter.removedLineBackground#E5737330
  • diffEditorOverview.insertedForeground#A0A0A030
  • diffEditorOverview.removedForeground#E5737330
  • disabledForeground#A0A0A0
  • dropdown.background#F0F0F0
  • dropdown.foreground#333333
  • dropdown.listBackground#F0F0F0
  • editor.background#FFFFFF
  • editor.findMatchBackground#FFF9C4
  • editor.findMatchBorder#F9A825
  • editor.findMatchHighlightBackground#E0E0E080
  • editor.findRangeHighlightBackground#E0E0E080
  • editor.focusedStackFrameHighlightBackground#D0D0D080
  • editor.foldBackground#F0F0F080
  • editor.foreground#212121
  • editor.inactiveSelectionBackground#E0E0E081
  • editor.lineHighlightBackground#F0F0F0
  • editor.selectionBackground#D0D0D0
  • editor.selectionHighlightBackground#E0E0E080
  • editor.stackFrameHighlightBackground#D0D0D080
  • editor.wordHighlightBackground#E0E0E080
  • editor.wordHighlightStrongBackground#D0D0D080
  • editorBracketHighlight.foreground1#757575
  • editorBracketHighlight.foreground2#757575
  • editorBracketHighlight.foreground3#757575
  • editorBracketHighlight.foreground4#757575
  • editorBracketHighlight.foreground5#757575
  • editorBracketHighlight.foreground6#757575
  • editorBracketHighlight.unexpectedBracket.foreground#D32F2F
  • editorBracketMatch.background#D0D0D080
  • editorBracketMatch.border#A0A0A0
  • editorBracketPairGuide.activeBackground1#757575
  • editorBracketPairGuide.activeBackground2#757575
  • editorBracketPairGuide.activeBackground3#757575
  • editorBracketPairGuide.activeBackground4#757575
  • editorBracketPairGuide.activeBackground5#757575
  • editorBracketPairGuide.activeBackground6#757575
  • editorCodeLens.foreground#8E8E8E
  • editorCursor.foreground#212121
  • editorError.foreground#D32F2F
  • editorGhostText.foreground#8E8E8E
  • editorGroup.border#D0D0D0
  • editorGroup.dropBackground#E0E0E0
  • editorGroupHeader.border#D0D0D0
  • editorGroupHeader.noTabsBackground#F5F5F5
  • editorGroupHeader.tabsBackground#F5F5F5
  • editorGroupHeader.tabsBorder#D0D0D0
  • editorGutter.addedBackground#A0A0A0
  • editorGutter.deletedBackground#A0A0A0
  • editorGutter.modifiedBackground#A0A0A0
  • editorHint.foreground#757575
  • editorHoverWidget.background#F0F0F0
  • editorHoverWidget.border#D0D0D0
  • editorIndentGuide.activeBackground1#A0A0A0
  • editorIndentGuide.background1#E0E0E0
  • editorInfo.foreground#757575
  • editorInlayHint.foreground#8E8E8E
  • editorLightBulb.foreground#F9A825
  • editorLightBulbAutoFix.foreground#F9A825
  • editorLineNumber.activeForeground#424242
  • editorLineNumber.foreground#9E9E9E
  • editorLink.activeForeground#212121
  • editorMarkerNavigation.background#F0F0F0
  • editorOverviewRuler.addedForeground#757575
  • editorOverviewRuler.border#D0D0D0
  • editorOverviewRuler.bracketMatchForeground#D0D0D0
  • editorOverviewRuler.deletedForeground#757575
  • editorOverviewRuler.errorForeground#D32F2F
  • editorOverviewRuler.findMatchForeground#75757580
  • editorOverviewRuler.infoForeground#757575
  • editorOverviewRuler.modifiedForeground#757575
  • editorOverviewRuler.rangeHighlightForeground#75757580
  • editorOverviewRuler.selectionHighlightForeground#75757540
  • editorOverviewRuler.warningForeground#F9A825
  • editorOverviewRuler.wordHighlightForeground#75757580
  • editorOverviewRuler.wordHighlightStrongForeground#75757590
  • editorPane.background#F5F5F5
  • editorRuler.foreground#D0D0D0
  • editorSuggestWidget.background#F0F0F0
  • editorSuggestWidget.border#D0D0D0
  • editorSuggestWidget.highlightForeground#000000
  • editorSuggestWidget.selectedBackground#E0E0E0
  • editorWarning.foreground#F9A825
  • editorWhitespace.foreground#A0A0A0
  • editorWidget.background#F0F0F0
  • editorWidget.border#D0D0D0
  • editorWidget.foreground#424242
  • editorWidget.resizeBorder#737373
  • errorForeground#D32F2F
  • extensionBadge.remoteBackground#757575
  • extensionBadge.remoteForeground#FFFFFF
  • extensionButton.prominentBackground#757575DD
  • extensionButton.prominentForeground#FFFFFF
  • extensionButton.prominentHoverBackground#9E9E9EAA
  • focusBorder#737373
  • foreground#333333
  • gitDecoration.addedResourceForeground#616161
  • gitDecoration.conflictingResourceForeground#F9A825
  • gitDecoration.deletedResourceForeground#D32F2F
  • gitDecoration.ignoredResourceForeground#A0A0A0
  • gitDecoration.modifiedResourceForeground#616161
  • gitDecoration.renamedResourceForeground#424242
  • gitDecoration.stageDeletedResourceForeground#D32F2F
  • gitDecoration.stageModifiedResourceForeground#616161
  • gitDecoration.untrackedResourceForeground#616161
  • icon.foreground#555555
  • inlineChat.foreground#424242
  • inlineChatDiff.inserted#A0A0A030
  • inlineChatDiff.removed#E5737330
  • inlineChatInput.background#F0F0F0
  • input.background#F0F0F0
  • input.border#D0D0D0
  • input.foreground#333333
  • input.placeholderForeground#8E8E8E
  • inputOption.activeBackground#D0D0D080
  • inputOption.activeForeground#000000
  • inputValidation.errorBackground#D32F2F
  • inputValidation.errorBorder#D32F2F
  • inputValidation.errorForeground#FFFFFF
  • inputValidation.infoBackground#E0E0E0
  • inputValidation.infoBorder#A0A0A0
  • inputValidation.infoForeground#212121
  • inputValidation.warningBackground#FFEB3B
  • inputValidation.warningBorder#FDD835
  • inputValidation.warningForeground#212121
  • list.activeSelectionBackground#E0E0E0
  • list.activeSelectionForeground#212121
  • list.deemphasizedForeground#8E8E8E
  • list.dropBackground#E0E0E0
  • list.errorForeground#D32F2F
  • list.focusBackground#D0D0D0
  • list.focusForeground#212121
  • list.highlightForeground#000000
  • list.hoverBackground#E6E6E6
  • list.hoverForeground#424242
  • list.inactiveSelectionBackground#F0F0F0
  • list.inactiveSelectionForeground#424242
  • list.invalidItemForeground#D32F2F
  • list.warningForeground#F9A825
  • listFilterWidget.background#F0F0F0
  • listFilterWidget.noMatchesOutline#D32F2F
  • listFilterWidget.outline#A0A0A0
  • menu.background#F0F0F0
  • menu.border#D0D0D0
  • menu.foreground#424242
  • menu.selectionBackground#E0E0E0
  • menu.selectionForeground#424242
  • menu.separatorBackground#D0D0D0
  • menubar.selectionBackground#E0E0E0
  • menubar.selectionBorder#D0D0D0
  • menubar.selectionForeground#424242
  • merge.currentContentBackground#B39DDB80
  • merge.currentHeaderBackground#E0E0E080
  • merge.incomingContentBackground#C5CAE980
  • merge.incomingHeaderBackground#C5CAE980
  • mergeEditor.change.background#B39DDB80
  • mergeEditor.change.word.background#B39DDB
  • mergeEditor.conflict.handled.minimapOverViewRuler#A0A0A0
  • mergeEditor.conflict.handledFocused.border#A0A0A0
  • mergeEditor.conflict.handledUnfocused.border#A0A0A080
  • mergeEditor.conflict.unhandled.minimapOverViewRuler#F9A825
  • mergeEditor.conflict.unhandledFocused.border#F9A825
  • mergeEditor.conflict.unhandledUnfocused.border#F9A82580
  • minimapGutter.addedBackground#A0A0A0
  • minimapGutter.deletedBackground#A0A0A0
  • minimapGutter.modifiedBackground#A0A0A0
  • multiDiffEditor.border#D0D0D0
  • multiDiffEditor.headerBackground#F0F0F0
  • notebook.cellBorderColor#D0D0D0
  • notebook.cellEditorBackground#F5F5F5
  • notebook.cellStatusBarItemHoverBackground#E0E0E0
  • notebook.editorBackground#F5F5F5
  • notebook.focusedCellBorder#A0A0A0
  • notificationCenterHeader.background#F0F0F0
  • notificationLink.foreground#424242
  • notifications.background#F0F0F0
  • notificationsErrorIcon.foreground#D32F2F
  • notificationsInfoIcon.foreground#757575
  • notificationsWarningIcon.foreground#F9A825
  • panel.background#F5F5F5
  • panel.border#D0D0D0
  • panelInput.border#D0D0D0
  • panelTitle.activeBorder#424242
  • panelTitle.activeForeground#424242
  • panelTitle.inactiveForeground#8E8E8E
  • peekView.border#D0D0D0
  • peekViewEditor.background#F0F0F0
  • peekViewEditor.matchHighlightBackground#D0D0D0
  • peekViewResult.background#F0F0F0
  • peekViewResult.fileForeground#8E8E8E
  • peekViewResult.lineForeground#424242
  • peekViewResult.matchHighlightBackground#D0D0D080
  • peekViewResult.selectionBackground#D0D0D080
  • peekViewResult.selectionForeground#424242
  • peekViewTitle.background#F0F0F0
  • peekViewTitleDescription.foreground#8E8E8E
  • peekViewTitleLabel.foreground#424242
  • pickerGroup.border#D0D0D0
  • pickerGroup.foreground#212121
  • progressBar.background#757575
  • sash.hoverBorder#525252
  • scmGraph.foreground1#A0A0A0
  • scmGraph.foreground2#F9A825
  • scmGraph.foreground3#A0A0A0
  • scmGraph.foreground4#A0A0A0
  • scmGraph.foreground5#A0A0A0
  • scmGraph.historyItemBaseRefColor#A0A0A0
  • scmGraph.historyItemHoverAdditionsForeground#A0A0A0
  • scmGraph.historyItemHoverDefaultLabelForeground#424242
  • scmGraph.historyItemHoverDeletionsForeground#D32F2F
  • scmGraph.historyItemHoverLabelForeground#424242
  • scmGraph.historyItemRefColor#A0A0A0
  • scmGraph.historyItemRemoteRefColor#A0A0A0
  • scrollbar.shadow#00000033
  • scrollbarSlider.activeBackground#75757580
  • scrollbarSlider.background#75757530
  • scrollbarSlider.hoverBackground#75757550
  • selection.background#D0D0D080
  • settings.headerForeground#333333
  • sideBar.background#F5F5F5
  • sideBar.border#D0D0D0
  • sideBar.dropBackground#E0E0E0
  • sideBar.foreground#424242
  • sideBarSectionHeader.background#F5F5F5
  • sideBarSectionHeader.border#D0D0D0
  • sideBarSectionHeader.foreground#424242
  • sideBarTitle.foreground#212121
  • statusBar.background#424242
  • statusBar.border#424242
  • statusBar.debuggingBackground#B71C1C
  • statusBar.debuggingForeground#FFFFFF
  • statusBar.foreground#d8d8d8
  • statusBar.noFolderBackground#F0F0F0
  • statusBarItem.activeBackground#E0E0E0
  • statusBarItem.hoverBackground#D0D0D0
  • statusBarItem.prominentBackground#E0E0E0
  • statusBarItem.prominentHoverBackground#D0D0D0
  • tab.activeBackground#FFFFFF
  • tab.activeBorder#A0A0A0
  • tab.activeForeground#424242
  • tab.activeModifiedBorder#616161
  • tab.border#D0D0D0
  • tab.hoverForeground#212121
  • tab.inactiveBackground#E0E0E0
  • tab.inactiveForeground#8E8E8E
  • tab.inactiveModifiedBorder#616161
  • tab.lastPinnedBorder#757575
  • tab.unfocusedActiveBorder#616161
  • tab.unfocusedActiveForeground#757575
  • tab.unfocusedHoverForeground#212121
  • tab.unfocusedInactiveForeground#8E8E8E
  • terminal.ansiBlack#424242
  • terminal.ansiBlue#1E88E5
  • terminal.ansiBrightBlack#757575
  • terminal.ansiBrightBlue#1E88E5
  • terminal.ansiBrightCyan#00ACC1
  • terminal.ansiBrightGreen#7CB342
  • terminal.ansiBrightMagenta#8E24AA
  • terminal.ansiBrightRed#D32F2F
  • terminal.ansiBrightWhite#424242
  • terminal.ansiBrightYellow#F9A825
  • terminal.ansiCyan#00ACC1
  • terminal.ansiGreen#7CB342
  • terminal.ansiMagenta#8E24AA
  • terminal.ansiRed#D32F2F
  • terminal.ansiWhite#757575
  • terminal.ansiYellow#F9A825
  • terminal.background#FFFFFF
  • terminal.foreground#424242
  • terminal.selectionBackground#E0E0E080
  • textBlockQuote.background#F0F0F0
  • textCodeBlock.background#F0F0F0
  • textLink.activeForeground#212121
  • textLink.foreground#333333
  • textPreformat.foreground#757575
  • textSeparator.foreground#A0A0A0
  • titleBar.activeBackground#424242
  • titleBar.activeForeground#d8d8d8
  • titleBar.border#424242
  • titleBar.inactiveBackground#F0F0F0
  • titleBar.inactiveForeground#8E8E8E
  • toolbar.activeBackground#F0F0F0
  • toolbar.hoverBackground#E6E6E6
  • tree.indentGuidesStroke#A0A0A0
  • walkThrough.embeddedEditorBackground#F0F0F0
  • widget.shadow#00000000
  • window.activeBorder#F0F0F0
  • window.inactiveBorder#D0D0D0

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#A0A0A0italic
variable, string constant.other.placeholder#424242
constant.other.color#212121
invalid, invalid.illegal#D32F2F
keyword, storage.type, storage.modifier#616161
keyword.control, constant.other.color, punctuation, meta.tag, punctuation.definition.tag, punctuation.separator.inheritance.php, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, punctuation.section.embedded, keyword.other.template, keyword.other.substitution#616161
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter#616161
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method#616161
meta.block variable.other#424242
support.other.variable, string.other.link#616161
constant.numeric, constant.language, support.constant, constant.character, constant.escape, variable.parameter, keyword.other.unit, keyword.other#5A5A5A
string, constant.other.symbol, constant.other.key, entity.other.inherited-class, markup.heading, markup.inserted.git_gutter, meta.group.braces.curly constant.other.object.key.js string.unquoted.label.js#757575
entity.name, support.type, support.class, support.other.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter, support.type.sys-types#525252
support.type#424242
source.css support.type.property-name, source.sass support.type.property-name, source.scss support.type.property-name, source.less support.type.property-name, source.stylus support.type.property-name, source.postcss support.type.property-name#616161
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#424242
variable.language#616161italic
entity.name.method.js#616161italic
meta.class-method.js entity.name.function.js, variable.function.constructor#616161
entity.other.attribute-name#525252
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name#616161italic
entity.other.attribute-name.class#616161
source.sass keyword.control#616161
markup.inserted#757575
markup.deleted#D32F2F
markup.changed#F9A825
string.regexp#616161
constant.character.escape#525252
*url*, *link*, *uri*underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#616161italic
source.js constant.other.object.key.js string.unquoted.label.js#616161italic
source.json meta.structure.dictionary.json support.type.property-name.json#616161
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#424242
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#525252
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#5A5A5A
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#616161
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#757575
text.html.markdown, punctuation.definition.list_item.markdown#424242
text.html.markdown markup.inline.raw.markdown#616161
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown#525252
markdown.heading, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown#616161
markup.italic#5A5A5Aitalic
markup.bold, markup.bold string#424242bold
markup.bold markup.italic, markup.italic markup.bold, markup.quote markup.bold, markup.bold markup.italic string, markup.italic markup.bold string, markup.quote markup.bold string#424242bold italic
markup.underline#616161underline
markup.quote punctuation.definition.blockquote.markdown#5A5A5A
markup.quote#757575italic
string.other.link.title.markdown#616161
string.other.link.description.title.markdown#424242
constant.other.reference.link.markdown#5A5A5A
markup.raw.block#616161
markup.raw.block.fenced.markdown#525252
punctuation.definition.fenced.markdown#616161
markup.raw.block.fenced.markdown, variable.language.fenced.markdown, punctuation.section.class.end#525252
variable.language.fenced.markdown#616161
meta.separator#616161bold
markup.table#525252

Shiki preview

TypeScript sample highlighted with this variant's colors and tokenColors.

Loading...