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