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#719cd6
  • activityBar.background#131a24
  • activityBar.border#131a24
  • activityBar.dropBorder#719cd6
  • activityBar.foreground#cdcecf
  • activityBar.inactiveForeground#71839b
  • activityBarBadge.background#719cd6
  • activityBarBadge.foreground#131a24
  • badge.background#719cd6
  • badge.foreground#131a24
  • breadcrumb.activeSelectionForeground#d6d6d7
  • breadcrumb.focusForeground#cdcecf
  • breadcrumb.foreground#71839b
  • breadcrumbPicker.background#131a24
  • button.background#719cd6
  • button.foreground#131a24
  • button.hoverBackground#6085b6
  • button.secondaryBackground#29394f
  • button.secondaryForeground#cdcecf
  • button.secondaryHoverBackground#39506d
  • charts.blue#719cd6
  • charts.foreground#cdcecf
  • charts.green#81b29a
  • charts.lines#39506d
  • charts.orange#f4a261
  • charts.purple#9d79d6
  • charts.red#c94f6d
  • charts.yellow#dbc074
  • checkbox.background#212e3f
  • checkbox.border#39506d
  • checkbox.foreground#cdcecf
  • debugConsole.errorForeground#c94f6d
  • debugConsole.infoForeground#aeafb0
  • debugConsole.sourceForeground#dbc074
  • debugConsole.warningForeground#dbc074
  • debugConsoleInputIcon.foreground#81b29a
  • debugIcon.breakpointDisabledForeground#71839b
  • debugIcon.breakpointForeground#c94f6d
  • debugToolBar.background#131a24
  • debugToolBar.border#39506d
  • descriptionForeground#71839b
  • diffEditor.diagonalFill#39506d
  • diffEditor.insertedLineBackground#81b29a1a
  • diffEditor.insertedTextBackground#81b29a22
  • diffEditor.removedLineBackground#c94f6d1a
  • diffEditor.removedTextBackground#c94f6d22
  • disabledForeground#71839b
  • dropdown.background#212e3f
  • dropdown.border#39506d
  • dropdown.foreground#cdcecf
  • dropdown.listBackground#212e3f
  • editor.background#192330
  • editor.findMatchBackground#dbc07444
  • editor.findMatchHighlightBackground#dbc07422
  • editor.findRangeHighlightBackground#2b3b5180
  • editor.focusedStackFrameHighlightBackground#81b29a22
  • editor.foreground#cdcecf
  • editor.hoverHighlightBackground#719cd633
  • editor.inactiveSelectionBackground#2b3b51
  • editor.lineHighlightBackground#212e3f
  • editor.rangeHighlightBackground#212e3f80
  • editor.selectionBackground#3c5372
  • editor.selectionHighlightBackground#2b3b5180
  • editor.stackFrameHighlightBackground#dbc07422
  • editor.wordHighlightBackground#719cd626
  • editor.wordHighlightStrongBackground#63cdcf26
  • editorBracketHighlight.foreground1#dbc074
  • editorBracketHighlight.foreground2#719cd6
  • editorBracketHighlight.foreground3#9d79d6
  • editorBracketHighlight.foreground4#63cdcf
  • editorBracketHighlight.foreground5#81b29a
  • editorBracketHighlight.foreground6#f4a261
  • editorBracketHighlight.unexpectedBracket.foreground#c94f6d
  • editorBracketMatch.background#719cd633
  • editorBracketMatch.border#719cd600
  • editorCodeLens.foreground#738091
  • editorCursor.foreground#71839b
  • editorError.foreground#c94f6d
  • editorGhostText.foreground#71839b
  • editorGroup.border#131a24
  • editorGroup.dropBackground#719cd633
  • editorGroupHeader.noTabsBackground#131a24
  • editorGroupHeader.tabsBackground#131a24
  • editorGroupHeader.tabsBorder#131a24
  • editorGutter.addedBackground#81b29a
  • editorGutter.background#192330
  • editorGutter.deletedBackground#c94f6d
  • editorGutter.modifiedBackground#719cd6
  • editorHint.foreground#81b29a
  • editorHoverWidget.background#131a24
  • editorHoverWidget.border#39506d
  • editorHoverWidget.foreground#cdcecf
  • editorIndentGuide.activeBackground1#39506d
  • editorIndentGuide.background1#212e3f
  • editorInfo.foreground#719cd6
  • editorLineNumber.activeForeground#aeafb0
  • editorLineNumber.foreground#39506d
  • editorLink.activeForeground#719cd6
  • editorOverviewRuler.addedForeground#81b29a
  • editorOverviewRuler.border#131a24
  • editorOverviewRuler.deletedForeground#c94f6d
  • editorOverviewRuler.errorForeground#c94f6d
  • editorOverviewRuler.findMatchForeground#dbc07488
  • editorOverviewRuler.infoForeground#719cd6
  • editorOverviewRuler.modifiedForeground#719cd6
  • editorOverviewRuler.warningForeground#dbc074
  • editorRuler.foreground#212e3f
  • editorSuggestWidget.background#131a24
  • editorSuggestWidget.border#39506d
  • editorSuggestWidget.foreground#cdcecf
  • editorSuggestWidget.highlightForeground#719cd6
  • editorSuggestWidget.selectedBackground#2b3b51
  • editorUnnecessaryCode.opacity#00000080
  • editorWarning.foreground#dbc074
  • editorWhitespace.foreground#39506d
  • editorWidget.background#131a24
  • editorWidget.border#39506d
  • editorWidget.foreground#cdcecf
  • errorForeground#c94f6d
  • extensionBadge.remoteBackground#719cd6
  • extensionBadge.remoteForeground#131a24
  • extensionButton.prominentBackground#719cd6
  • extensionButton.prominentForeground#131a24
  • extensionButton.prominentHoverBackground#6085b6
  • extensionIcon.starForeground#dbc074
  • extensionIcon.verifiedForeground#81b29a
  • focusBorder#719cd600
  • foreground#aeafb0
  • gitDecoration.conflictingResourceForeground#f4a261
  • gitDecoration.deletedResourceForeground#c94f6d
  • gitDecoration.ignoredResourceForeground#71839b
  • gitDecoration.modifiedResourceForeground#719cd6
  • gitDecoration.stageDeletedResourceForeground#d67ad2
  • gitDecoration.stageModifiedResourceForeground#63cdcf
  • gitDecoration.submoduleResourceForeground#63cdcf
  • gitDecoration.untrackedResourceForeground#81b29a
  • icon.foreground#aeafb0
  • input.background#131a24
  • input.border#39506d
  • input.foreground#cdcecf
  • input.placeholderForeground#71839b
  • inputOption.activeBackground#719cd633
  • inputOption.activeBorder#719cd6
  • inputOption.activeForeground#d6d6d7
  • inputValidation.errorBackground#131a24
  • inputValidation.errorBorder#c94f6d
  • inputValidation.errorForeground#c94f6d
  • inputValidation.infoBackground#131a24
  • inputValidation.infoBorder#719cd6
  • inputValidation.infoForeground#719cd6
  • inputValidation.warningBackground#131a24
  • inputValidation.warningBorder#dbc074
  • inputValidation.warningForeground#dbc074
  • list.activeSelectionBackground#2b3b51
  • list.activeSelectionForeground#d6d6d7
  • list.dropBackground#719cd633
  • list.errorForeground#c94f6d
  • list.focusBackground#2b3b51
  • list.focusForeground#d6d6d7
  • list.highlightForeground#719cd6
  • list.hoverBackground#212e3f80
  • list.hoverForeground#d6d6d7
  • list.inactiveSelectionBackground#212e3f
  • list.inactiveSelectionForeground#cdcecf
  • list.invalidItemForeground#c94f6d
  • list.warningForeground#dbc074
  • listFilterWidget.background#212e3f
  • listFilterWidget.noMatchesOutline#c94f6d
  • listFilterWidget.outline#719cd6
  • menu.background#131a24
  • menu.border#39506d
  • menu.foreground#cdcecf
  • menu.selectionBackground#2b3b51
  • menu.selectionForeground#d6d6d7
  • menu.separatorBackground#39506d
  • menubar.selectionBackground#2b3b51
  • menubar.selectionForeground#d6d6d7
  • merge.border#39506d
  • merge.currentContentBackground#719cd633
  • merge.currentHeaderBackground#719cd666
  • merge.incomingContentBackground#81b29a33
  • merge.incomingHeaderBackground#81b29a66
  • notificationCenterHeader.background#131a24
  • notificationCenterHeader.foreground#cdcecf
  • notificationLink.foreground#719cd6
  • notifications.background#131a24
  • notifications.border#39506d
  • notifications.foreground#cdcecf
  • notificationsErrorIcon.foreground#c94f6d
  • notificationsInfoIcon.foreground#719cd6
  • notificationsWarningIcon.foreground#dbc074
  • panel.background#192330
  • panel.border#131a24
  • panelInput.border#39506d
  • panelTitle.activeBorder#719cd6
  • panelTitle.activeForeground#d6d6d7
  • panelTitle.inactiveForeground#71839b
  • peekView.border#719cd6
  • peekViewEditor.background#131a24
  • peekViewEditor.matchHighlightBackground#dbc07444
  • peekViewResult.background#131a24
  • peekViewResult.foreground#aeafb0
  • peekViewResult.matchHighlightBackground#dbc07444
  • peekViewResult.selectionBackground#2b3b51
  • peekViewResult.selectionForeground#d6d6d7
  • peekViewTitle.background#131a24
  • peekViewTitleDescription.foreground#71839b
  • peekViewTitleLabel.foreground#d6d6d7
  • pickerGroup.border#39506d
  • pickerGroup.foreground#719cd6
  • problemsErrorIcon.foreground#c94f6d
  • problemsInfoIcon.foreground#719cd6
  • problemsWarningIcon.foreground#dbc074
  • progressBar.background#719cd6
  • quickInput.background#131a24
  • quickInput.foreground#cdcecf
  • quickInputList.focusBackground#2b3b51
  • sash.hoverBorder#719cd6
  • scrollbar.shadow#00000059
  • scrollbarSlider.activeBackground#39506dcc
  • scrollbarSlider.background#39506d66
  • scrollbarSlider.hoverBackground#39506d99
  • selection.background#3c5372
  • settings.checkboxBackground#212e3f
  • settings.dropdownBackground#212e3f
  • settings.dropdownForeground#cdcecf
  • settings.headerForeground#d6d6d7
  • settings.modifiedItemIndicator#719cd6
  • settings.numberInputBackground#131a24
  • settings.textInputBackground#131a24
  • sideBar.background#131a24
  • sideBar.border#131a24
  • sideBar.foreground#aeafb0
  • sideBarSectionHeader.background#131a24
  • sideBarSectionHeader.border#131a24
  • sideBarSectionHeader.foreground#cdcecf
  • sideBarTitle.foreground#aeafb0
  • statusBar.background#131a24
  • statusBar.border#131a24
  • statusBar.debuggingBackground#f4a261
  • statusBar.debuggingForeground#131a24
  • statusBar.foreground#aeafb0
  • statusBar.noFolderBackground#131a24
  • statusBar.noFolderForeground#aeafb0
  • statusBarItem.activeBackground#aeafb022
  • statusBarItem.errorBackground#131a24
  • statusBarItem.errorForeground#c94f6d
  • statusBarItem.hoverBackground#aeafb01a
  • statusBarItem.prominentBackground#212e3f
  • statusBarItem.prominentHoverBackground#29394f
  • statusBarItem.remoteBackground#719cd6
  • statusBarItem.remoteForeground#131a24
  • statusBarItem.warningBackground#131a24
  • statusBarItem.warningForeground#dbc074
  • symbolIcon.classForeground#dbc074
  • symbolIcon.colorForeground#63cdcf
  • symbolIcon.constantForeground#f4a261
  • symbolIcon.enumeratorForeground#dbc074
  • symbolIcon.functionForeground#6085b6
  • symbolIcon.interfaceForeground#dbc074
  • symbolIcon.keywordForeground#9d79d6
  • symbolIcon.methodForeground#6085b6
  • symbolIcon.propertyForeground#63cdcf
  • symbolIcon.variableForeground#cdcecf
  • tab.activeBackground#192330
  • tab.activeBorder#192330
  • tab.activeBorderTop#719cd6
  • tab.activeForeground#d6d6d7
  • tab.activeModifiedBorder#dbc074
  • tab.border#131a24
  • tab.hoverBackground#192330
  • tab.hoverForeground#d6d6d7
  • tab.inactiveBackground#131a24
  • tab.inactiveForeground#71839b
  • tab.inactiveModifiedBorder#dbc07480
  • tab.lastPinnedBorder#39506d
  • tab.unfocusedActiveForeground#aeafb0
  • tab.unfocusedInactiveForeground#71839b
  • terminal.ansiBlack#393b44
  • terminal.ansiBlue#719cd6
  • terminal.ansiBrightBlack#575860
  • terminal.ansiBrightBlue#84a7dd
  • terminal.ansiBrightCyan#7ad5d6
  • terminal.ansiBrightGreen#8ebaa4
  • terminal.ansiBrightMagenta#b18cff
  • terminal.ansiBrightRed#d16983
  • terminal.ansiBrightWhite#e4e4e5
  • terminal.ansiBrightYellow#e0c989
  • terminal.ansiCyan#63cdcf
  • terminal.ansiGreen#81b29a
  • terminal.ansiMagenta#9d79d6
  • terminal.ansiRed#c94f6d
  • terminal.ansiWhite#dfdfe0
  • terminal.ansiYellow#dbc074
  • terminal.background#192330
  • terminal.foreground#cdcecf
  • terminal.selectionBackground#3c5372
  • terminalCursor.foreground#71839b
  • testing.iconErrored#c94f6d
  • testing.iconFailed#c94f6d
  • testing.iconPassed#81b29a
  • testing.iconSkipped#dbc074
  • textBlockQuote.background#131a24
  • textBlockQuote.border#39506d
  • textCodeBlock.background#131a24
  • textLink.activeForeground#63cdcf
  • textLink.foreground#719cd6
  • textPreformat.foreground#f4a261
  • textSeparator.foreground#39506d
  • titleBar.activeBackground#131a24
  • titleBar.activeForeground#aeafb0
  • titleBar.border#131a24
  • titleBar.inactiveBackground#131a24
  • titleBar.inactiveForeground#71839b
  • tree.indentGuidesStroke#39506d
  • walkThrough.embeddedEditorBackground#131a24
  • welcomePage.progress.foreground#719cd6
  • welcomePage.tileBackground#131a24
  • welcomePage.tileHoverBackground#212e3f
  • widget.shadow#00000059

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#738091italic
variable, string constant.other.placeholder#cdcecf
constant.other.color#cdcecf
invalid, invalid.illegal#c94f6d
keyword, storage.type, storage.modifier, keyword.operator.word, keyword.operator.new#9d79d6
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#9d79d6
keyword.operator, punctuation.accessor, punctuation.definition.generic#63cdcf
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter#6085b6
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method#6085b6italic
meta.block variable.other#cdcecf
support.other.variable, string.other.link#cdcecf
constant.numeric, constant.language, support.constant, constant.character, constant.escape, keyword.other.unit, keyword.other.zero-index#f4a261
constant.language.boolean#dbc074
constant.numeric, variable.other.constant, entity.name.constant#dbc074
variable.parameter, meta.function.parameters#b668b3italic
constant.language, support.function.builtin, variable.language.this#c94f6d
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#81b29a
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#dbc074italic
meta.type, support.type, entity.name.type#dbc074italic
storage.type#9d79d6
entity.name.enum#dbc074italic
meta.enum variable.other.readwrite, variable.other.enummember#63cdcf
meta.property.object, variable.object.property, variable.other.object.property#63cdcf
punctuation.definition.typeparameters, meta.type.parameters#7ad5d6
meta.decorator, punctuation.decorator, meta.annotation, storage.type.annotation#dbc074
entity.name.namespace#dbc074
keyword.control.directive, punctuation.definition.directive#dbc074
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#c94f6d
variable.language#c94f6ditalic
entity.name.method.js#6085b6italic
meta.class-method.js entity.name.function.js, variable.function.constructor#6085b6
entity.other.attribute-name#dbc074
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name#dbc074italic
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#63cdcf
source.css entity.other.attribute-name.pseudo-class, punctuation.separator.operator.css#63cdcf
source.css entity.other.attribute-name.class.css#dbc074
support.type.primitive, entity.name.type.numeric#9d79d6
support.type.object, support.constant#9d79d6
markup.inserted#81b29a
markup.deleted#c94f6d
markup.changed#dbc074
meta.diff.header.from-file, meta.diff.header.to-file, punctuation.definition.from-file.diff, punctuation.definition.to-file.diff#6085b6
string.regexp#63cdcf
constant.character.escape#aeafb0
*url*, *link*, *uri*#cdcecfunderline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#6085b6italic
source.js constant.other.object.key.js string.unquoted.label.js#9d79d6
source.json meta.structure.dictionary.json support.type.property-name.json#6085b6
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json support.type.property-name.json#9d79d6
text.html.markdown, punctuation.definition.list_item.markdown#cdcecf
text.html.markdown markup.inline.raw.markdown#81b29a
text.html.markdown meta.dummy.line-break#738091
markdown.heading, markup.heading.markdown, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown#6085b6
markup.italic#c94f6ditalic
markup.bold, markup.bold string#c94f6dbold
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#c94f6dbold
markup.underline#f4a261underline
markup.quote punctuation.definition.blockquote.markdown#aeafb0
markup.quote#aeafb0italic
string.other.link.title.markdown#719cd6
string.other.link.description.title.markdown#9d79d6
constant.other.reference.link.markdown#dbc074
markup.raw.block#9d79d6
markup.fenced_code.block.markdown, markup.inline.raw.string.markdown#81b29a
meta.separator.markdown#63cdcf
punctuation.definition.list.begin.markdown, markup.list#63cdcf