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#F19DAF
  • activityBar.foreground#FFFFFF
  • activityBarBadge.background#FFFFFF
  • activityBarBadge.foreground#F19DAF
  • badge.background#FFFFFF
  • badge.foreground#F19DAF
  • breadcrumb.activeSelectionForeground#BFA7B6
  • breadcrumb.focusForeground#BFA7B6
  • breadcrumb.foreground#9F8EA2
  • breadcrumb.separatorForeground#9F8EA2
  • button.background#637BB1
  • button.foreground#FFFFFF
  • button.hoverBackground#6595CF
  • button.secondaryBackground#F7F9FB
  • button.secondaryForeground#43384C
  • button.secondaryHoverBackground#F6BFC4
  • commandCenter.activeBorder#00000000
  • commandCenter.activeForeground#FFFFFF
  • commandCenter.border#00000000
  • commandCenter.foreground#FFFFFF
  • commandCenter.hoverBorder#00000000
  • commandCenter.inactiveBorder#00000000
  • commandCenter.inactiveForeground#FFFFFF
  • descriptionForeground#43384C
  • disabledForeground#FFFFFF66
  • dropdown.background#ffffff
  • dropdown.border#E0C2CE
  • dropdown.foreground#43384C
  • editor.background#FCFEFF
  • editor.findMatchBackground#F6BFC440
  • editor.findMatchBorder#637BB1
  • editor.findMatchHighlightBackground#F6BFC440
  • editor.findRangeHighlightBackground#F6BFC440
  • editor.foldBackground#EB708B1A
  • editor.foreground#43384C
  • editor.inactiveSelectionBackground#FFF6F7
  • editor.lineHighlightBackground#F7F9FB
  • editor.selectionBackground#F6BFC440
  • editor.selectionHighlightBackground#F6BFC440
  • editor.selectionHighlightBorder#F6BFC466
  • editor.wordHighlightBackground#F6BFC440
  • editor.wordHighlightStrongBackground#F6BFC440
  • editorCursor.foreground#F19DAF
  • editorGroup.border#F49EB033
  • editorGroupHeader.noTabsBackground#FFF6F7
  • editorGroupHeader.tabsBackground#FFF6F7
  • editorGroupHeader.tabsBorder#F49EB033
  • editorHoverWidget.background#FFFFFF
  • editorHoverWidget.border#FFFFFF
  • editorHoverWidget.foreground#43384C
  • editorHoverWidget.statusBarBackground#FFFFFF
  • editorIndentGuide.activeBackground1#9F8EA2
  • editorIndentGuide.background1#E6CFD9
  • editorLineNumber.activeForeground#637BB1
  • editorLineNumber.foreground#9F8EA2
  • editorOverviewRuler.border#00000000
  • editorStickyScroll.shadow#F19DAF33
  • editorStickyScrollHover.background#EB708B1A
  • editorWhitespace.foreground#E6CFD9
  • editorWidget.background#FCFEFF
  • editorWidget.foreground#43384C
  • explorer.decorations.ignoredForeground#BFA7B6
  • extensionButton.background#637BB1
  • extensionButton.foreground#FFFFFF
  • extensionButton.hoverBackground#6595CF
  • extensionButton.prominentBackground#F19DAF
  • extensionButton.prominentForeground#FFFFFF
  • extensionButton.prominentHoverBackground#F6BFC4
  • focusBorder#637BB1
  • foreground#4779B6
  • gitDecoration.ignoredResourceForeground#BFA7B6
  • icon.foreground#637BB1
  • input.background#FCFEFF
  • input.border#FCFEFF
  • input.foreground#43384C
  • input.placeholderForeground#CDB1C1
  • keybindingTable.rowsBackground#F19DAF33
  • list.activeSelectionBackground#FCFEFF
  • list.activeSelectionForeground#BFA7B6
  • list.activeSelectionIconForeground#716377
  • list.focusBackground#F19DAF33
  • list.focusOutline#00000000
  • list.highlightForeground#637BB1
  • list.hoverBackground#ffffff
  • list.hoverForeground#BFA7B6
  • list.iconForeground#9F8EA2
  • list.inactiveFocusOutline#00000000
  • list.inactiveSelectionBackground#F19DAF33
  • list.inactiveSelectionForeground#BFA7B6
  • list.inactiveSelectionIconForeground#9F8EA2
  • menu.selectionBackground#FF049319
  • menubar.selectionBackground#FF049319
  • notificationCenterHeader.background#F6DFE6
  • notifications.background#FCFEFF
  • notifications.border#E0C2CE
  • notifications.foreground#4779B6
  • notificationsErrorIcon.foreground#E56D90
  • notificationsInfoIcon.foreground#6595CF
  • notificationsWarningIcon.foreground#F6BFC4
  • panel.background#FFF6F7
  • panel.border#F49EB033
  • panelSectionHeader.background#F19DAF33
  • panelTitle.activeForeground#4779B6
  • panelTitle.inactiveForeground#BFA7B6
  • quickInput.background#FCFEFF
  • quickInput.foreground#43384C
  • quickInput.list.focusBackground#F6BFC466
  • quickInputList.focusForeground#716377
  • quickInputList.focusIconForeground#9F8EA2
  • quickInputList.hoverForeground#716377
  • scrollbar.shadow#9F8EA233
  • scrollbarSlider.activeBackground#CDB1C188
  • scrollbarSlider.background#CDB1C144
  • scrollbarSlider.hoverBackground#CDB1C166
  • sideBar.background#FFF6F7
  • sideBar.foreground#716377
  • sideBarSectionHeader.background#FCFEFF
  • sideBarSectionHeader.border#00000000
  • sideBarSectionHeader.foreground#716377
  • statusBar.background#F19DAF
  • statusBar.debuggingBackground#F6BFC4
  • statusBar.debuggingForeground#FFFFFF
  • statusBar.foreground#FFFFFF
  • statusBar.noFolderBackground#FCFEFF
  • statusBarItem.errorForeground#FFFFFF
  • statusBarItem.prominentForeground#FFFFFF
  • statusBarItem.remoteBackground#6595CF
  • statusBarItem.remoteForeground#FFFFFF
  • statusBarItem.warningForeground#FFFFFF
  • tab.activeBackground#FCFEFF
  • tab.activeBorder#00000000
  • tab.activeBorderTop#00000000
  • tab.activeForeground#637BB1
  • tab.border#F49EB033
  • tab.editor-group-tab-background#FFF6F7
  • tab.hoverBackground#F7F9FB
  • tab.inactiveBackground#FFF6F7
  • tab.inactiveForeground#BFA7B6
  • tab.unfocusedActiveBorder#00000000
  • tab.unfocusedActiveBorderTop#00000000
  • terminal.ansiBlack#CDB1C1
  • terminal.ansiBlue#637BB1
  • terminal.ansiBrightBlack#E6CFD9
  • terminal.ansiBrightBlue#6595CF
  • terminal.ansiBrightCyan#B5E0F3
  • terminal.ansiBrightGreen#7EA7D8
  • terminal.ansiBrightMagenta#F6BFC4
  • terminal.ansiBrightRed#F19DAF
  • terminal.ansiBrightWhite#FFFFFF
  • terminal.ansiBrightYellow#FFF6F7
  • terminal.ansiCyan#B5E0F3
  • terminal.ansiGreen#6595CF
  • terminal.ansiMagenta#F19DAF
  • terminal.ansiRed#E56D90
  • terminal.ansiWhite#F7F9FB
  • terminal.ansiYellow#F6BFC4
  • terminal.background#FFF6F7
  • terminal.foreground#43384C
  • terminalStickyScroll.background#F6DFE6
  • textCodeBlock.background#EB708B1A
  • textLink.foreground#637BB1
  • textLink.hoverForeground#637BB1
  • titleBar.activeBackground#F19DAF
  • titleBar.activeForeground#FFFFFF
  • titleBar.inactiveBackground#F19DAF
  • titleBar.inactiveForeground#FFFFFF
  • toolbar.activeBackground#00000011
  • toolbar.activeForeground#43384C
  • toolbar.hoverBackground#00000011
  • toolbar.hoverForeground#43384C
  • tooltip.background#FFFFFF
  • tooltip.border#FFFFFF
  • tooltip.foreground#43384C
  • widget.shadow#9F8EA266

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, comment.line, comment.line.double-slash, punctuation.definition.comment#CBB2C3italic
keyword#2F4FA8—
keyword.control#2081C4—
keyword.operator#4A71B5—
keyword.operator.assignment#2081C4—
storage, storage.type#2F4FA8—
constant, constant.numeric, constant.language, constant.character#D12D64—
string, string.quoted, string.regexp#C54572—
variable, variable.parameter#4A3F50—
entity.name.function, support.function#2081C4—
entity.name.type, entity.name.class, support.class#4A71B5—
entity.other.attribute-name, meta.annotation#2081C4—
punctuation, operator#4A71B5—
invalid, invalid.deprecated, invalid.illegal#F19DAF—
variable.other.property, variable.other.object.property, support.type.property-name#2081C4—
entity.name.tag, support.class.component#2F4FA8—
variable.language, variable.language.this, variable.language.super#2F4FA8—
entity.name.type.module, support.other.module#2F4FA8—
text.html.derivative#4A3F50—
entity.name.tag, meta.tag.sgml, meta.tag.html, meta.tag.xml, meta.tag.other#2F4FA8—
entity.other.attribute-name, meta.tag.attribute, meta.tag.xml.attribute#2081C4—
string.quoted.double.html, string.quoted.single.html, string.unquoted.html#D12D64—
punctuation.definition.tag.begin, punctuation.definition.tag.end, punctuation.definition.tag, punctuation.separator.key-value.html#3C6AB4—
meta.tag.sgml.doctype, comment.block.html#CBB2C3italic
entity.name.tag.js, entity.name.tag.tsx, support.class.component#2F4FA8—
entity.other.attribute-name.js, entity.other.attribute-name.tsx#2081C4—
markup.heading, markup.heading.markdown, markup.heading.setext, entity.name.section.markdown#2F4FA8bold
markup.bold, markup.bold.markdown#F19DAFbold
markup.italic, markup.italic.markdown#F19DAFitalic
string.other.link.title.markdown, markup.underline.link.markdown#2081C4underline
markup.underline.link, markup.underline.link.image.markdown, markup.underline.link.markdown, markup.link.url.markdown#2081C4—
markup.inline.raw.string.markdown, markup.raw.inline.markdown#C54572—
markup.fenced_code.block.markdown, markup.raw.block.markdown, fenced_code.block.language, fenced_code.block.markdown#C54572—
markup.quote, markup.quote.markdown#F7F0F3italic
markup.list, markup.list.numbered, markup.list.unnumbered#4A71B5—
meta.separator.markdown#4A71B5—
comment.block.html.markdown#CBB2C3italic
punctuation.definition.heading.markdown, heading.1.markdown, markup.heading.markdown, markup.heading.setext.markdown, markup.heading.markdown#2F4FA8bold
punctuation.definition.list.begin.markdown#4A71B5—
markup.list.unnumbered.markdown, markup.list.numbered.markdown#4A71B5—
meta.object-literal.key, meta.object.member, meta.objectliteral, support.type.property-name, support.type.property-name.json#2081C4—
variable.other.property, variable.other.property.js, variable.other.object.property, support.variable.property.dom, meta.property.object.js#2081C4—
support.function, variable.function, variable.function.js, entity.name.function.member, meta.method-call#4A71B5—
variable.other.object.js, variable.other.object.js.jsx#4A3F50—
support.class.promise.js, support.class.promise.ts#2F4FA8—
meta.diff.header.from-file, punctuation.definition.from-file.diff#F19DAFbold
meta.diff.header.to-file, punctuation.definition.to-file.diff#2081C4bold
meta.diff.range, meta.diff.index#CDB1C1—
markup.inserted.diff#2081C4—
markup.deleted.diff#F19DAF—
markup.changed.diff#F6BFC4—
meta.diff.context, meta.diff#7B93B8—
punctuation.definition.range.diff#CDB1C1—
meta.diff.header, meta.separator.diff#2F4FA8—
punctuation.definition.inserted.diff#2081C4—
support.function.misc.css, meta.function.variable.css#2081C4—