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

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#8E8E8Eitalic
variable, string constant.other.placeholder#212121
constant.other.color#000000
invalid, invalid.illegal#D32F2F
keyword, storage.type, storage.modifier#000000
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#000000
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter#000000
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method#000000
meta.block variable.other#212121
support.other.variable, string.other.link#616161
constant.numeric, constant.language, support.constant, constant.character, constant.escape, variable.parameter, keyword.other.unit, keyword.other#424242
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#004D40
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#333333
support.type#212121
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#000000
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#212121
variable.language#000000italic
entity.name.method.js#000000italic
meta.class-method.js entity.name.function.js, variable.function.constructor#000000
entity.other.attribute-name#333333
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name#000000italic
entity.other.attribute-name.class#000000
source.sass keyword.control#000000
markup.inserted#4CAF50
markup.deleted#D32F2F
markup.changed#FF9800
string.regexp#000000
constant.character.escape#333333
*url*, *link*, *uri*underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#000000italic
source.js constant.other.object.key.js string.unquoted.label.js#000000italic
source.json meta.structure.dictionary.json support.type.property-name.json#000000
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#212121
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#333333
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#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 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#212121
text.html.markdown markup.inline.raw.markdown#000000
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown#333333
markdown.heading, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown#000000
markup.italic#424242italic
markup.bold, markup.bold string#212121bold
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#212121bold italic
markup.underline#000000underline
markup.quote punctuation.definition.blockquote.markdown#424242
markup.quote#757575italic
string.other.link.title.markdown#000000
string.other.link.description.title.markdown#212121
constant.other.reference.link.markdown#424242
markup.raw.block#000000
markup.raw.block.fenced.markdown#333333
punctuation.definition.fenced.markdown#000000
markup.raw.block.fenced.markdown, variable.language.fenced.markdown, punctuation.section.class.end#333333
variable.language.fenced.markdown#000000
meta.separator#000000bold
markup.table#333333

Shiki preview

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

Loading...

Corinthians Themes by FelipeSantos92Dev - VS Code Theme