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.

  • actionBar.toggledBackground#00000011
  • activityBar.background#56B1C9
  • activityBar.foreground#FFFFFF
  • activityBarBadge.background#F19DAF
  • activityBarBadge.foreground#FFFFFF
  • badge.background#F19DAF
  • badge.foreground#FFFFFF
  • breadcrumb.activeSelectionForeground#9FB4C5
  • breadcrumb.focusForeground#9FB4C5
  • breadcrumb.foreground#5F7690
  • breadcrumb.separatorForeground#5F7690
  • button.background#56B1C9
  • button.foreground#FFFFFF
  • button.hoverBackground#6595CF
  • button.secondaryBackground#F7F9FB
  • button.secondaryForeground#2E4F66
  • button.secondaryHoverBackground#B5E0F3
  • commandCenter.activeBorder#00000000
  • commandCenter.activeForeground#FFFFFF
  • commandCenter.border#00000000
  • commandCenter.foreground#FFFFFF
  • commandCenter.hoverBorder#00000000
  • commandCenter.inactiveBorder#00000000
  • commandCenter.inactiveForeground#FFFFFF
  • descriptionForeground#2E4F66
  • disabledForeground#FFFFFF66
  • dropdown.background#F7F9FB
  • dropdown.border#B5E0F3
  • dropdown.foreground#2E4F66
  • editor.background#EEFFFE
  • editor.findMatchBackground#B5E0F433
  • editor.findMatchBorder#6595CF
  • editor.findMatchHighlightBackground#B5E0F433
  • editor.findRangeHighlightBackground#B5E0F433
  • editor.foldBackground#3999B31A
  • editor.foreground#2E4F66
  • editor.inactiveSelectionBackground#D5EFEE
  • editor.lineHighlightBackground#B5E0F326
  • editor.linkedEditingBackground#B5E0F340
  • editor.selectionBackground#B5E0F433
  • editor.selectionHighlightBackground#B5E0F433
  • editor.selectionHighlightBorder#B5E0F366
  • editor.wordHighlightBackground#B5E0F433
  • editor.wordHighlightStrongBackground#B5E0F433
  • editorCursor.foreground#56B1C9
  • editorGroup.border#B5E0F3
  • editorGroupHeader.noTabsBackground#E4F9F7
  • editorGroupHeader.tabsBackground#E4F9F7
  • editorGroupHeader.tabsBorder#B5E0F3
  • editorHoverWidget.background#FFFFFF
  • editorHoverWidget.border#FFFFFF
  • editorHoverWidget.foreground#2E4F66
  • editorHoverWidget.statusBarBackground#FFFFFF
  • editorIndentGuide.activeBackground1#5F7690
  • editorIndentGuide.background1#B5E0F3
  • editorLineNumber.activeForeground#637BB1
  • editorLineNumber.foreground#9FB4C5
  • editorOverviewRuler.border#00000000
  • editorStickyScroll.shadow#2F6E7E26
  • editorStickyScrollHover.background#3999B31A
  • editorWhitespace.foreground#B5E0F3
  • editorWidget.background#EEFFFE
  • editorWidget.foreground#2E4F66
  • explorer.decorations.ignoredForeground#9FB4C5
  • extensionButton.background#56B1C9
  • extensionButton.foreground#FFFFFF
  • extensionButton.hoverBackground#6595CF
  • extensionButton.prominentBackground#56B1C9
  • extensionButton.prominentForeground#FFFFFF
  • extensionButton.prominentHoverBackground#6595CF
  • focusBorder#6595CF
  • foreground#56B1C9
  • gitDecoration.ignoredResourceForeground#9FB4C5
  • icon.foreground#56B1C9
  • input.background#F5FFFE
  • input.border#F5FFFE
  • input.foreground#2E4F66
  • input.placeholderForeground#9FB4C5
  • keybindingTable.rowsBackground#2F6E7E26
  • list.activeSelectionBackground#EEFFFE
  • list.activeSelectionForeground#9FB4C5
  • list.activeSelectionIconForeground#46627B
  • list.focusBackground#B5E0F340
  • list.focusOutline#00000000
  • list.highlightForeground#56B1C9
  • list.hoverBackground#EEFFFE
  • list.hoverForeground#9FB4C5
  • list.iconForeground#5F7690
  • list.inactiveFocusOutline#00000000
  • list.inactiveSelectionBackground#B5E0F340
  • list.inactiveSelectionForeground#9FB4C5
  • list.inactiveSelectionIconForeground#5F7690
  • menu.selectionBackground#58DBFF33
  • menubar.selectionBackground#58DBFF33
  • notificationCenterHeader.background#B5E0F3
  • notifications.background#EEFFFE
  • notifications.border#B5E0F3
  • notifications.foreground#56B1C9
  • notificationsErrorIcon.foreground#F19DAF
  • notificationsInfoIcon.foreground#56B1C9
  • notificationsWarningIcon.foreground#F6BFC4
  • panel.background#E4F9F7
  • panel.border#B5E0F3
  • panelSectionHeader.background#2F6E7E26
  • panelTitle.activeBackground#E4F9F7
  • panelTitle.activeForeground#56B1C9
  • panelTitle.inactiveBackground#E4F9F7
  • panelTitle.inactiveForeground#9FB4C5
  • quickInput.background#EEFFFE
  • quickInput.foreground#2E4F66
  • quickInput.list.focusBackground#B5E0F366
  • quickInputList.focusIconForeground#46627B
  • scrollbar.shadow#5F769033
  • scrollbarSlider.activeBackground#B5E0F388
  • scrollbarSlider.background#B5E0F388
  • scrollbarSlider.hoverBackground#B5E0F388
  • sideBar.background#E4F9F7
  • sideBar.foreground#46627B
  • sideBarSectionHeader.background#EEFFFE
  • sideBarSectionHeader.border#00000000
  • sideBarSectionHeader.foreground#46627B
  • statusBar.background#56B1C9
  • statusBar.debuggingBackground#6595CF
  • statusBar.debuggingForeground#FFFFFF
  • statusBar.foreground#FFFFFF
  • statusBar.noFolderBackground#EEFFFE
  • statusBarItem.remoteBackground#6595CF
  • statusBarItem.remoteForeground#FFFFFF
  • tab.activeBackground#EEFFFE
  • tab.activeBorder#00000000
  • tab.activeBorderTop#00000000
  • tab.activeForeground#2E4F66
  • tab.border#B5E0F3
  • tab.editor-group-tab-background#E4F9F7
  • tab.hoverBackground#FFFFFF
  • tab.inactiveBackground#E4F9F7
  • tab.inactiveForeground#56B1C9
  • tab.unfocusedActiveBorder#00000000
  • tab.unfocusedActiveBorderTop#00000000
  • terminal.ansiBlack#CDB1C1
  • terminal.ansiBlue#637BB1
  • terminal.ansiBrightBlack#B5E0F3
  • terminal.ansiBrightBlue#56B1C9
  • terminal.ansiBrightCyan#B5E0F3
  • terminal.ansiBrightGreen#6595CF
  • terminal.ansiBrightMagenta#637BB1
  • terminal.ansiBrightRed#F19DAF
  • terminal.ansiBrightWhite#FFFFFF
  • terminal.ansiBrightYellow#F6BFC4
  • terminal.ansiCyan#B5E0F3
  • terminal.ansiGreen#56B1C9
  • terminal.ansiMagenta#6595CF
  • terminal.ansiRed#F19DAF
  • terminal.ansiWhite#F7F9FB
  • terminal.ansiYellow#F6BFC4
  • terminal.background#EEFFFE
  • terminal.foreground#2E4F66
  • terminalStickyScroll.background#E4F9F7
  • textCodeBlock.background#3999B31A
  • textLink.foreground#637BB1
  • textLink.hoverForeground#637BB1
  • titleBar.activeBackground#56B1C9
  • titleBar.activeForeground#FFFFFF
  • titleBar.inactiveBackground#56B1C9
  • titleBar.inactiveForeground#FFFFFF
  • toolbar.activeBackground#00000011
  • toolbar.activeForeground#2E4F66
  • toolbar.hoverBackground#00000011
  • toolbar.hoverForeground#2E4F66
  • tooltip.background#FFFFFF
  • tooltip.border#FFFFFF
  • tooltip.foreground#2E4F66
  • widget.shadow#5F769066

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, comment.line, comment.line.double-slash, punctuation.definition.comment#9FB4C5italic
keyword#3F6DA1—
keyword.control#5497C7—
keyword.operator#6B859C—
keyword.operator.assignment#637BB1—
storage, storage.type#3F6DA1—
constant, constant.numeric, constant.language, constant.character#E45C82—
string, string.quoted, string.regexp#EA7FA6—
variable, variable.parameter#2E4F66—
entity.name.function, support.function#2BAB91—
entity.name.type, entity.name.class, support.class#5497C7—
entity.other.attribute-name, meta.annotation#E45C82—
punctuation, operator#6B859C—
invalid, invalid.deprecated, invalid.illegal#F19DAF—
variable.other.property, variable.other.object.property, support.type.property-name#2BAB91—
entity.name.tag, support.class.component#5497C7—
variable.language, variable.language.this, variable.language.super#5497C7—
entity.name.type.module, support.other.module#5497C7—
text.html.derivative#2E4F66—
entity.name.tag, meta.tag.sgml, meta.tag.html, meta.tag.xml, meta.tag.other#5497C7—
entity.other.attribute-name, meta.tag.attribute, meta.tag.xml.attribute#2BAB91—
string.quoted.double.html, string.quoted.single.html, string.unquoted.html#EA7FA6—
punctuation.definition.tag.begin, punctuation.definition.tag.end, punctuation.definition.tag, punctuation.separator.key-value.html#6B859C—
meta.tag.sgml.doctype, comment.block.html#9FB4C5italic
entity.name.tag.js, entity.name.tag.tsx, support.class.component#5497C7—
entity.other.attribute-name.js, entity.other.attribute-name.tsx#2BAB91—
markup.heading, markup.heading.markdown, markup.heading.setext, entity.name.section.markdown#637BB1bold
markup.bold, markup.bold.markdown#E45C82bold
markup.italic, markup.italic.markdown#E45C82italic
string.other.link.title.markdown, markup.underline.link.markdown#5497C7underline
markup.underline.link, markup.underline.link.image.markdown, markup.underline.link.markdown, markup.link.url.markdown#5497C7—
markup.inline.raw.string.markdown, markup.raw.inline.markdown#EA7FA6—
markup.fenced_code.block.markdown, markup.raw.block.markdown, fenced_code.block.language, fenced_code.block.markdown#EA7FA6—
markup.quote, markup.quote.markdown#F7F9FBitalic
markup.list, markup.list.numbered, markup.list.unnumbered#6595CF—
meta.separator.markdown#6B859C—
comment.block.html.markdown#9FB4C5italic
punctuation.definition.heading.markdown, heading.1.markdown, markup.heading.markdown, markup.heading.setext.markdown, markup.heading.markdown#637BB1bold
punctuation.definition.list.begin.markdown#6595CF—
markup.list.unnumbered.markdown, markup.list.numbered.markdown#6595CF—
meta.object-literal.key, meta.object.member, meta.objectliteral, support.type.property-name, support.type.property-name.json#2BAB91—
variable.other.property, variable.other.property.js, variable.other.object.property, support.variable.property.dom, meta.property.object.js#2BAB91—
support.function, variable.function, variable.function.js, entity.name.function.member, meta.method-call#5497C7—
variable.other.object.js, variable.other.object.js.jsx#2E4F66—
support.class.promise.js, support.class.promise.ts#5497C7—
meta.diff.header.from-file, punctuation.definition.from-file.diff#E45C82bold
meta.diff.header.to-file, punctuation.definition.to-file.diff#56B1C9bold
meta.diff.range, meta.diff.index#B5E0F3—
markup.inserted.diff#56B1C9—
markup.deleted.diff#E45C82—
markup.changed.diff#EA7FA6—
meta.diff.context, meta.diff#6B859C—
punctuation.definition.range.diff#B5E0F3—
meta.diff.header, meta.separator.diff#637BB1—
punctuation.definition.inserted.diff#56B1C9—
support.function.misc.css, meta.function.variable.css#2BAB91—