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#fafafa
  • activityBar.border#e5e7eb
  • activityBar.foreground#8b5cf6
  • activityBar.inactiveForeground#6b7280
  • activityBarBadge.background#8b5cf6
  • activityBarBadge.foreground#ffffff
  • badge.background#8b5cf6
  • badge.foreground#ffffff
  • button.background#8b5cf6
  • button.foreground#ffffff
  • button.hoverBackground#7c3aed
  • button.secondaryBackground#f3f4f6
  • button.secondaryForeground#1f2937
  • editor.background#ffffff
  • editor.foreground#1f2937
  • editor.inactiveSelectionBackground#8b5cf625
  • editor.lineHighlightBackground#faf8ff
  • editor.selectionBackground#8b5cf660
  • editor.selectionHighlightBackground#8b5cf640
  • editorCursor.foreground#8b5cf6
  • editorGroupHeader.tabsBackground#fafafa
  • editorGroupHeader.tabsBorder#e5e7eb
  • editorIndentGuide.activeBackground#9ca3af
  • editorIndentGuide.background#e5e7eb
  • editorLineNumber.activeForeground#8b5cf6
  • editorLineNumber.foreground#9ca3af
  • editorUnnecessaryCode.opacity#00000066
  • editorWhitespace.foreground#e5e7eb
  • editorWidget.background#ffffff
  • editorWidget.border#d1d5db
  • focusBorder#8b5cf6
  • input.background#ffffff
  • input.border#d1d5db
  • input.foreground#1f2937
  • input.placeholderForeground#9ca3af
  • inputOption.activeBorder#8b5cf6
  • inputValidation.errorBackground#ffffff
  • inputValidation.errorBorder#ef4444
  • list.activeSelectionBackground#8b5cf6
  • list.activeSelectionForeground#ffffff
  • list.focusOutline#8b5cf6
  • list.hoverBackground#f9fafb
  • list.inactiveSelectionBackground#f3f4f6
  • panel.background#ffffff
  • panel.border#e5e7eb
  • panelTitle.activeBorder#8b5cf6
  • panelTitle.activeForeground#1f2937
  • panelTitle.inactiveForeground#6b7280
  • peekView.border#8b5cf6
  • peekViewEditor.background#fafafa
  • peekViewResult.background#ffffff
  • peekViewTitle.background#8b5cf6
  • progressBar.background#8b5cf6
  • scrollbar.shadow#e5e7eb
  • scrollbarSlider.activeBackground#8b5cf680
  • scrollbarSlider.background#d1d5db66
  • scrollbarSlider.hoverBackground#9ca3af99
  • sideBar.background#fafafa
  • sideBar.border#e5e7eb
  • sideBar.foreground#374151
  • sideBarSectionHeader.background#f3f4f6
  • sideBarSectionHeader.foreground#1f2937
  • sideBarTitle.foreground#8b5cf6
  • statusBar.background#fafafa
  • statusBar.border#e5e7eb
  • statusBar.foreground#8b5cf6
  • statusBar.noFolderBackground#fafafa
  • statusBarItem.hoverBackground#f3f4f6
  • statusBarItem.prominentBackground#8b5cf6
  • tab.activeBackground#ffffff
  • tab.activeBorder#8b5cf6
  • tab.activeForeground#1f2937
  • tab.border#fafafa
  • tab.inactiveBackground#fafafa
  • tab.inactiveForeground#6b7280
  • terminal.ansiBlack#2F353A
  • terminal.ansiBlue#2563eb
  • terminal.ansiBrightBlack#4b5563
  • terminal.ansiBrightBlue#1d4ed8
  • terminal.ansiBrightCyan#1286d8
  • terminal.ansiBrightGreen#109e90
  • terminal.ansiBrightMagenta#9e72ff
  • terminal.ansiBrightRed#ef4d55
  • terminal.ansiBrightWhite#374151
  • terminal.ansiBrightYellow#d48800
  • terminal.ansiCyan#0d6bb8
  • terminal.ansiGreen#0d766e
  • terminal.ansiMagenta#8b5cf6
  • terminal.ansiRed#d92c3a
  • terminal.ansiWhite#1f2937
  • terminal.ansiYellow#b97300
  • terminal.foreground#1f2937
  • terminal.selectionBackground#8b5cf660
  • terminalCursor.foreground#e879f9
  • titleBar.activeBackground#fafafa
  • titleBar.activeForeground#1f2937
  • titleBar.border#e5e7eb
  • titleBar.inactiveBackground#fafafa
  • titleBar.inactiveForeground#9ca3af

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#5b6b78italic
keyword, storage.type, storage.modifier#0078d4—
keyword.control, constant.other.color#a855f7—
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter#dc2626—
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method#8b5cf6—
support.other.variable, string.other.link#e50000—
constant.numeric, constant.language, support.constant, constant.character, constant.escape#046b5f—
string, constant.other.symbol, constant.other.key, entity.other.inherited-class, markup.heading, markup.inserted.git_gutter, meta.group.braces.curly constant.other.object.key.js string.unquoted.label.js#d7368f—
entity.name, support.type, support.class, support.orther.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter, support.type.sys-types#0d6bb8—
variable.parameter.function.language.special, variable.parameter#2563eb—
constant.other.symbol.hashkey.ruby, entity.other.attribute-name.id#005fb4—
entity.other.attribute-name.class.css#8b5cf6—
source.sass keyword.control#1e1e1e—
markup.inserted#0d766e—
markup.deleted#a31515—
markup.changed#0000ff—
string.regexp#811f3f—
constant.character.escape#ee0000—
*url*, *link*, *uri*—underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#267f99italic
source.js constant.other.object.key.js string.unquoted.label.js#001080italic
meta.class-method.js entity.name.function.js, variable.function.constructor#795e26—
entity.other.attribute-name#0078d4—
text.html.markdown, punctuation.definition.list_item.markdown#1e1e1e—
text.html.markdown markup.inline.raw.markdown#a31515—
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown#0000ff—
markdown.heading, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown#0000ff—
markup.italic#1e1e1eitalic
markup.bold, markup.bold string#1e1e1ebold
markup.bold markup.italic, markup.italic markup.bold, markup.quote markup.bold, markup.bold markup.italic string, markup.italic markup.bold string, markup.quote markup.bold string—bold italic
markup.underline—underline
markup.quote punctuation.definition.blockquote.markdown#008000—
markup.quote—italic
string.other.link.title.markdown#0000ff—
string.other.link.description.title.markdown#af00db—
constant.other.reference.link.markdown#795e26—
markup.raw.block#a31515—
punctuation.definition.tag#800000—
meta.preprocessor, entity.name.function.preprocessor#0000ff—
meta.diff.header#0000ff—
source.ruby variable.other.readwrite#001080—
source.css support.property-name, source.sass support.property-name, source.scss support.property-name, source.less support.property-name, source.stylus support.property-name, source.postcss support.property-name#0078d4—
entity.name.type.namespace#0d6bb8—