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#142139
  • activityBar.activeBorder#2fd9ff
  • activityBar.background#0a1120
  • activityBar.border#070b13
  • activityBar.foreground#2fd9ff
  • activityBar.inactiveForeground#5d7290
  • activityBarBadge.background#2fd9ff
  • activityBarBadge.foreground#06101f
  • badge.background#2fd9ff
  • badge.foreground#06101f
  • breadcrumb.activeSelectionForeground#2fd9ff
  • breadcrumb.background#0e1626
  • breadcrumb.focusForeground#8ba3c9
  • breadcrumb.foreground#586f96
  • breadcrumbPicker.background#0a1120
  • button.background#1a64d6
  • button.foreground#ffffff
  • button.hoverBackground#2470e8
  • button.secondaryBackground#24467d
  • charts.blue#5cb0ff
  • charts.foreground#d4e4ff
  • charts.green#5fd6a8
  • charts.lines#1c2c4a
  • charts.orange#ff9e64
  • charts.purple#b58bff
  • charts.red#ff5d73
  • charts.yellow#ffbe6b
  • debugConsole.errorForeground#ff5d73
  • debugConsole.infoForeground#5cb0ff
  • debugConsole.sourceForeground#d4e4ff
  • debugConsole.warningForeground#ffbe6b
  • debugConsoleInputIcon.foreground#5fd6a8
  • debugExceptionWidget.background#070b13
  • debugExceptionWidget.border#ff5d73
  • debugIcon.breakpointDisabledForeground#586f96
  • debugIcon.breakpointForeground#ff5d73
  • debugIcon.breakpointUnverifiedForeground#ffbe6b
  • debugTokenExpression.boolean#ffbe6b
  • debugTokenExpression.error#ff5d73
  • debugTokenExpression.name#5cb0ff
  • debugTokenExpression.number#ffbe6b
  • debugTokenExpression.string#5fd6a8
  • debugTokenExpression.value#d4e4ff
  • debugToolBar.background#070b13
  • debugView.stateLabelBackground#142139
  • debugView.stateLabelForeground#8ba3c9
  • debugView.valueChangedHighlight#3b9bffaa
  • descriptionForeground#8ba3c9
  • diffEditor.diagonalFill#1c2c4a
  • diffEditor.insertedLineBackground#5fd6a820
  • diffEditor.insertedTextBackground#5fd6a820
  • diffEditor.removedLineBackground#ff5d7322
  • diffEditor.removedTextBackground#ff5d7322
  • diffEditorGutter.insertedLineBackground#5fd6a825
  • diffEditorGutter.removedLineBackground#ff5d7322
  • diffEditorOverview.insertedForeground#5fd6a825
  • diffEditorOverview.removedForeground#ff5d7322
  • dropdown.background#0a1120
  • dropdown.foreground#d4e4ff
  • dropdown.listBackground#0a1120
  • editor.background#0e1626
  • editor.findMatchBackground#3b9bff66
  • editor.findMatchBorder#2fd9ff
  • editor.findMatchHighlightBackground#2fd9ff44
  • editor.findRangeHighlightBackground#26508c33
  • editor.focusedStackFrameHighlightBackground#5fd6a820
  • editor.foldBackground#14213933
  • editor.foreground#d4e4ff
  • editor.inactiveSelectionBackground#26508c40
  • editor.lineHighlightBackground#16203a
  • editor.rangeHighlightBackground#26508c22
  • editor.selectionBackground#26508c80
  • editor.selectionHighlightBackground#2f6fd040
  • editor.stackFrameHighlightBackground#ffbe6b20
  • editor.wordHighlightBackground#3b9bff33
  • editor.wordHighlightStrongBackground#3b9bff44
  • editorBracketHighlight.foreground1#5cb0ff
  • editorBracketHighlight.foreground2#2fd9ff
  • editorBracketHighlight.foreground3#b58bff
  • editorBracketHighlight.foreground4#5ad7e6
  • editorBracketHighlight.foreground5#5fd6a8
  • editorBracketHighlight.foreground6#ffbe6b
  • editorBracketHighlight.unexpectedBracket.foreground#ff5d73
  • editorBracketMatch.background#142139
  • editorBracketMatch.border#3b9bff
  • editorBracketPairGuide.activeBackground1#5cb0ff
  • editorBracketPairGuide.activeBackground2#2fd9ff
  • editorBracketPairGuide.activeBackground3#b58bff
  • editorBracketPairGuide.activeBackground4#5ad7e6
  • editorBracketPairGuide.activeBackground5#5fd6a8
  • editorBracketPairGuide.activeBackground6#ffbe6b
  • editorCodeLens.foreground#586f96
  • editorCursor.foreground#2fd9ff
  • editorError.foreground#ff5d73
  • editorGhostText.foreground#586f96
  • editorGroup.border#070b13
  • editorGroup.dropBackground#142139
  • editorGroupHeader.border#070b13
  • editorGroupHeader.noTabsBackground#0a1120
  • editorGroupHeader.tabsBackground#0a1120
  • editorGroupHeader.tabsBorder#070b13
  • editorGutter.addedBackground#5fd6a8
  • editorGutter.deletedBackground#ff5d73
  • editorGutter.modifiedBackground#3b9bff
  • editorHint.foreground#2fd9ff
  • editorHoverWidget.background#0a1120
  • editorHoverWidget.border#070b13
  • editorIndentGuide.activeBackground#2d3d5e
  • editorIndentGuide.background#16203a
  • editorInfo.foreground#2fd9ff
  • editorLightBulb.foreground#ffbe6b
  • editorLightBulbAutoFix.foreground#ffbe6b
  • editorLineNumber.activeForeground#7d93bd
  • editorLineNumber.foreground#586f96
  • editorLink.activeForeground#2fd9ff
  • editorOverviewRuler.addedForeground#5fd6a8
  • editorOverviewRuler.border#070b13
  • editorOverviewRuler.bracketMatchForeground#3b9bff
  • editorOverviewRuler.deletedForeground#ff5d73
  • editorOverviewRuler.errorForeground#ff5d73
  • editorOverviewRuler.findMatchForeground#2fd9ff
  • editorOverviewRuler.infoForeground#3b9bff
  • editorOverviewRuler.modifiedForeground#3b9bff
  • editorOverviewRuler.rangeHighlightForeground#3b9bff
  • editorOverviewRuler.selectionHighlightForeground#3b9bff
  • editorOverviewRuler.warningForeground#ffbe6b
  • editorOverviewRuler.wordHighlightForeground#8ba3c9
  • editorOverviewRuler.wordHighlightStrongForeground#d4e4ff
  • editorPane.background#0e1626
  • editorRuler.foreground#1c2c4a
  • editorSuggestWidget.background#0a1120
  • editorSuggestWidget.border#070b13
  • editorSuggestWidget.highlightForeground#2fd9ff
  • editorSuggestWidget.selectedBackground#18305a
  • editorWarning.foreground#ffbe6b
  • editorWhitespace.foreground#2b3a5a
  • editorWidget.background#0a1120
  • editorWidget.foreground#d4e4ff
  • editorWidget.resizeBorder#3b9bff66
  • errorForeground#ff5d73
  • extensionBadge.remoteBackground#2fd9ff
  • extensionBadge.remoteForeground#06101f
  • extensionButton.prominentBackground#1a64d6
  • extensionButton.prominentForeground#ffffff
  • extensionButton.prominentHoverBackground#2470e8
  • focusBorder#3b9bff66
  • foreground#d4e4ff
  • gitDecoration.addedResourceForeground#5fd6a8
  • gitDecoration.conflictingResourceForeground#ffbe6b
  • gitDecoration.deletedResourceForeground#ff5d73
  • gitDecoration.ignoredResourceForeground#586f96
  • gitDecoration.modifiedResourceForeground#5cb0ff
  • gitDecoration.renamedResourceForeground#5fd6a8
  • gitDecoration.stageDeletedResourceForeground#ff5d73
  • gitDecoration.stageModifiedResourceForeground#5cb0ff
  • gitDecoration.untrackedResourceForeground#5fd6a8
  • gitlens.gutterBackgroundColor#0a1120
  • gitlens.gutterForegroundColor#8ba3c9
  • gitlens.gutterUncommittedForegroundColor#5cb0ff
  • gitlens.trailingLineForegroundColor#586f96
  • icon.foreground#8ba3c9
  • input.background#0a1120
  • input.border#1c2c4a
  • input.foreground#d4e4ff
  • input.placeholderForeground#8ba3c9
  • inputOption.activeBackground#3b9bff33
  • inputOption.activeForeground#2fd9ff
  • inputValidation.errorBackground#7a2330
  • inputValidation.errorBorder#ff5d73
  • inputValidation.errorForeground#d4e4ff
  • inputValidation.infoBackground#1a64d655
  • inputValidation.infoBorder#3b9bff
  • inputValidation.infoForeground#d4e4ff
  • inputValidation.warningBackground#ffbe6b
  • inputValidation.warningBorder#ffbe6b
  • inputValidation.warningForeground#06101f
  • list.activeSelectionBackground#18305a
  • list.activeSelectionForeground#d4e4ff
  • list.deemphasizedForeground#5d7290
  • list.dropBackground#142139
  • list.errorForeground#ff5d73
  • list.focusBackground#18305a
  • list.focusForeground#d4e4ff
  • list.highlightForeground#2fd9ff
  • list.hoverBackground#142139
  • list.hoverForeground#d4e4ff
  • list.inactiveSelectionBackground#142139
  • list.inactiveSelectionForeground#d4e4ff
  • list.invalidItemForeground#ffbe6b
  • list.warningForeground#ffbe6b
  • listFilterWidget.background#142139
  • listFilterWidget.noMatchesOutline#ff5d73
  • listFilterWidget.outline#3b9bff
  • menu.background#0a1120
  • menu.border#070b13
  • menu.foreground#8ba3c9
  • menu.selectionBackground#18305a
  • menu.selectionForeground#d4e4ff
  • menu.separatorBackground#070b13
  • menubar.selectionBackground#142139
  • menubar.selectionBorder#3b9bff
  • menubar.selectionForeground#d4e4ff
  • merge.currentContentBackground#5fd6a818
  • merge.currentHeaderBackground#5fd6a825
  • merge.incomingContentBackground#3b9bff44
  • merge.incomingHeaderBackground#3b9bffaa
  • mergeEditor.change.background#5fd6a825
  • mergeEditor.change.word.background#5fd6a840
  • mergeEditor.conflict.handled.minimapOverViewRuler#5fd6a8
  • mergeEditor.conflict.handledFocused.border#5fd6a865
  • mergeEditor.conflict.handledUnfocused.border#5fd6a825
  • mergeEditor.conflict.unhandled.minimapOverViewRuler#ffbe6b
  • mergeEditor.conflict.unhandledFocused.border#ffbe6bb0
  • mergeEditor.conflict.unhandledUnfocused.border#ffbe6b88
  • minimapGutter.addedBackground#5fd6a8
  • minimapGutter.deletedBackground#ff5d73
  • minimapGutter.modifiedBackground#3b9bff
  • notebook.cellBorderColor#070b13
  • notebook.cellEditorBackground#0a1120
  • notebook.cellStatusBarItemHoverBackground#142139
  • notebook.editorBackground#0e1626
  • notebook.focusedCellBorder#3b9bff
  • notificationCenterHeader.background#070b13
  • notificationLink.foreground#5cb0ff
  • notifications.background#0a1120
  • notificationsErrorIcon.foreground#ff5d73
  • notificationsInfoIcon.foreground#2fd9ff
  • notificationsWarningIcon.foreground#ffbe6b
  • panel.background#0a1120
  • panel.border#070b13
  • panelInput.border#1c2c4a
  • panelTitle.activeBorder#2fd9ff
  • panelTitle.activeForeground#d4e4ff
  • panelTitle.inactiveForeground#5d7290
  • peekView.border#3b9bff
  • peekViewEditor.background#0a1120
  • peekViewEditor.matchHighlightBackground#3b9bff66
  • peekViewResult.background#070b13
  • peekViewResult.fileForeground#8ba3c9
  • peekViewResult.lineForeground#d4e4ff
  • peekViewResult.matchHighlightBackground#3b9bff66
  • peekViewResult.selectionBackground#18305a
  • peekViewResult.selectionForeground#d4e4ff
  • peekViewTitle.background#070b13
  • peekViewTitleDescription.foreground#8ba3c9
  • peekViewTitleLabel.foreground#d4e4ff
  • pickerGroup.border#070b13
  • pickerGroup.foreground#5cb0ff
  • progressBar.background#2fd9ff
  • sash.hoverBorder#3b9bff
  • scrollbar.shadow#00000066
  • scrollbarSlider.activeBackground#3b9bff55
  • scrollbarSlider.background#3b9bff22
  • scrollbarSlider.hoverBackground#3b9bff33
  • selection.background#26508c80
  • settings.headerForeground#5cb0ff
  • sideBar.background#0a1120
  • sideBar.border#070b13
  • sideBar.dropBackground#142139
  • sideBar.foreground#d4e4ff
  • sideBarSectionHeader.background#0a1120
  • sideBarSectionHeader.border#070b13
  • sideBarSectionHeader.foreground#5cb0ff
  • sideBarTitle.foreground#d4e4ff
  • statusBar.background#0a1120
  • statusBar.border#070b13
  • statusBar.debuggingBackground#1a64d6
  • statusBar.debuggingForeground#ffffff
  • statusBar.foreground#d4e4ff
  • statusBar.noFolderBackground#0a1120
  • statusBarItem.activeBackground#142139
  • statusBarItem.hoverBackground#142139
  • statusBarItem.prominentBackground#070b13
  • statusBarItem.prominentHoverBackground#142139
  • tab.activeBackground#0e1626
  • tab.activeBorder#2fd9ff
  • tab.activeForeground#d4e4ff
  • tab.activeModifiedBorder#3b9bff
  • tab.border#070b13
  • tab.hoverForeground#d4e4ff
  • tab.inactiveBackground#0a1120
  • tab.inactiveForeground#7488ad
  • tab.inactiveModifiedBorder#24467d
  • tab.lastPinnedBorder#1c2c4a
  • tab.unfocusedActiveBorder#24467d
  • tab.unfocusedActiveForeground#8ba3c9
  • tab.unfocusedHoverForeground#d4e4ff
  • tab.unfocusedInactiveForeground#5d7290
  • terminal.ansiBlack#1a2740
  • terminal.ansiBlue#5cb0ff
  • terminal.ansiBrightBlack#586f96
  • terminal.ansiBrightBlue#7cc3ff
  • terminal.ansiBrightCyan#7ce7ff
  • terminal.ansiBrightGreen#7ee7c0
  • terminal.ansiBrightMagenta#c7a6ff
  • terminal.ansiBrightRed#ff7d8f
  • terminal.ansiBrightWhite#d4e4ff
  • terminal.ansiBrightYellow#ffd194
  • terminal.ansiCyan#2fd9ff
  • terminal.ansiGreen#5fd6a8
  • terminal.ansiMagenta#b58bff
  • terminal.ansiRed#ff5d73
  • terminal.ansiWhite#8ba3c9
  • terminal.ansiYellow#ffbe6b
  • terminal.background#0a1120
  • terminal.foreground#d4e4ff
  • terminal.selectionBackground#26508c80
  • textBlockQuote.background#0a1120
  • textCodeBlock.background#0a1120
  • textLink.activeForeground#2fd9ff
  • textLink.foreground#5cb0ff
  • textPreformat.foreground#5ad7e6
  • textSeparator.foreground#1c2c4a
  • titleBar.activeBackground#0a1120
  • titleBar.activeForeground#d4e4ff
  • titleBar.border#070b13
  • titleBar.inactiveBackground#0a1120
  • titleBar.inactiveForeground#5d7290
  • toolbar.activeBackground#1c2c4a
  • toolbar.hoverBackground#142139
  • tree.indentGuidesStroke#1c2c4a
  • walkThrough.embeddedEditorBackground#0a1120
  • widget.shadow#00000066
  • window.activeBorder#070b13
  • window.inactiveBorder#070b13

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#5d7290italic
variable, string constant.other.placeholder#d4e4ff
constant.other.color#2fd9ff
invalid, invalid.illegal#ff5d73
keyword, storage.type, storage.modifier#b58bff
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#74dbff
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter#ff8aa0
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method#5cb0ff
meta.block variable.other#ff8aa0
support.other.variable, string.other.link#ff8aa0
constant.numeric, constant.language, support.constant, constant.character, constant.escape, variable.parameter, keyword.other.unit, keyword.other#ffbe6b
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#5fd6a8
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#5ad7e6
support.type#8ba3c9
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#8ba3c9
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#ff5d73
variable.language#ff5d73italic
entity.name.method.js#5cb0ffitalic
meta.class-method.js entity.name.function.js, variable.function.constructor#5cb0ff
entity.other.attribute-name#b58bff
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name#5ad7e6italic
entity.other.attribute-name.class#5ad7e6
source.sass keyword.control#5cb0ff
markup.inserted#5fd6a8
markup.deleted#ff5d73
markup.changed#b58bff
string.regexp#74dbff
constant.character.escape#74dbff
*url*, *link*, *uri*underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#5cb0ffitalic
source.js constant.other.object.key.js string.unquoted.label.js#ff5d73italic
source.json meta.structure.dictionary.json support.type.property-name.json#b58bff
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#5ad7e6
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#ffbe6b
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#ff5d73
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#5fd6a8
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#5cb0ff
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 meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#ff8aa0
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 meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#b58bff
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 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#5fd6a8
text.html.markdown, punctuation.definition.list_item.markdown#d4e4ff
text.html.markdown markup.inline.raw.markdown#b58bff
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown#8ba3c9
markdown.heading, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown#5fd6a8
markup.italic#ff8aa0italic
markup.bold, markup.bold string#ff8aa0bold
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#ff8aa0bold
markup.underline#ffbe6bunderline
markup.quote punctuation.definition.blockquote.markdown#5d7290
markup.quoteitalic
string.other.link.title.markdown#5cb0ff
string.other.link.description.title.markdown#b58bff
constant.other.reference.link.markdown#ffbe6b
markup.raw.block#b58bff
markup.raw.block.fenced.markdown#8ba3c9
punctuation.definition.fenced.markdown#5d7290
markup.raw.block.fenced.markdown, variable.language.fenced.markdown, punctuation.section.class.end#d4e4ff
variable.language.fenced.markdown#5d7290
meta.separator#5d7290bold
markup.table#d4e4ff
Tesseract by Endurance the Martian 👽 - VS Code Theme