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#161616
  • activityBar.foreground#2fbf64
  • activityBarBadge.background#64CBCF
  • activityBarBadge.foreground#181818
  • badge.background#64CBCF
  • badge.foreground#181818
  • button.background#d25227
  • button.foreground#181818
  • button.hoverBackground#DA5E45
  • button.secondaryBackground#2A2928
  • button.secondaryForeground#E8E7E2
  • button.secondaryHoverBackground#343330
  • commandCenter.activeBorder#00000000
  • commandCenter.border#00000000
  • commandCenter.hoverBorder#00000000
  • commandCenter.inactiveBorder#00000000
  • dropdown.background#161615
  • dropdown.border#2A2925
  • dropdown.foreground#C2C0B4
  • editor.background#1a1a1a
  • editor.foreground#C2C0B4
  • editor.inactiveSelectionBackground#2A2925
  • editor.lineHighlightBackground#1F1F1F
  • editor.selectionBackground#2A2925
  • editorCursor.foreground#d25227
  • editorGroup.border#ffffff11
  • editorGroupHeader.noTabsBackground#161616
  • editorGroupHeader.tabsBackground#161616
  • editorIndentGuide.activeBackground1#5d5c55
  • editorIndentGuide.background1#222222
  • editorLineNumber.activeForeground#B98BEC
  • editorLineNumber.foreground#4B493D
  • editorOverviewRuler.border#00000000
  • editorWhitespace.foreground#222222
  • editorWidget.background#1a1a1a
  • editorWidget.foreground#C2C0B4
  • explorer.decorations.ignoredForeground#5d5c55
  • extensionButton.background#d25227
  • extensionButton.foreground#181818
  • extensionButton.hoverBackground#DA5E45
  • extensionButton.prominentBackground#d25227
  • extensionButton.prominentForeground#181818
  • extensionButton.prominentHoverBackground#DA5E45
  • focusBorder#DA5E45
  • gitDecoration.ignoredResourceForeground#5d5c55
  • input.background#232323
  • input.border#232323
  • input.foreground#E8E7E2
  • input.placeholderForeground#5d5c55
  • keybindingTable.rowsBackground#1C1C1C
  • list.activeSelectionBackground#2A2925
  • list.activeSelectionForeground#E8E7E2
  • list.focusBackground#2A2925
  • list.highlightForeground#81DFDF
  • list.hoverBackground#2A2925
  • list.hoverForeground#E8E7E2
  • list.inactiveSelectionBackground#202020
  • notificationCenterHeader.background#161616
  • notifications.background#1a1a1a
  • notifications.border#2A2925
  • notifications.foreground#E8E7E2
  • notificationsErrorIcon.foreground#F25636
  • notificationsInfoIcon.foreground#64CBCF
  • notificationsWarningIcon.foreground#E3B77D
  • panel.background#1a1a1a
  • panel.border#2A2925
  • panelSectionHeader.background#1C1C1C
  • panelTitle.activeForeground#E8E7E2
  • panelTitle.inactiveForeground#5d5c55
  • quickInput.background#1A1A1A
  • quickInput.foreground#E1E0D9
  • quickInput.list.focusBackground#2A2925
  • scrollbar.shadow#00000066
  • scrollbarSlider.activeBackground#555555AA
  • scrollbarSlider.background#33333366
  • scrollbarSlider.hoverBackground#44444488
  • sideBar.background#161616
  • sideBar.foreground#C2C0B4
  • sideBarSectionHeader.background#1a1a1a
  • sideBarSectionHeader.foreground#C2C0B4
  • statusBar.background#161616
  • statusBar.debuggingBackground#2A2925
  • statusBar.foreground#C2C0B4
  • statusBar.noFolderBackground#1A1A1A
  • statusBarItem.remoteBackground#1F6B66
  • statusBarItem.remoteForeground#61CD70
  • tab.activeBackground#161616
  • tab.activeBorder#d25227
  • tab.activeForeground#E8E7E2
  • tab.border#00000000
  • tab.editor-group-tab-background#161616
  • tab.hoverBackground#202020
  • tab.inactiveBackground#161616
  • tab.inactiveForeground#5d5c55
  • terminal.ansiBlack#2A2925
  • terminal.ansiBlue#64CBCF
  • terminal.ansiBrightBlack#5d5c55
  • terminal.ansiBrightBlue#64CBCF
  • terminal.ansiBrightCyan#81DFDF
  • terminal.ansiBrightGreen#61CD70
  • terminal.ansiBrightMagenta#B98BEC
  • terminal.ansiBrightRed#FF7B63
  • terminal.ansiBrightWhite#E1E0D9
  • terminal.ansiBrightYellow#E3B77D
  • terminal.ansiCyan#64CBCF
  • terminal.ansiGreen#61CD70
  • terminal.ansiMagenta#B98BEC
  • terminal.ansiRed#F25636
  • terminal.ansiWhite#E1E0D9
  • terminal.ansiYellow#E3B77D
  • terminal.background#181818
  • terminal.foreground#ccc
  • textLink.foreground#81DFDF
  • textLink.hoverForeground#81DFDF
  • titleBar.activeBackground#161616
  • titleBar.activeForeground#C2C0B4
  • titleBar.inactiveBackground#161616
  • titleBar.inactiveForeground#5d5c55

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, comment.line, comment.line.double-slash, punctuation.definition.comment, sss#706D5Citalic
keyword#FF7B63—
keyword.control#F25636—
keyword.operator#F25636—
keyword.operator.assignment#C2C0B4—
storage, storage.type#FF9D8B—
constant, constant.numeric, constant.language, constant.character#B98BEC—
string, string.quoted, string.regexp#61CD70—
variable, variable.parameter#2FC0C5—
entity.name.function, support.function#81DFDF—
entity.name.type, entity.name.class, support.class#64CBCF—
entity.other.attribute-name, meta.annotation#B98BEC—
punctuation, operator#A3A08F—
invalid, invalid.deprecated, invalid.illegal#CC0000—
variable.other.property, variable.other.object.property, support.type.property-name#64CBCF—
entity.name.tag, support.class.component#FF7B63—
variable.language, variable.language.this, variable.language.super#81DFDF—
entity.name.type.module, support.other.module#64CBCF—
text.html.derivative#C2C0B4—
entity.name.tag, meta.tag.sgml, meta.tag.html, meta.tag.xml, meta.tag.other#FF7B63—
entity.other.attribute-name, meta.tag.attribute, meta.tag.xml.attribute#64CBCF—
string.quoted.double.html, string.quoted.single.html, string.unquoted.html#61CD70—
punctuation.definition.tag.begin, punctuation.definition.tag.end, punctuation.definition.tag, punctuation.separator.key-value.html#A3A08F—
meta.tag.sgml.doctype, comment.block.html#4B493Ditalic
entity.name.tag.js, entity.name.tag.tsx, support.class.component#FF7B63—
entity.other.attribute-name.js, entity.other.attribute-name.tsx#64CBCF—
markup.heading, markup.heading.markdown, markup.heading.setext, entity.name.section.markdown#FF7B63bold
markup.bold, markup.bold.markdown#F25636bold
markup.italic, markup.italic.markdown#F25636italic
string.other.link.title.markdown, markup.underline.link.markdown#64CBCFunderline
markup.underline.link, markup.underline.link.image.markdown, markup.underline.link.markdown, markup.link.url.markdown#61CD70—
markup.inline.raw.string.markdown, markup.raw.inline.markdown#B98BEC—
markup.fenced_code.block.markdown, markup.raw.block.markdown, fenced_code.block.language, fenced_code.block.markdown#B98BEC—
markup.quote, markup.quote.markdown#B98BECitalic
markup.list, markup.list.numbered, markup.list.unnumbered#A3A08F—
meta.separator.markdown#4B493D—
comment.block.html.markdown#4B493Ditalic
punctuation.definition.heading.markdown, heading.1.markdown, markup.heading.markdown, markup.heading.setext.markdown, markup.heading.markdown#FF7B63bold
punctuation.definition.list.begin.markdown#A3A08F—
markup.list.unnumbered.markdown, markup.list.numbered.markdown#A3A08F—
meta.object-literal.key, meta.object.member, meta.objectliteral, support.type.property-name, support.type.property-name.json#64CBCF—
variable.other.property, variable.other.property.js, variable.other.object.property, support.variable.property.dom, meta.property.object.js#64CBCF—
support.function, variable.function, variable.function.js, entity.name.function.member, meta.method-call#81DFDF—
variable.other.object.js, variable.other.object.js.jsx#2FC0C5—
support.class.promise.js, support.class.promise.ts#81DFDF—
meta.diff.header.from-file, punctuation.definition.from-file.diff#F25636bold
meta.diff.header.to-file, punctuation.definition.to-file.diff#61CD70bold
meta.diff.range, meta.diff.index#64CBCF—
markup.inserted.diff#61CD70—
markup.deleted.diff#F25636—
markup.changed.diff#E3B77D—
meta.diff.context, meta.diff#A3A08F—
punctuation.definition.range.diff#64CBCF—
meta.diff.header, meta.separator.diff#B98BEC—
punctuation.definition.inserted.diff#64CBCF—
support.function.misc.css, meta.function.variable.css#81DFDF—