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.background#F0F7F5
  • activityBar.foreground#FF5D70
  • activityBarBadge.background#20C093
  • activityBarBadge.foreground#FFFFFF
  • badge.background#20C093
  • badge.foreground#FFFFFF
  • button.background#FF5D70
  • button.foreground#FFFFFF
  • button.hoverBackground#FF7A8A
  • button.secondaryBackground#E2EFE6
  • button.secondaryForeground#3F4642
  • button.secondaryHoverBackground#D5E3DA
  • commandCenter.activeBorder#00000000
  • commandCenter.border#00000000
  • commandCenter.hoverBorder#00000000
  • commandCenter.inactiveBorder#00000000
  • dropdown.background#F1F8F3
  • dropdown.border#D5E3D8
  • dropdown.foreground#3F4642
  • editor.background#F0F7F5
  • editor.foreground#3F4642
  • editor.inactiveSelectionBackground#EFF7F3
  • editor.lineHighlightBackground#F0F7F5
  • editor.selectionBackground#E7F2EE
  • editor.selectionHighlightBackground#DAEBE1
  • editor.selectionHighlightBorder#DAEBE1
  • editor.wordHighlightBackground#DAEBE1
  • editor.wordHighlightBorder#DAEBE1
  • editor.wordHighlightStrongBackground#DAEBE1
  • editorCursor.foreground#FF5D70
  • editorGroupHeader.noTabsBackground#F1F8F3
  • editorGroupHeader.tabsBackground#F0F7F5
  • editorIndentGuide.activeBackground1#6E7972
  • editorIndentGuide.background1#C5D5C9
  • editorLineNumber.activeForeground#17C7A4
  • editorLineNumber.foreground#B0BAB5
  • editorWhitespace.foreground#C5D5C9
  • editorWidget.background#F1F8F3
  • editorWidget.foreground#3F4642
  • explorer.decorations.ignoredForeground#7C867F
  • extensionButton.background#FF5D70
  • extensionButton.foreground#FFFFFF
  • extensionButton.hoverBackground#FF7A8A
  • extensionButton.prominentBackground#FF5D70
  • extensionButton.prominentForeground#FFFFFF
  • extensionButton.prominentHoverBackground#FF7A8A
  • focusBorder#B8A9F4
  • gitDecoration.ignoredResourceForeground#7C867F
  • input.background#F1F8F3
  • input.border#F1F8F3
  • input.foreground#101411
  • input.placeholderForeground#7C867F
  • keybindingTable.rowsBackground#DCEAE4
  • layoutControl.activeForeground#FF5D70
  • layoutControl.foreground#222222
  • list.activeSelectionBackground#E7F2EE
  • list.activeSelectionForeground#101411
  • list.focusBackground#E7F2EE
  • list.highlightForeground#FF5D70
  • list.hoverBackground#E7F2EE
  • list.hoverForeground#101411
  • list.inactiveSelectionBackground#F0F7F5
  • notificationCenterHeader.background#F0F7F5
  • notifications.background#F1F8F3
  • notifications.border#D5E3D8
  • notifications.foreground#101411
  • notificationsErrorIcon.foreground#FF5D70
  • notificationsInfoIcon.foreground#7159F9
  • notificationsWarningIcon.foreground#E6CB36
  • panel.background#F1F8F3
  • panel.border#D5E3D8
  • panelSectionHeader.background#DCEAE4
  • panelTitle.activeForeground#101411
  • panelTitle.inactiveForeground#7C867F
  • quickInput.background#F0F7F5
  • quickInput.foreground#3F4642
  • quickInput.list.focusBackground#E7F2EE
  • scrollbarSlider.activeBackground#9AB1A399
  • scrollbarSlider.background#C1D0C666
  • scrollbarSlider.hoverBackground#B2C5B988
  • sideBar.background#F0F7F5
  • sideBar.foreground#3F4642
  • sideBarSectionHeader.background#F1F8F3
  • sideBarSectionHeader.foreground#3F4642
  • statusBar.background#F0F7F5
  • statusBar.debuggingBackground#FFE3EA
  • statusBar.foreground#3F4642
  • statusBar.noFolderBackground#F0F7F5
  • statusBarItem.remoteBackground#7159F9
  • statusBarItem.remoteForeground#FFFFFF
  • tab.activeBackground#F1F8F3
  • tab.activeBorder#FF5D70
  • tab.activeForeground#101411
  • tab.editor-group-tab-background#F0F7F5
  • tab.hoverBackground#F0F7F5
  • tab.inactiveBackground#F0F7F5
  • tab.inactiveForeground#7C867F
  • terminal.ansiBlack#E0EFE8
  • terminal.ansiBlue#7159F9
  • terminal.ansiBrightBlack#8B978F
  • terminal.ansiBrightBlue#9C87FF
  • terminal.ansiBrightCyan#7DE2CB
  • terminal.ansiBrightGreen#8CE7C7
  • terminal.ansiBrightMagenta#D9C2FF
  • terminal.ansiBrightRed#FF7A8A
  • terminal.ansiBrightWhite#FFFFFF
  • terminal.ansiBrightYellow#E9B84A
  • terminal.ansiCyan#20C093
  • terminal.ansiGreen#63D8BD
  • terminal.ansiMagenta#B799FF
  • terminal.ansiRed#FF5D70
  • terminal.ansiWhite#F3F9F4
  • terminal.ansiYellow#E6CB36
  • terminal.background#F1F8F3
  • terminal.foreground#3F4642
  • textLink.foreground#20C093
  • textLink.hoverForeground#20C093
  • titleBar.activeBackground#F0F7F5
  • titleBar.activeForeground#101411
  • titleBar.inactiveBackground#F0F7F5
  • titleBar.inactiveForeground#7C867F

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, comment.line, comment.line.double-slash, punctuation.definition.comment, sss#8D9990italic
keyword#FF6B82
keyword.control#E9556B
keyword.operator#E9556B
keyword.operator.assignment#6F7A73
storage, storage.type#FF8FA8
constant, constant.numeric, constant.language, constant.character#6E59F8
string, string.quoted, string.regexp#66B60A
variable, variable.parameter#1CBC8F
entity.name.function, support.function#9278FF
entity.name.type, entity.name.class, support.class#6150F0
entity.other.attribute-name, meta.annotation#57C3A2
punctuation, operator#738077
invalid, invalid.deprecated, invalid.illegal#B3184C
variable.other.property, variable.other.object.property, support.type.property-name#1CBC8F
entity.name.tag, support.class.component#FF6B82
variable.language, variable.language.this, variable.language.super#71D8BC
entity.name.type.module, support.other.module#6150F0
text.html.derivative#3F4642
entity.name.tag, meta.tag.sgml, meta.tag.html, meta.tag.xml, meta.tag.other#FF6B82
entity.other.attribute-name, meta.tag.attribute, meta.tag.xml.attribute#1CBC8F
string.quoted.double.html, string.quoted.single.html, string.unquoted.html#66B60A
punctuation.definition.tag.begin, punctuation.definition.tag.end, punctuation.definition.tag, punctuation.separator.key-value.html#738077
meta.tag.sgml.doctype, comment.block.html#4F5952italic
entity.name.tag.js, entity.name.tag.tsx, support.class.component#FF6B82
entity.other.attribute-name.js, entity.other.attribute-name.tsx#1CBC8F
markup.heading, markup.heading.markdown, markup.heading.setext, entity.name.section.markdown#FF6B82bold
markup.bold, markup.bold.markdown#E9556Bbold
markup.italic, markup.italic.markdown#E9556Bitalic
string.other.link.title.markdown, markup.underline.link.markdown#1CBC8Funderline
markup.underline.link, markup.underline.link.image.markdown, markup.underline.link.markdown, markup.link.url.markdown#77B834
markup.inline.raw.string.markdown, markup.raw.inline.markdown#6E59F8
markup.fenced_code.block.markdown, markup.raw.block.markdown, fenced_code.block.language, fenced_code.block.markdown#6E59F8
markup.quote, markup.quote.markdown#B0CE63italic
markup.list, markup.list.numbered, markup.list.unnumbered#3F4642
meta.separator.markdown#4F5952
comment.block.html.markdown#4F5952italic
punctuation.definition.heading.markdown, heading.1.markdown, markup.heading.markdown, markup.heading.setext.markdown, markup.heading.markdown#FF6B82bold
punctuation.definition.list.begin.markdown#FF6678
markup.list.unnumbered.markdown, markup.list.numbered.markdown#3F4642
meta.object-literal.key, meta.object.member, meta.objectliteral, support.type.property-name, support.type.property-name.json#1CBC8F
variable.other.property, variable.other.property.js, variable.other.object.property, support.variable.property.dom, meta.property.object.js#1CBC8F
support.function, variable.function, variable.function.js, entity.name.function.member, meta.method-call#9278FF
variable.other.object.js, variable.other.object.js.jsx#1CBC8F
support.class.promise.js, support.class.promise.ts#71D8BC
meta.diff.header.from-file, punctuation.definition.from-file.diff#FF6B82bold
meta.diff.header.to-file, punctuation.definition.to-file.diff#66B60Abold
meta.diff.range, meta.diff.index#6150F0
markup.inserted.diff#66B60A
markup.deleted.diff#FF6B82
markup.changed.diff#CDDB4E
meta.diff.context, meta.diff#738077
punctuation.definition.range.diff#6150F0
meta.diff.header, meta.separator.diff#6E59F8
punctuation.definition.inserted.diff#1CBC8F
support.function.misc.css, meta.function.variable.css#9278FF