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.activeBackground#1e293b20
  • activityBar.activeBorder#3b82f6
  • activityBar.background#0f1216
  • activityBar.foreground#ffffff
  • activityBar.inactiveForeground#6b7280
  • activityBarBadge.background#3b82f6
  • activityBarBadge.foreground#ffffff
  • badge.background#3b82f6
  • badge.foreground#ffffff
  • breadcrumb.activeSelectionForeground#3b82f6
  • breadcrumb.background#1a1d24
  • breadcrumb.focusForeground#ffffff
  • breadcrumb.foreground#cbd5e1
  • button.background#3b82f6
  • button.foreground#ffffff
  • button.hoverBackground#2563eb
  • dropdown.background#1f2937
  • dropdown.border#374151
  • dropdown.foreground#f1f5f9
  • editor.background#1a1d24
  • editor.findMatchBackground#f59e0b50
  • editor.findMatchHighlightBackground#f59e0b30
  • editor.foreground#f1f5f9
  • editor.inactiveSelectionBackground#37415120
  • editor.lineHighlightBackground#1a6ef520
  • editor.selectionBackground#5090f774
  • editor.wordHighlightBackground#6b728030
  • editor.wordHighlightStrongBackground#6b728050
  • editorBracketMatch.background#3b82f630
  • editorBracketMatch.border#3b82f6
  • editorCursor.foreground#c3b3e1
  • editorGroupHeader.tabsBackground#0f1216
  • editorGroupHeader.tabsBorder#374151
  • editorIndentGuide.activeBackground1#456cb4
  • editorIndentGuide.background1#374151
  • editorLineNumber.activeForeground#cbd5e1
  • editorLineNumber.foreground#94a3b8
  • editorRuler.foreground#374151
  • editorWhitespace.foreground#4b5563
  • git.color.added#10b981
  • git.color.conflicted#8b5cf6
  • git.color.deleted#ef4444
  • git.color.modified#f59e0b
  • git.color.renamed#3b82f6
  • git.color.untracked#6b7280
  • gitDecoration.conflictingResourceForeground#8b5cf6
  • gitDecoration.deletedResourceForeground#ef4444
  • gitDecoration.ignoredResourceForeground#6b7280
  • gitDecoration.modifiedResourceForeground#f59e0b
  • gitDecoration.submoduleResourceForeground#06b6d4
  • gitDecoration.untrackedResourceForeground#10b981
  • input.background#1f2937
  • input.border#374151
  • input.foreground#f1f5f9
  • input.placeholderForeground#94a3b8
  • list.activeSelectionBackground#3b82f630
  • list.activeSelectionForeground#ffffff
  • list.focusBackground#3b82f625
  • list.focusForeground#ffffff
  • list.hoverBackground#374151
  • list.inactiveSelectionBackground#37415130
  • menu.background#1f2937
  • menu.border#374151
  • menu.foreground#f1f5f9
  • menu.selectionBackground#3b82f630
  • menu.selectionForeground#ffffff
  • menubar.selectionBackground#374151
  • menubar.selectionForeground#ffffff
  • notificationCenter.border#374151
  • notificationCenterHeader.background#1f2937
  • notifications.background#1f2937
  • notifications.border#374151
  • notifications.foreground#f1f5f9
  • notificationToast.border#374151
  • panel.background#151922
  • panel.border#374151
  • panelTitle.activeBorder#3b82f6
  • panelTitle.activeForeground#ffffff
  • panelTitle.inactiveForeground#cbd5e1
  • progressBar.background#3b82f6
  • scrollbar.shadow#00000050
  • scrollbarSlider.activeBackground#6b7280
  • scrollbarSlider.background#37415150
  • scrollbarSlider.hoverBackground#37415170
  • sideBar.background#151922
  • sideBar.border#374151
  • sideBar.foreground#e2e8f0
  • sideBarSectionHeader.background#1f2937
  • sideBarSectionHeader.border#374151
  • sideBarSectionHeader.foreground#ffffff
  • sideBarTitle.foreground#ffffff
  • statusBar.background#0f1216
  • statusBar.border#374151
  • statusBar.debuggingBackground#dc2626
  • statusBar.debuggingForeground#ffffff
  • statusBar.foreground#cbd5e1
  • statusBar.noFolderBackground#0f1216
  • tab.activeBackground#1a1d24
  • tab.activeBorder#3b82f6
  • tab.activeForeground#ffffff
  • tab.border#374151
  • tab.hoverBackground#1f2937
  • tab.inactiveBackground#0f1216
  • tab.inactiveForeground#cbd5e1
  • terminal.ansiBlack#1f2937
  • terminal.ansiBlue#3b82f6
  • terminal.ansiCyan#06b6d4
  • terminal.ansiGreen#10b981
  • terminal.ansiMagenta#8b5cf6
  • terminal.ansiRed#ef4444
  • terminal.ansiWhite#f8fafc
  • terminal.ansiYellow#f59e0b
  • terminal.background#151922
  • terminal.foreground#f1f5f9
  • titleBar.activeBackground#0f1216
  • titleBar.activeForeground#ffffff
  • titleBar.border#374151
  • titleBar.inactiveBackground#111827
  • titleBar.inactiveForeground#94a3b8

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#94a3b8italic
variable, string constant.other.placeholder#f1f5f9—
constant.other.color#f59e0b—
invalid, invalid.illegal#ef4444underline
keyword, storage.type, storage.modifier#a78bfabold
keyword.control.flow.js, keyword.control.flow.jsx, keyword.control.flow.ts, keyword.control.flow.tsx, keyword.control.export.js, keyword.control.export.jsx, keyword.control.export.ts, keyword.control.export.tsx, keyword.control.import.js, keyword.control.import.jsx, keyword.control.import.ts, keyword.control.import.tsx, keyword.control.default.js, keyword.control.default.jsx, keyword.control.default.ts, keyword.control.default.tsx#c084fcbold
storage.type.js, storage.type.jsx, storage.type.ts, storage.type.tsx, storage.type.function.js, storage.type.function.jsx, storage.type.function.ts, storage.type.function.tsx#8b5cf6bold
keyword.control.export, keyword.control.import, keyword.control.from, keyword.control.default#ec4899bold
keyword.control, constant.other.color, punctuation, meta.tag, punctuation.definition.tag, punctuation.separator.inheritance.php, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, punctuation.section.embedded, keyword.other.template, keyword.other.substitution#22d3ee—
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter#de68d5—
text.html, text.html.basic, text.html meta.tag, text.html string.quoted, meta.tag.other.html, meta.tag.inline.any.html, meta.tag.block.any.html#ffffff—
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method#60a5fabold
meta.block variable.other#f1c149—
support.other.variable, string.other.link#22d3ee—
constant.numeric, constant.language, support.constant, constant.character, constant.escape, variable.parameter, keyword.other.unit, keyword.other#fbbf24—
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#4ade80—
entity.name, support.type, support.class, support.other.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter, support.type.sys-types#fb923cbold
support.type#22d3ee—
source.css support.type.property-name, source.sass support.type.property-name, source.scss support.type.property-name, source.less support.type.property-name, source.stylus support.type.property-name, source.postcss support.type.property-name#22d3ee—
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#a78bfa—
variable.language#f87171italic
entity.name.method.js#60a5faitalic
meta.class-method.js entity.name.function.js, variable.function.constructor#60a5fa—
entity.other.attribute-name#dead4a—
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name#fbbf24italic
entity.other.attribute-name.class#fbbf24—
source.sass keyword.control#60a5fa—
markup.inserted#4ade80—
markup.deleted#f87171—
markup.changed#a78bfa—
string.regexp#f472b6—
constant.character.escape#3fb2c4—
*url*, *link*, *uri*—underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#a78bfaitalic
source.js constant.other.object.key.js string.unquoted.label.js#f87171italic
source.json meta.structure.dictionary.json support.type.property-name.json#60a5fa—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#fbbf24—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#22d3ee—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#f87171—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#4ade80—
text.html.markdown, punctuation.definition.list_item.markdown#f1f5f9—
text.html.markdown markup.inline.raw.markdown#a78bfa—
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown#94a3b8—
markdown.heading, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown#4ade80bold
markup.italic#fbbf24italic
markup.bold, markup.bold string#fbbf24bold
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#fbbf24bold italic
markup.underline#22d3eeunderline
markup.quote punctuation.definition.blockquote.markdown#94a3b8—
markup.quote#cbd5e1italic
string.other.link.title.markdown#22d3ee—
string.other.link.description.title.markdown#60a5fa—
constant.other.reference.link.markdown#fbbf24—
markup.raw.block#a78bfa—
markup.raw.block.fenced.markdown#f1f5f9—
variable.language.fenced.markdown#94a3b8—
entity.name.type.ts, entity.name.type.tsx, support.type.primitive.ts, support.type.primitive.tsx#22d3eebold
entity.name.type.interface.ts, entity.name.type.interface.tsx#60a5fabold
variable.language.special.self.python#f87171italic
entity.name.function.decorator.python#a78bfa—
support.class.component.jsx, support.class.component.tsx#60a5fabold