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#4755697c
  • activityBar.background#111827
  • activityBar.border#4755697c
  • activityBarBadge.background#007acc
  • breadcrumb.activeSelectionForeground#cbd5e1
  • breadcrumb.background#111827
  • breadcrumb.focusForeground#cbd5e1
  • breadcrumb.foreground#94a3b8
  • breadcrumbPicker.background#111827
  • contrastBorder#4755697c
  • dropdown.background#111827
  • dropdown.border#4755697c
  • dropdown.foreground#94a3b8
  • editor.background#111827
  • editor.foldBackground#4755697c
  • editor.foreground#cbd5e1
  • editor.selectionBackground#4755697c
  • editorBracketMatch.background#4755697c
  • editorBracketMatch.border#4755697c
  • editorCursor.foreground#db2777
  • editorGroupHeader.tabsBackground#111827
  • editorHoverWidget.background#1e293b
  • editorHoverWidget.border#4755697c
  • editorLineNumber.activeForeground#ec4899
  • editorLineNumber.foreground#475569
  • editorWidget.background#111827
  • editorWidget.border#4755697c
  • extensionButton.background#db2777
  • extensionButton.hoverBackground#ec4899
  • focusBorder#4755697c
  • foreground#cbd5e1
  • input.background#1e293b
  • input.border#4755697c
  • input.foreground#94a3b8
  • input.placeholderForeground#94a3b8
  • inputOption.activeBorder#ffffffcc
  • inputValidation.errorBackground#b91c1c
  • inputValidation.errorBorder#f87171
  • inputValidation.infoBackground#1d4ed8
  • inputValidation.infoBorder#60a5fa
  • inputValidation.warningBackground#a16207
  • inputValidation.warningBorder#facc15
  • list.activeSelectionBackground#234d708c
  • list.activeSelectionForeground#cbd5e1
  • list.dropBackground#1e293b
  • list.focusBackground#010d18
  • list.focusForeground#cbd5e1
  • list.highlightForeground#cbd5e1
  • list.hoverBackground#1e293b
  • list.hoverForeground#cbd5e1
  • list.inactiveSelectionBackground#1e293b
  • list.inactiveSelectionForeground#cbd5e1
  • list.invalidItemForeground#975f94
  • minimap.errorHighlight#dc2626
  • minimap.selectionHighlight#db2777
  • notifications.background#111827
  • notifications.border#4755697c
  • scrollbar.shadow#010b14
  • scrollbarSlider.activeBackground#1e293b
  • scrollbarSlider.background#1e293b
  • scrollbarSlider.hoverBackground#1e293b
  • sideBar.background#111827
  • sideBar.border#4755697c
  • sideBarSectionHeader.background#111827
  • sideBarSectionHeader.border#4755697c
  • sideBarTitle.foreground#bbbbbb
  • statusBar.background#111827
  • statusBar.border#4755697c
  • statusBar.debuggingBackground#1e293b
  • statusBar.debuggingBorder#1F2330
  • statusBar.foreground#5f7e97
  • statusBar.noFolderBackground#111827
  • statusBar.noFolderBorder#25293A
  • statusBarItem.activeBackground#1e293b
  • statusBarItem.hoverBackground#1e293b
  • statusBarItem.prominentBackground#1e293b
  • statusBarItem.prominentHoverBackground#1e293b
  • tab.activeBackground#1e293b
  • tab.activeBorder#4755697c
  • tab.activeBorderTop#ec4899
  • tab.activeForeground#d2dee7
  • tab.border#4755697c
  • tab.inactiveBackground#111827
  • tab.inactiveForeground#5f7e97
  • tab.unfocusedActiveBorder#4755697c
  • tab.unfocusedActiveForeground#5f7e97
  • tab.unfocusedInactiveForeground#5f7e97
  • titleBar.activeBackground#111827
  • titleBar.activeForeground#94a3b8
  • titleBar.border#4755697c
  • titleBar.inactiveBackground#111827

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#475569italic
variable, string constant.other.placeholder#cbd5e1italic
constant.other.color#cbd5e1—
invalid, invalid.illegal#f87171—
keyword, storage.type, storage.modifier#60a5fa—
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#89DDFF—
meta.tag#cbd5e1—
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter#2dd4bf—
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method#2dd4bfitalic
meta.block variable.other #f472b6—
support.other.variable, string.other.link#f472b6—
variable.parameter#f472b6—
variable.other.readwrite.alias.ts, variable.other.readwrite.alias.tsx, variable.other.readwrite.ts, variable.other.readwrite.tsx#cbd5e1—
constant.numeric, constant.language, support.constant, constant.character, constant.escape, keyword.other.unit, keyword.other#c4b5fd—
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#c084fc—
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#2dd4bf—
support.type#B2CCD6—
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#B2CCD6—
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#f87171—
variable.language#f87171italic
entity.name.method.js#f472b6italic
meta.class-method.js entity.name.function.js, variable.function.constructor#f472b6—
entity.other.attribute-name#60a5faitalic
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name#2dd4bfitalic
entity.other.attribute-name.class#2dd4bf—
source.sass keyword.control#f472b6—
markup.inserted#c084fc—
markup.deleted#f87171—
markup.changed#60a5fa—
string.regexp#89DDFF—
constant.character.escape#89DDFF—
*url*, *link*, *uri*—underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#f472b6italic
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#2dd4bf—
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#F78C6C—
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#C17E70—
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 meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#f472b6—
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 meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#f472b6—
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 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#60a5fa—
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 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#c084fc—
text.html.markdown, punctuation.definition.list_item.markdown#cbd5e1—
text.html.markdown markup.inline.raw.markdown#60a5fa—
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown#65737E—
markdown.heading, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown#c084fc—
markup.italic#f472b6italic
markup.bold, markup.bold string#f472b6bold
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#f472b6bold
markup.underline#F78C6Cunderline
markup.quote punctuation.definition.blockquote.markdown#65737E—
markup.quote—italic
string.other.link.title.markdown#f472b6—
string.other.link.description.title.markdown#60a5fa—
constant.other.reference.link.markdown#2dd4bf—
markup.raw.block#60a5fa—
markup.raw.block.fenced.markdown#00000050—
punctuation.definition.fenced.markdown#00000050—
markup.raw.block.fenced.markdown, variable.language.fenced.markdown, punctuation.section.class.end#cbd5e1—
variable.language.fenced.markdown#65737E—
meta.separator#65737Ebold
markup.table#cbd5e1—
string, string.quoted, variable.other.readwrite.js#c084fc—
variable.other.object.ts, variable.other.object.tsx, variable.object.property.ts, variable.object.property.tsx, variable.other.ts, variable.other.tsx, variable.tsx, variable.ts#f472b6—
meta.object-literal.key.tsx, meta.object.member.tsx, meta.objectliteral.tsx, meta.object.member.tsx, meta.objectliteral.tsx, meta.object.member.tsx, meta.objectliteral.tsx, meta.var.expr.tsx, source.tsx#f472b6—