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