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 stringbold italic
markup.underlineunderline
markup.quote punctuation.definition.blockquote.markdown#008000
markup.quoteitalic
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
iLoveAgents - Azure AI Foundry Themes by iLoveAgents - VS Code Theme