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—
Planetz Roller by monoooki - VS Code Theme