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.activeBorder#78a9ff
  • activityBar.background#0c0c0c
  • activityBar.border#0c0c0c
  • activityBar.dropBorder#78a9ff
  • activityBar.foreground#f2f4f8
  • activityBar.inactiveForeground#7b7c7e
  • activityBarBadge.background#78a9ff
  • activityBarBadge.foreground#0c0c0c
  • badge.background#78a9ff
  • badge.foreground#0c0c0c
  • breadcrumb.activeSelectionForeground#f2f4f8
  • breadcrumb.focusForeground#f2f4f8
  • breadcrumb.foreground#7b7c7e
  • breadcrumbPicker.background#0c0c0c
  • button.background#78a9ff
  • button.foreground#0c0c0c
  • button.hoverBackground#6690d9
  • button.secondaryBackground#353535
  • button.secondaryForeground#f2f4f8
  • button.secondaryHoverBackground#535353
  • charts.blue#78a9ff
  • charts.foreground#f2f4f8
  • charts.green#25be6a
  • charts.lines#535353
  • charts.orange#3ddbd9
  • charts.purple#be95ff
  • charts.red#ee5396
  • charts.yellow#08bdba
  • checkbox.background#252525
  • checkbox.border#535353
  • checkbox.foreground#f2f4f8
  • debugConsole.errorForeground#ee5396
  • debugConsole.infoForeground#b6b8bb
  • debugConsole.sourceForeground#08bdba
  • debugConsole.warningForeground#08bdba
  • debugConsoleInputIcon.foreground#25be6a
  • debugIcon.breakpointDisabledForeground#7b7c7e
  • debugIcon.breakpointForeground#ee5396
  • debugToolBar.background#0c0c0c
  • debugToolBar.border#535353
  • descriptionForeground#7b7c7e
  • diffEditor.diagonalFill#535353
  • diffEditor.insertedLineBackground#25be6a1a
  • diffEditor.insertedTextBackground#25be6a22
  • diffEditor.removedLineBackground#ee53961a
  • diffEditor.removedTextBackground#ee539622
  • disabledForeground#7b7c7e
  • dropdown.background#252525
  • dropdown.border#535353
  • dropdown.foreground#f2f4f8
  • dropdown.listBackground#252525
  • editor.background#161616
  • editor.findMatchBackground#08bdba44
  • editor.findMatchHighlightBackground#08bdba22
  • editor.findRangeHighlightBackground#2a2a2a80
  • editor.focusedStackFrameHighlightBackground#25be6a22
  • editor.foreground#f2f4f8
  • editor.hoverHighlightBackground#78a9ff33
  • editor.inactiveSelectionBackground#2a2a2a
  • editor.lineHighlightBackground#252525
  • editor.rangeHighlightBackground#25252580
  • editor.selectionBackground#525253
  • editor.selectionHighlightBackground#2a2a2a80
  • editor.stackFrameHighlightBackground#08bdba22
  • editor.wordHighlightBackground#78a9ff26
  • editor.wordHighlightStrongBackground#33b1ff26
  • editorBracketHighlight.foreground1#08bdba
  • editorBracketHighlight.foreground2#78a9ff
  • editorBracketHighlight.foreground3#be95ff
  • editorBracketHighlight.foreground4#33b1ff
  • editorBracketHighlight.foreground5#25be6a
  • editorBracketHighlight.foreground6#3ddbd9
  • editorBracketHighlight.unexpectedBracket.foreground#ee5396
  • editorBracketMatch.background#78a9ff33
  • editorBracketMatch.border#78a9ff00
  • editorCodeLens.foreground#535353
  • editorCursor.foreground#7b7c7e
  • editorError.foreground#ee5396
  • editorGhostText.foreground#7b7c7e
  • editorGroup.border#0c0c0c
  • editorGroup.dropBackground#78a9ff33
  • editorGroupHeader.noTabsBackground#0c0c0c
  • editorGroupHeader.tabsBackground#0c0c0c
  • editorGroupHeader.tabsBorder#0c0c0c
  • editorGutter.addedBackground#25be6a
  • editorGutter.background#161616
  • editorGutter.deletedBackground#ee5396
  • editorGutter.modifiedBackground#78a9ff
  • editorHint.foreground#25be6a
  • editorHoverWidget.background#0c0c0c
  • editorHoverWidget.border#535353
  • editorHoverWidget.foreground#f2f4f8
  • editorIndentGuide.activeBackground1#535353
  • editorIndentGuide.background1#252525
  • editorInfo.foreground#78a9ff
  • editorLineNumber.activeForeground#b6b8bb
  • editorLineNumber.foreground#535353
  • editorLink.activeForeground#78a9ff
  • editorOverviewRuler.addedForeground#25be6a
  • editorOverviewRuler.border#0c0c0c
  • editorOverviewRuler.deletedForeground#ee5396
  • editorOverviewRuler.errorForeground#ee5396
  • editorOverviewRuler.findMatchForeground#08bdba88
  • editorOverviewRuler.infoForeground#78a9ff
  • editorOverviewRuler.modifiedForeground#78a9ff
  • editorOverviewRuler.warningForeground#08bdba
  • editorRuler.foreground#252525
  • editorSuggestWidget.background#0c0c0c
  • editorSuggestWidget.border#535353
  • editorSuggestWidget.foreground#f2f4f8
  • editorSuggestWidget.highlightForeground#78a9ff
  • editorSuggestWidget.selectedBackground#2a2a2a
  • editorUnnecessaryCode.opacity#00000080
  • editorWarning.foreground#08bdba
  • editorWhitespace.foreground#535353
  • editorWidget.background#0c0c0c
  • editorWidget.border#535353
  • editorWidget.foreground#f2f4f8
  • errorForeground#ee5396
  • extensionBadge.remoteBackground#78a9ff
  • extensionBadge.remoteForeground#0c0c0c
  • extensionButton.prominentBackground#78a9ff
  • extensionButton.prominentForeground#0c0c0c
  • extensionButton.prominentHoverBackground#6690d9
  • extensionIcon.starForeground#08bdba
  • extensionIcon.verifiedForeground#25be6a
  • focusBorder#78a9ff00
  • foreground#b6b8bb
  • gitDecoration.conflictingResourceForeground#3ddbd9
  • gitDecoration.deletedResourceForeground#ee5396
  • gitDecoration.ignoredResourceForeground#7b7c7e
  • gitDecoration.modifiedResourceForeground#78a9ff
  • gitDecoration.stageDeletedResourceForeground#ff7eb6
  • gitDecoration.stageModifiedResourceForeground#33b1ff
  • gitDecoration.submoduleResourceForeground#33b1ff
  • gitDecoration.untrackedResourceForeground#25be6a
  • icon.foreground#b6b8bb
  • input.background#0c0c0c
  • input.border#535353
  • input.foreground#f2f4f8
  • input.placeholderForeground#7b7c7e
  • inputOption.activeBackground#78a9ff33
  • inputOption.activeBorder#78a9ff
  • inputOption.activeForeground#f2f4f8
  • inputValidation.errorBackground#0c0c0c
  • inputValidation.errorBorder#ee5396
  • inputValidation.errorForeground#ee5396
  • inputValidation.infoBackground#0c0c0c
  • inputValidation.infoBorder#78a9ff
  • inputValidation.infoForeground#78a9ff
  • inputValidation.warningBackground#0c0c0c
  • inputValidation.warningBorder#08bdba
  • inputValidation.warningForeground#08bdba
  • list.activeSelectionBackground#2a2a2a
  • list.activeSelectionForeground#f2f4f8
  • list.dropBackground#78a9ff33
  • list.errorForeground#ee5396
  • list.focusBackground#2a2a2a
  • list.focusForeground#f2f4f8
  • list.highlightForeground#78a9ff
  • list.hoverBackground#25252580
  • list.hoverForeground#f2f4f8
  • list.inactiveSelectionBackground#252525
  • list.inactiveSelectionForeground#f2f4f8
  • list.invalidItemForeground#ee5396
  • list.warningForeground#08bdba
  • listFilterWidget.background#252525
  • listFilterWidget.noMatchesOutline#ee5396
  • listFilterWidget.outline#78a9ff
  • menu.background#0c0c0c
  • menu.border#535353
  • menu.foreground#f2f4f8
  • menu.selectionBackground#2a2a2a
  • menu.selectionForeground#f2f4f8
  • menu.separatorBackground#535353
  • menubar.selectionBackground#2a2a2a
  • menubar.selectionForeground#f2f4f8
  • merge.border#535353
  • merge.currentContentBackground#78a9ff33
  • merge.currentHeaderBackground#78a9ff66
  • merge.incomingContentBackground#25be6a33
  • merge.incomingHeaderBackground#25be6a66
  • notificationCenterHeader.background#0c0c0c
  • notificationCenterHeader.foreground#f2f4f8
  • notificationLink.foreground#78a9ff
  • notifications.background#0c0c0c
  • notifications.border#535353
  • notifications.foreground#f2f4f8
  • notificationsErrorIcon.foreground#ee5396
  • notificationsInfoIcon.foreground#78a9ff
  • notificationsWarningIcon.foreground#08bdba
  • panel.background#161616
  • panel.border#0c0c0c
  • panelInput.border#535353
  • panelTitle.activeBorder#78a9ff
  • panelTitle.activeForeground#f2f4f8
  • panelTitle.inactiveForeground#7b7c7e
  • peekView.border#78a9ff
  • peekViewEditor.background#0c0c0c
  • peekViewEditor.matchHighlightBackground#08bdba44
  • peekViewResult.background#0c0c0c
  • peekViewResult.foreground#b6b8bb
  • peekViewResult.matchHighlightBackground#08bdba44
  • peekViewResult.selectionBackground#2a2a2a
  • peekViewResult.selectionForeground#f2f4f8
  • peekViewTitle.background#0c0c0c
  • peekViewTitleDescription.foreground#7b7c7e
  • peekViewTitleLabel.foreground#f2f4f8
  • pickerGroup.border#535353
  • pickerGroup.foreground#78a9ff
  • problemsErrorIcon.foreground#ee5396
  • problemsInfoIcon.foreground#78a9ff
  • problemsWarningIcon.foreground#08bdba
  • progressBar.background#78a9ff
  • quickInput.background#0c0c0c
  • quickInput.foreground#f2f4f8
  • quickInputList.focusBackground#2a2a2a
  • sash.hoverBorder#78a9ff
  • scrollbar.shadow#00000059
  • scrollbarSlider.activeBackground#535353cc
  • scrollbarSlider.background#53535366
  • scrollbarSlider.hoverBackground#53535399
  • selection.background#525253
  • settings.checkboxBackground#252525
  • settings.dropdownBackground#252525
  • settings.dropdownForeground#f2f4f8
  • settings.headerForeground#f2f4f8
  • settings.modifiedItemIndicator#78a9ff
  • settings.numberInputBackground#0c0c0c
  • settings.textInputBackground#0c0c0c
  • sideBar.background#0c0c0c
  • sideBar.border#0c0c0c
  • sideBar.foreground#b6b8bb
  • sideBarSectionHeader.background#0c0c0c
  • sideBarSectionHeader.border#0c0c0c
  • sideBarSectionHeader.foreground#f2f4f8
  • sideBarTitle.foreground#b6b8bb
  • statusBar.background#0c0c0c
  • statusBar.border#0c0c0c
  • statusBar.debuggingBackground#3ddbd9
  • statusBar.debuggingForeground#0c0c0c
  • statusBar.foreground#b6b8bb
  • statusBar.noFolderBackground#0c0c0c
  • statusBar.noFolderForeground#b6b8bb
  • statusBarItem.activeBackground#b6b8bb22
  • statusBarItem.errorBackground#0c0c0c
  • statusBarItem.errorForeground#ee5396
  • statusBarItem.hoverBackground#b6b8bb1a
  • statusBarItem.prominentBackground#252525
  • statusBarItem.prominentHoverBackground#353535
  • statusBarItem.remoteBackground#78a9ff
  • statusBarItem.remoteForeground#0c0c0c
  • statusBarItem.warningBackground#0c0c0c
  • statusBarItem.warningForeground#08bdba
  • symbolIcon.classForeground#08bdba
  • symbolIcon.colorForeground#33b1ff
  • symbolIcon.constantForeground#3ddbd9
  • symbolIcon.enumeratorForeground#08bdba
  • symbolIcon.functionForeground#6690d9
  • symbolIcon.interfaceForeground#08bdba
  • symbolIcon.keywordForeground#be95ff
  • symbolIcon.methodForeground#6690d9
  • symbolIcon.propertyForeground#33b1ff
  • symbolIcon.variableForeground#f2f4f8
  • tab.activeBackground#161616
  • tab.activeBorder#161616
  • tab.activeBorderTop#78a9ff
  • tab.activeForeground#f2f4f8
  • tab.activeModifiedBorder#08bdba
  • tab.border#0c0c0c
  • tab.hoverBackground#161616
  • tab.hoverForeground#f2f4f8
  • tab.inactiveBackground#0c0c0c
  • tab.inactiveForeground#7b7c7e
  • tab.inactiveModifiedBorder#08bdba80
  • tab.lastPinnedBorder#535353
  • tab.unfocusedActiveForeground#b6b8bb
  • tab.unfocusedInactiveForeground#7b7c7e
  • terminal.ansiBlack#282828
  • terminal.ansiBlue#78a9ff
  • terminal.ansiBrightBlack#484848
  • terminal.ansiBrightBlue#8cb6ff
  • terminal.ansiBrightCyan#52bdff
  • terminal.ansiBrightGreen#46c880
  • terminal.ansiBrightMagenta#c8a5ff
  • terminal.ansiBrightRed#f16da6
  • terminal.ansiBrightWhite#e4e4e5
  • terminal.ansiBrightYellow#2dc7c4
  • terminal.ansiCyan#33b1ff
  • terminal.ansiGreen#25be6a
  • terminal.ansiMagenta#be95ff
  • terminal.ansiRed#ee5396
  • terminal.ansiWhite#dfdfe0
  • terminal.ansiYellow#08bdba
  • terminal.background#161616
  • terminal.foreground#f2f4f8
  • terminal.selectionBackground#525253
  • terminalCursor.foreground#7b7c7e
  • testing.iconErrored#ee5396
  • testing.iconFailed#ee5396
  • testing.iconPassed#25be6a
  • testing.iconSkipped#08bdba
  • textBlockQuote.background#0c0c0c
  • textBlockQuote.border#535353
  • textCodeBlock.background#0c0c0c
  • textLink.activeForeground#33b1ff
  • textLink.foreground#78a9ff
  • textPreformat.foreground#3ddbd9
  • textSeparator.foreground#535353
  • titleBar.activeBackground#0c0c0c
  • titleBar.activeForeground#b6b8bb
  • titleBar.border#0c0c0c
  • titleBar.inactiveBackground#0c0c0c
  • titleBar.inactiveForeground#7b7c7e
  • tree.indentGuidesStroke#535353
  • walkThrough.embeddedEditorBackground#0c0c0c
  • welcomePage.progress.foreground#78a9ff
  • welcomePage.tileBackground#0c0c0c
  • welcomePage.tileHoverBackground#252525
  • widget.shadow#00000059

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#535353italic
variable, string constant.other.placeholder#f2f4f8
constant.other.color#f2f4f8
invalid, invalid.illegal#ee5396
keyword, storage.type, storage.modifier, keyword.operator.word, keyword.operator.new#be95ff
keyword.control, constant.other.color, 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#be95ff
keyword.operator, punctuation.accessor, punctuation.definition.generic#33b1ff
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter#6690d9
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method#6690d9italic
meta.block variable.other#f2f4f8
support.other.variable, string.other.link#f2f4f8
constant.numeric, constant.language, support.constant, constant.character, constant.escape, keyword.other.unit, keyword.other.zero-index#3ddbd9
constant.language.boolean#08bdba
constant.numeric, variable.other.constant, entity.name.constant#08bdba
variable.parameter, meta.function.parameters#d96b9bitalic
constant.language, support.function.builtin, variable.language.this#ee5396
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#25be6a
entity.name.class, entity.name.type.class, support.type, support.class, support.other.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter, support.type.sys-types#08bdbaitalic
meta.type, support.type, entity.name.type#08bdbaitalic
storage.type#be95ff
entity.name.enum#08bdbaitalic
meta.enum variable.other.readwrite, variable.other.enummember#33b1ff
meta.property.object, variable.object.property, variable.other.object.property#33b1ff
punctuation.definition.typeparameters, meta.type.parameters#08bdba
meta.decorator, punctuation.decorator, meta.annotation, storage.type.annotation#08bdba
entity.name.namespace#08bdba
keyword.control.directive, punctuation.definition.directive#08bdba
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#ee5396
variable.language#ee5396italic
entity.name.method.js#6690d9italic
meta.class-method.js entity.name.function.js, variable.function.constructor#6690d9
entity.other.attribute-name#08bdba
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name#08bdbaitalic
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#33b1ff
source.css entity.other.attribute-name.pseudo-class, punctuation.separator.operator.css#33b1ff
source.css entity.other.attribute-name.class.css#08bdba
support.type.primitive, entity.name.type.numeric#be95ff
support.type.object, support.constant#be95ff
markup.inserted#25be6a
markup.deleted#ee5396
markup.changed#08bdba
meta.diff.header.from-file, meta.diff.header.to-file, punctuation.definition.from-file.diff, punctuation.definition.to-file.diff#6690d9
string.regexp#33b1ff
constant.character.escape#b6b8bb
*url*, *link*, *uri*#f2f4f8underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#6690d9italic
source.js constant.other.object.key.js string.unquoted.label.js#be95ff
source.json meta.structure.dictionary.json support.type.property-name.json#6690d9
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json support.type.property-name.json#be95ff
text.html.markdown, punctuation.definition.list_item.markdown#f2f4f8
text.html.markdown markup.inline.raw.markdown#25be6a
text.html.markdown meta.dummy.line-break#535353
markdown.heading, markup.heading.markdown, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown#6690d9
markup.italic#ee5396italic
markup.bold, markup.bold string#ee5396bold
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#ee5396bold
markup.underline#3ddbd9underline
markup.quote punctuation.definition.blockquote.markdown#b6b8bb
markup.quote#b6b8bbitalic
string.other.link.title.markdown#78a9ff
string.other.link.description.title.markdown#be95ff
constant.other.reference.link.markdown#08bdba
markup.raw.block#be95ff
markup.fenced_code.block.markdown, markup.inline.raw.string.markdown#25be6a
meta.separator.markdown#33b1ff
punctuation.definition.list.begin.markdown, markup.list#33b1ff