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#e2e8f0
  • activityBar.border#cbd5e1
  • activityBar.foreground#0f172a
  • activityBar.inactiveForeground#64748b
  • badge.background#0891b2
  • badge.foreground#ffffff
  • descriptionForeground#475569
  • dropdown.background#f1f5f9
  • dropdown.border#cbd5e1
  • dropdown.foreground#0f172a
  • editor.background#f8fafc
  • editor.findMatchBackground#f59e0b3d
  • editor.findMatchHighlightBackground#f59e0b22
  • editor.foreground#0f172a
  • editor.hoverHighlightBackground#0891b214
  • editor.inactiveSelectionBackground#0891b219
  • editor.lineHighlightBackground#0f172a0a
  • editor.selectionBackground#0891b226
  • editor.wordHighlightBackground#38bdf81f
  • editor.wordHighlightStrongBackground#38bdf833
  • editorBracketMatch.background#0891b21a
  • editorBracketMatch.border#0891b255
  • editorCursor.foreground#0891b2
  • editorGroupHeader.tabsBackground#e2e8f0
  • editorIndentGuide.activeBackground1#94a3b8
  • editorIndentGuide.background1#cbd5e1
  • editorLineNumber.activeForeground#475569
  • editorLineNumber.foreground#94a3b8
  • editorOverviewRuler.errorForeground#be123ccc
  • editorOverviewRuler.infoForeground#2563ebcc
  • editorOverviewRuler.warningForeground#b45309cc
  • errorForeground#be123c
  • focusBorder#0891b2
  • foreground#0f172a
  • gitDecoration.addedResourceForeground#16a34a
  • gitDecoration.deletedResourceForeground#be123c
  • gitDecoration.ignoredResourceForeground#94a3b8
  • gitDecoration.modifiedResourceForeground#2563eb
  • gitDecoration.untrackedResourceForeground#0891b2
  • input.background#f1f5f9
  • input.border#cbd5e1
  • input.foreground#0f172a
  • input.placeholderForeground#64748b
  • list.activeSelectionBackground#0891b226
  • list.activeSelectionForeground#0f172a
  • list.hoverBackground#0f172a0a
  • list.hoverForeground#0f172a
  • list.inactiveSelectionBackground#0f172a08
  • notificationCenterHeader.background#e2e8f0
  • notifications.background#f1f5f9
  • notifications.border#cbd5e1
  • notifications.foreground#0f172a
  • panel.background#f8fafc
  • panel.border#cbd5e1
  • sideBar.background#e2e8f0
  • sideBar.border#cbd5e1
  • sideBar.foreground#0f172a
  • sideBarTitle.foreground#0f172a
  • statusBar.background#e2e8f0
  • statusBar.border#cbd5e1
  • statusBar.debuggingBackground#1d4ed8
  • statusBar.debuggingForeground#f8fafc
  • statusBar.foreground#0f172a
  • tab.activeBackground#f8fafc
  • tab.activeBorderTop#0891b2
  • tab.activeForeground#0f172a
  • tab.border#cbd5e1
  • tab.inactiveBackground#e2e8f0
  • tab.inactiveForeground#475569
  • terminal.ansiBlack#0f172a
  • terminal.ansiBlue#2563eb
  • terminal.ansiCyan#0891b2
  • terminal.ansiGreen#16a34a
  • terminal.ansiMagenta#be185d
  • terminal.ansiRed#be123c
  • terminal.ansiWhite#334155
  • terminal.ansiYellow#b45309
  • terminal.background#f8fafc
  • terminal.foreground#0f172a
  • terminalCursor.foreground#0891b2
  • titleBar.activeBackground#e2e8f0
  • titleBar.activeForeground#0f172a
  • titleBar.inactiveBackground#e2e8f0
  • titleBar.inactiveForeground#64748b

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#64748bitalic
string, punctuation.definition.string#15803d
string.template, punctuation.definition.template-expression, punctuation.section.embedded, meta.template.expression#0891b2
constant.numeric#b45309
constant.language#be185d
keyword, storage.type, storage.modifier, keyword.control, keyword.operator.new, keyword.operator.expression, keyword.operator.logical#0891b2
keyword.operator, punctuation, meta.brace, meta.delimiter#475569
entity.name.function, support.function, meta.function-call, meta.method-call#2563eb
variable.parameter, meta.parameters, meta.function.parameters#0f172a
variable, meta.definition.variable, entity.name.variable#0f172a
variable.other.constant, entity.name.constant#b45309
entity.name.type, support.type, support.class, entity.name.class, entity.name.interface, entity.name.struct, entity.name.enum#4338ca
entity.name.type.parameter, meta.type.parameters, meta.type.annotation#0891b2
keyword.control.import, keyword.control.export, keyword.control.from, keyword.control.as#0891b2
variable.language.this, variable.language.super, variable.language.self#be185d
variable.other.property, support.variable.property#4f46e5
entity.name.tag#0891b2
entity.other.attribute-name#4338ca
invalid, invalid.deprecated#be123cunderline
support.type.property-name.json, meta.object-literal.key.json string.quoted.double.json, meta.object.member.json string.quoted.double.json#4f46e5
meta.object-literal.value.json string.quoted.double.json, meta.array.literal.json string.quoted.double.json, string.quoted.double.json#15803d
constant.numeric.json#b45309
constant.language.boolean.json, constant.language.null.json, constant.language.json#be185d
punctuation.support.type.property-name.json, punctuation.separator.dictionary.key-value.json, punctuation.definition.dictionary.begin.json, punctuation.definition.dictionary.end.json, punctuation.definition.array.begin.json, punctuation.definition.array.end.json, punctuation.separator.array.json#475569
markup.heading, entity.name.section.markdown, markup.heading.markdown punctuation.definition.heading.markdown#0891b2bold
markup.bold, punctuation.definition.bold#0f172abold
markup.italic, punctuation.definition.italic#0f172aitalic
markup.inline.raw, markup.inline.raw.string.markdown#15803d
markup.fenced_code.block, markup.raw.block#0f172a
markup.underline.link, meta.link.inline, meta.link.reference#2563ebunderline
markup.inserted, diff.inserted, meta.diff.header.to-file#15803d
markup.deleted, diff.deleted, meta.diff.header.from-file#be123c
markup.changed, diff.changed#b45309
comment.keyword.todo, comment.keyword.fixme, comment.keyword.note, keyword.other.todo, keyword.other.fixme, keyword.other.note#b45309bold
string.regexp, string.regexp keyword.other, string.regexp punctuation.definition.string, string.regexp punctuation.definition.group, string.regexp punctuation.definition.character-class, string.regexp constant.character.escape#0891b2