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

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#607D8Bitalic
comment.block.preprocessor#607D8B
comment.documentation, comment.block.documentation#81C784
invalid.illegal#E57373
keyword.operator#607D8B
keyword, storage#29ABE2
storage.type, support.type#7986CB
constant.language, support.constant, variable.language#A1887F
variable, support.variable#7986CB
entity.name.function, support.function#E57373bold
entity.name.type, entity.other.inherited-class, support.class#7986CBbold
entity.name.exception#E57373
entity.name.sectionbold
constant.numeric, constant.character, constant#A1887F
string#81C784
constant.character.escape#607D8B
string.regexp#29ABE2
constant.other.symbol#A1887F
punctuation#607D8B
meta.tag.sgml.doctype, meta.tag.sgml.doctype string, meta.tag.sgml.doctype entity.name.tag, meta.tag.sgml punctuation.definition.tag.html#607D8B
meta.tag, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html#91B3E0
entity.name.tag#29ABE2
meta.tag entity.other.attribute-name, entity.other.attribute-name.html#91B3E0italic
constant.character.entity, punctuation.definition.entity#A1887F
meta.selector, meta.selector entity, meta.selector entity punctuation, entity.name.tag.css#7986CB
meta.property-name, support.type.property-name#A1887F
meta.property-value, meta.property-value constant.other, support.constant.property-value#81C784
keyword.other.importantbold
markup.changed#607D8B
markup.deleted#607D8B
markup.italicitalic
markup.error#E57373
markup.inserted#607D8B
meta.link#29ABE2
markup.output, markup.raw#607D8B
markup.prompt#607D8B
markup.heading#E57373
markup.boldbold
markup.traceback#E57373
markup.underlineunderline
markup.quote#7986CB
markup.list#29ABE2
markup.bold, markup.italic#81C784
markup.inline.raw#A1887F
meta.diff.range, meta.diff.index, meta.separator#607D8B
meta.diff.header.from-file#607D8B
meta.diff.header.to-file#607D8B
Paysandu Themes by FelipeSantos92Dev - VS Code Theme