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#5a93aa
  • activityBar.background#0f1c1e
  • activityBar.border#0f1c1e
  • activityBar.dropBorder#5a93aa
  • activityBar.foreground#e6eaea
  • activityBar.inactiveForeground#587b7b
  • activityBarBadge.background#5a93aa
  • activityBarBadge.foreground#0f1c1e
  • badge.background#5a93aa
  • badge.foreground#0f1c1e
  • breadcrumb.activeSelectionForeground#eaeeee
  • breadcrumb.focusForeground#e6eaea
  • breadcrumb.foreground#587b7b
  • breadcrumbPicker.background#0f1c1e
  • button.background#5a93aa
  • button.foreground#0f1c1e
  • button.hoverBackground#4d7d90
  • button.secondaryBackground#254147
  • button.secondaryForeground#e6eaea
  • button.secondaryHoverBackground#2d4f56
  • charts.blue#5a93aa
  • charts.foreground#e6eaea
  • charts.green#7aa4a1
  • charts.lines#2d4f56
  • charts.orange#ff8349
  • charts.purple#ad5c7c
  • charts.red#e85c51
  • charts.yellow#fda47f
  • checkbox.background#1d3337
  • checkbox.border#2d4f56
  • checkbox.foreground#e6eaea
  • debugConsole.errorForeground#e85c51
  • debugConsole.infoForeground#cbd9d8
  • debugConsole.sourceForeground#fda47f
  • debugConsole.warningForeground#fda47f
  • debugConsoleInputIcon.foreground#7aa4a1
  • debugIcon.breakpointDisabledForeground#587b7b
  • debugIcon.breakpointForeground#e85c51
  • debugToolBar.background#0f1c1e
  • debugToolBar.border#2d4f56
  • descriptionForeground#587b7b
  • diffEditor.diagonalFill#2d4f56
  • diffEditor.insertedLineBackground#7aa4a11a
  • diffEditor.insertedTextBackground#7aa4a122
  • diffEditor.removedLineBackground#e85c511a
  • diffEditor.removedTextBackground#e85c5122
  • disabledForeground#587b7b
  • dropdown.background#1d3337
  • dropdown.border#2d4f56
  • dropdown.foreground#e6eaea
  • dropdown.listBackground#1d3337
  • editor.background#152528
  • editor.findMatchBackground#fda47f44
  • editor.findMatchHighlightBackground#fda47f22
  • editor.findRangeHighlightBackground#293e4080
  • editor.focusedStackFrameHighlightBackground#7aa4a122
  • editor.foreground#e6eaea
  • editor.hoverHighlightBackground#5a93aa33
  • editor.inactiveSelectionBackground#293e40
  • editor.lineHighlightBackground#1d3337
  • editor.rangeHighlightBackground#1d333780
  • editor.selectionBackground#425e5e
  • editor.selectionHighlightBackground#293e4080
  • editor.stackFrameHighlightBackground#fda47f22
  • editor.wordHighlightBackground#5a93aa26
  • editor.wordHighlightStrongBackground#a1cdd826
  • editorBracketHighlight.foreground1#fda47f
  • editorBracketHighlight.foreground2#5a93aa
  • editorBracketHighlight.foreground3#ad5c7c
  • editorBracketHighlight.foreground4#a1cdd8
  • editorBracketHighlight.foreground5#7aa4a1
  • editorBracketHighlight.foreground6#ff8349
  • editorBracketHighlight.unexpectedBracket.foreground#e85c51
  • editorBracketMatch.background#5a93aa33
  • editorBracketMatch.border#5a93aa00
  • editorCodeLens.foreground#6d7f8b
  • editorCursor.foreground#587b7b
  • editorError.foreground#e85c51
  • editorGhostText.foreground#587b7b
  • editorGroup.border#0f1c1e
  • editorGroup.dropBackground#5a93aa33
  • editorGroupHeader.noTabsBackground#0f1c1e
  • editorGroupHeader.tabsBackground#0f1c1e
  • editorGroupHeader.tabsBorder#0f1c1e
  • editorGutter.addedBackground#7aa4a1
  • editorGutter.background#152528
  • editorGutter.deletedBackground#e85c51
  • editorGutter.modifiedBackground#5a93aa
  • editorHint.foreground#7aa4a1
  • editorHoverWidget.background#0f1c1e
  • editorHoverWidget.border#2d4f56
  • editorHoverWidget.foreground#e6eaea
  • editorIndentGuide.activeBackground1#2d4f56
  • editorIndentGuide.background1#1d3337
  • editorInfo.foreground#5a93aa
  • editorLineNumber.activeForeground#cbd9d8
  • editorLineNumber.foreground#2d4f56
  • editorLink.activeForeground#5a93aa
  • editorOverviewRuler.addedForeground#7aa4a1
  • editorOverviewRuler.border#0f1c1e
  • editorOverviewRuler.deletedForeground#e85c51
  • editorOverviewRuler.errorForeground#e85c51
  • editorOverviewRuler.findMatchForeground#fda47f88
  • editorOverviewRuler.infoForeground#5a93aa
  • editorOverviewRuler.modifiedForeground#5a93aa
  • editorOverviewRuler.warningForeground#fda47f
  • editorRuler.foreground#1d3337
  • editorSuggestWidget.background#0f1c1e
  • editorSuggestWidget.border#2d4f56
  • editorSuggestWidget.foreground#e6eaea
  • editorSuggestWidget.highlightForeground#5a93aa
  • editorSuggestWidget.selectedBackground#293e40
  • editorUnnecessaryCode.opacity#00000080
  • editorWarning.foreground#fda47f
  • editorWhitespace.foreground#2d4f56
  • editorWidget.background#0f1c1e
  • editorWidget.border#2d4f56
  • editorWidget.foreground#e6eaea
  • errorForeground#e85c51
  • extensionBadge.remoteBackground#5a93aa
  • extensionBadge.remoteForeground#0f1c1e
  • extensionButton.prominentBackground#5a93aa
  • extensionButton.prominentForeground#0f1c1e
  • extensionButton.prominentHoverBackground#4d7d90
  • extensionIcon.starForeground#fda47f
  • extensionIcon.verifiedForeground#7aa4a1
  • focusBorder#5a93aa00
  • foreground#cbd9d8
  • gitDecoration.conflictingResourceForeground#ff8349
  • gitDecoration.deletedResourceForeground#e85c51
  • gitDecoration.ignoredResourceForeground#587b7b
  • gitDecoration.modifiedResourceForeground#5a93aa
  • gitDecoration.stageDeletedResourceForeground#cb7985
  • gitDecoration.stageModifiedResourceForeground#a1cdd8
  • gitDecoration.submoduleResourceForeground#a1cdd8
  • gitDecoration.untrackedResourceForeground#7aa4a1
  • icon.foreground#cbd9d8
  • input.background#0f1c1e
  • input.border#2d4f56
  • input.foreground#e6eaea
  • input.placeholderForeground#587b7b
  • inputOption.activeBackground#5a93aa33
  • inputOption.activeBorder#5a93aa
  • inputOption.activeForeground#eaeeee
  • inputValidation.errorBackground#0f1c1e
  • inputValidation.errorBorder#e85c51
  • inputValidation.errorForeground#e85c51
  • inputValidation.infoBackground#0f1c1e
  • inputValidation.infoBorder#5a93aa
  • inputValidation.infoForeground#5a93aa
  • inputValidation.warningBackground#0f1c1e
  • inputValidation.warningBorder#fda47f
  • inputValidation.warningForeground#fda47f
  • list.activeSelectionBackground#293e40
  • list.activeSelectionForeground#eaeeee
  • list.dropBackground#5a93aa33
  • list.errorForeground#e85c51
  • list.focusBackground#293e40
  • list.focusForeground#eaeeee
  • list.highlightForeground#5a93aa
  • list.hoverBackground#1d333780
  • list.hoverForeground#eaeeee
  • list.inactiveSelectionBackground#1d3337
  • list.inactiveSelectionForeground#e6eaea
  • list.invalidItemForeground#e85c51
  • list.warningForeground#fda47f
  • listFilterWidget.background#1d3337
  • listFilterWidget.noMatchesOutline#e85c51
  • listFilterWidget.outline#5a93aa
  • menu.background#0f1c1e
  • menu.border#2d4f56
  • menu.foreground#e6eaea
  • menu.selectionBackground#293e40
  • menu.selectionForeground#eaeeee
  • menu.separatorBackground#2d4f56
  • menubar.selectionBackground#293e40
  • menubar.selectionForeground#eaeeee
  • merge.border#2d4f56
  • merge.currentContentBackground#5a93aa33
  • merge.currentHeaderBackground#5a93aa66
  • merge.incomingContentBackground#7aa4a133
  • merge.incomingHeaderBackground#7aa4a166
  • notificationCenterHeader.background#0f1c1e
  • notificationCenterHeader.foreground#e6eaea
  • notificationLink.foreground#5a93aa
  • notifications.background#0f1c1e
  • notifications.border#2d4f56
  • notifications.foreground#e6eaea
  • notificationsErrorIcon.foreground#e85c51
  • notificationsInfoIcon.foreground#5a93aa
  • notificationsWarningIcon.foreground#fda47f
  • panel.background#152528
  • panel.border#0f1c1e
  • panelInput.border#2d4f56
  • panelTitle.activeBorder#5a93aa
  • panelTitle.activeForeground#eaeeee
  • panelTitle.inactiveForeground#587b7b
  • peekView.border#5a93aa
  • peekViewEditor.background#0f1c1e
  • peekViewEditor.matchHighlightBackground#fda47f44
  • peekViewResult.background#0f1c1e
  • peekViewResult.foreground#cbd9d8
  • peekViewResult.matchHighlightBackground#fda47f44
  • peekViewResult.selectionBackground#293e40
  • peekViewResult.selectionForeground#eaeeee
  • peekViewTitle.background#0f1c1e
  • peekViewTitleDescription.foreground#587b7b
  • peekViewTitleLabel.foreground#eaeeee
  • pickerGroup.border#2d4f56
  • pickerGroup.foreground#5a93aa
  • problemsErrorIcon.foreground#e85c51
  • problemsInfoIcon.foreground#5a93aa
  • problemsWarningIcon.foreground#fda47f
  • progressBar.background#5a93aa
  • quickInput.background#0f1c1e
  • quickInput.foreground#e6eaea
  • quickInputList.focusBackground#293e40
  • sash.hoverBorder#5a93aa
  • scrollbar.shadow#00000059
  • scrollbarSlider.activeBackground#2d4f56cc
  • scrollbarSlider.background#2d4f5666
  • scrollbarSlider.hoverBackground#2d4f5699
  • selection.background#425e5e
  • settings.checkboxBackground#1d3337
  • settings.dropdownBackground#1d3337
  • settings.dropdownForeground#e6eaea
  • settings.headerForeground#eaeeee
  • settings.modifiedItemIndicator#5a93aa
  • settings.numberInputBackground#0f1c1e
  • settings.textInputBackground#0f1c1e
  • sideBar.background#0f1c1e
  • sideBar.border#0f1c1e
  • sideBar.foreground#cbd9d8
  • sideBarSectionHeader.background#0f1c1e
  • sideBarSectionHeader.border#0f1c1e
  • sideBarSectionHeader.foreground#e6eaea
  • sideBarTitle.foreground#cbd9d8
  • statusBar.background#0f1c1e
  • statusBar.border#0f1c1e
  • statusBar.debuggingBackground#ff8349
  • statusBar.debuggingForeground#0f1c1e
  • statusBar.foreground#cbd9d8
  • statusBar.noFolderBackground#0f1c1e
  • statusBar.noFolderForeground#cbd9d8
  • statusBarItem.activeBackground#cbd9d822
  • statusBarItem.errorBackground#0f1c1e
  • statusBarItem.errorForeground#e85c51
  • statusBarItem.hoverBackground#cbd9d81a
  • statusBarItem.prominentBackground#1d3337
  • statusBarItem.prominentHoverBackground#254147
  • statusBarItem.remoteBackground#5a93aa
  • statusBarItem.remoteForeground#0f1c1e
  • statusBarItem.warningBackground#0f1c1e
  • statusBarItem.warningForeground#fda47f
  • symbolIcon.classForeground#fda47f
  • symbolIcon.colorForeground#a1cdd8
  • symbolIcon.constantForeground#ff8349
  • symbolIcon.enumeratorForeground#fda47f
  • symbolIcon.functionForeground#4d7d90
  • symbolIcon.interfaceForeground#fda47f
  • symbolIcon.keywordForeground#ad5c7c
  • symbolIcon.methodForeground#4d7d90
  • symbolIcon.propertyForeground#a1cdd8
  • symbolIcon.variableForeground#e6eaea
  • tab.activeBackground#152528
  • tab.activeBorder#152528
  • tab.activeBorderTop#5a93aa
  • tab.activeForeground#eaeeee
  • tab.activeModifiedBorder#fda47f
  • tab.border#0f1c1e
  • tab.hoverBackground#152528
  • tab.hoverForeground#eaeeee
  • tab.inactiveBackground#0f1c1e
  • tab.inactiveForeground#587b7b
  • tab.inactiveModifiedBorder#fda47f80
  • tab.lastPinnedBorder#2d4f56
  • tab.unfocusedActiveForeground#cbd9d8
  • tab.unfocusedInactiveForeground#587b7b
  • terminal.ansiBlack#2f3239
  • terminal.ansiBlue#5a93aa
  • terminal.ansiBrightBlack#4e5157
  • terminal.ansiBrightBlue#73a3b7
  • terminal.ansiBrightCyan#afd4de
  • terminal.ansiBrightGreen#8eb2af
  • terminal.ansiBrightMagenta#b97490
  • terminal.ansiBrightRed#eb746b
  • terminal.ansiBrightWhite#eeeeee
  • terminal.ansiBrightYellow#fdb292
  • terminal.ansiCyan#a1cdd8
  • terminal.ansiGreen#7aa4a1
  • terminal.ansiMagenta#ad5c7c
  • terminal.ansiRed#e85c51
  • terminal.ansiWhite#ebebeb
  • terminal.ansiYellow#fda47f
  • terminal.background#152528
  • terminal.foreground#e6eaea
  • terminal.selectionBackground#425e5e
  • terminalCursor.foreground#587b7b
  • testing.iconErrored#e85c51
  • testing.iconFailed#e85c51
  • testing.iconPassed#7aa4a1
  • testing.iconSkipped#fda47f
  • textBlockQuote.background#0f1c1e
  • textBlockQuote.border#2d4f56
  • textCodeBlock.background#0f1c1e
  • textLink.activeForeground#a1cdd8
  • textLink.foreground#5a93aa
  • textPreformat.foreground#ff8349
  • textSeparator.foreground#2d4f56
  • titleBar.activeBackground#0f1c1e
  • titleBar.activeForeground#cbd9d8
  • titleBar.border#0f1c1e
  • titleBar.inactiveBackground#0f1c1e
  • titleBar.inactiveForeground#587b7b
  • tree.indentGuidesStroke#2d4f56
  • walkThrough.embeddedEditorBackground#0f1c1e
  • welcomePage.progress.foreground#5a93aa
  • welcomePage.tileBackground#0f1c1e
  • welcomePage.tileHoverBackground#1d3337
  • widget.shadow#00000059

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#6d7f8bitalic
variable, string constant.other.placeholder#e6eaea
constant.other.color#e6eaea
invalid, invalid.illegal#e85c51
keyword, storage.type, storage.modifier, keyword.operator.word, keyword.operator.new#ad5c7c
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#ad5c7c
keyword.operator, punctuation.accessor, punctuation.definition.generic#a1cdd8
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter#4d7d90
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method#4d7d90italic
meta.block variable.other#e6eaea
support.other.variable, string.other.link#e6eaea
constant.numeric, constant.language, support.constant, constant.character, constant.escape, keyword.other.unit, keyword.other.zero-index#ff8349
constant.language.boolean#fda47f
constant.numeric, variable.other.constant, entity.name.constant#fda47f
variable.parameter, meta.function.parameters#ad6771italic
constant.language, support.function.builtin, variable.language.this#e85c51
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#7aa4a1
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#fda47fitalic
meta.type, support.type, entity.name.type#fda47fitalic
storage.type#ad5c7c
entity.name.enum#fda47fitalic
meta.enum variable.other.readwrite, variable.other.enummember#a1cdd8
meta.property.object, variable.object.property, variable.other.object.property#a1cdd8
punctuation.definition.typeparameters, meta.type.parameters#afd4de
meta.decorator, punctuation.decorator, meta.annotation, storage.type.annotation#fda47f
entity.name.namespace#fda47f
keyword.control.directive, punctuation.definition.directive#fda47f
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#e85c51
variable.language#e85c51italic
entity.name.method.js#4d7d90italic
meta.class-method.js entity.name.function.js, variable.function.constructor#4d7d90
entity.other.attribute-name#fda47f
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name#fda47fitalic
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#a1cdd8
source.css entity.other.attribute-name.pseudo-class, punctuation.separator.operator.css#a1cdd8
source.css entity.other.attribute-name.class.css#fda47f
support.type.primitive, entity.name.type.numeric#ad5c7c
support.type.object, support.constant#ad5c7c
markup.inserted#7aa4a1
markup.deleted#e85c51
markup.changed#fda47f
meta.diff.header.from-file, meta.diff.header.to-file, punctuation.definition.from-file.diff, punctuation.definition.to-file.diff#4d7d90
string.regexp#a1cdd8
constant.character.escape#cbd9d8
*url*, *link*, *uri*#e6eaeaunderline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#4d7d90italic
source.js constant.other.object.key.js string.unquoted.label.js#ad5c7c
source.json meta.structure.dictionary.json support.type.property-name.json#4d7d90
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json support.type.property-name.json#ad5c7c
text.html.markdown, punctuation.definition.list_item.markdown#e6eaea
text.html.markdown markup.inline.raw.markdown#7aa4a1
text.html.markdown meta.dummy.line-break#6d7f8b
markdown.heading, markup.heading.markdown, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown#4d7d90
markup.italic#e85c51italic
markup.bold, markup.bold string#e85c51bold
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#e85c51bold
markup.underline#ff8349underline
markup.quote punctuation.definition.blockquote.markdown#cbd9d8
markup.quote#cbd9d8italic
string.other.link.title.markdown#5a93aa
string.other.link.description.title.markdown#ad5c7c
constant.other.reference.link.markdown#fda47f
markup.raw.block#ad5c7c
markup.fenced_code.block.markdown, markup.inline.raw.string.markdown#7aa4a1
meta.separator.markdown#a1cdd8
punctuation.definition.list.begin.markdown, markup.list#a1cdd8