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