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#04060a
  • activityBar.border#0b1220
  • activityBar.foreground#f8fafc
  • activityBar.inactiveForeground#94a3b8
  • badge.background#22d3ee
  • badge.foreground#06242b
  • descriptionForeground#cbd5e1
  • dropdown.background#0b1220
  • dropdown.border#1f2937
  • dropdown.foreground#ffffff
  • editor.background#05070c
  • editor.findMatchBackground#fbbf244d
  • editor.findMatchHighlightBackground#fbbf2433
  • editor.foreground#f8fafc
  • editor.hoverHighlightBackground#22d3ee1a
  • editor.inactiveSelectionBackground#22d3ee20
  • editor.lineHighlightBackground#0b1220cc
  • editor.selectionBackground#22d3ee2e
  • editor.wordHighlightBackground#38bdf830
  • editor.wordHighlightStrongBackground#38bdf84a
  • editorBracketMatch.background#22d3ee26
  • editorBracketMatch.border#22d3ee99
  • editorCursor.foreground#22d3ee
  • editorGroupHeader.tabsBackground#05070c
  • editorIndentGuide.activeBackground1#94a3b8
  • editorIndentGuide.background1#1f2937
  • editorLineNumber.activeForeground#e2e8f0
  • editorLineNumber.foreground#334155
  • editorOverviewRuler.errorForeground#fb7185ee
  • editorOverviewRuler.infoForeground#60a5faee
  • editorOverviewRuler.warningForeground#fbbf24ee
  • errorForeground#fb7185
  • focusBorder#22d3ee
  • foreground#f8fafc
  • gitDecoration.addedResourceForeground#a3e635
  • gitDecoration.deletedResourceForeground#fb7185
  • gitDecoration.ignoredResourceForeground#94a3b8
  • gitDecoration.modifiedResourceForeground#60a5fa
  • gitDecoration.untrackedResourceForeground#22d3ee
  • input.background#0b1220
  • input.border#1f2937
  • input.foreground#ffffff
  • input.placeholderForeground#94a3b8
  • list.activeSelectionBackground#22d3ee2e
  • list.activeSelectionForeground#ffffff
  • list.hoverBackground#0b1220
  • list.hoverForeground#ffffff
  • list.inactiveSelectionBackground#0b1220
  • notificationCenterHeader.background#04060a
  • notifications.background#0b1220
  • notifications.border#1f2937
  • notifications.foreground#ffffff
  • panel.background#05070c
  • panel.border#0b1220
  • sideBar.background#04060a
  • sideBar.border#0b1220
  • sideBar.foreground#f8fafc
  • sideBarTitle.foreground#ffffff
  • statusBar.background#04060a
  • statusBar.border#0b1220
  • statusBar.debuggingBackground#1d4ed8
  • statusBar.debuggingForeground#ffffff
  • statusBar.foreground#f8fafc
  • tab.activeBackground#0b1220
  • tab.activeBorderTop#22d3ee
  • tab.activeForeground#ffffff
  • tab.border#0b1220
  • tab.inactiveBackground#05070c
  • tab.inactiveForeground#cbd5e1
  • terminal.ansiBlack#0b1220
  • terminal.ansiBlue#60a5fa
  • terminal.ansiCyan#22d3ee
  • terminal.ansiGreen#a3e635
  • terminal.ansiMagenta#f472b6
  • terminal.ansiRed#fb7185
  • terminal.ansiWhite#ffffff
  • terminal.ansiYellow#fbbf24
  • terminal.background#05070c
  • terminal.foreground#f8fafc
  • terminalCursor.foreground#22d3ee
  • titleBar.activeBackground#04060a
  • titleBar.activeForeground#f8fafc
  • titleBar.inactiveBackground#04060a
  • titleBar.inactiveForeground#94a3b8

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#94a3b8italic
string, punctuation.definition.string#a3e635
string.template, punctuation.definition.template-expression, punctuation.section.embedded, meta.template.expression#22d3ee
constant.numeric#fbbf24
constant.language#f472b6
keyword, storage.type, storage.modifier, keyword.control, keyword.operator.new, keyword.operator.expression, keyword.operator.logical#22d3ee
keyword.operator, punctuation, meta.brace, meta.delimiter#e2e8f0
entity.name.function, support.function, meta.function-call, meta.method-call#60a5fa
variable.parameter, meta.parameters, meta.function.parameters#ffffff
variable, meta.definition.variable, entity.name.variable#ffffff
variable.other.constant, entity.name.constant#fbbf24
entity.name.type, support.type, support.class, entity.name.class, entity.name.interface, entity.name.struct, entity.name.enum#93c5fd
entity.name.type.parameter, meta.type.parameters, meta.type.annotation#22d3ee
keyword.control.import, keyword.control.export, keyword.control.from, keyword.control.as#22d3ee
variable.language.this, variable.language.super, variable.language.self#f472b6
variable.other.property, support.variable.property#c7d2fe
entity.name.tag#22d3ee
entity.other.attribute-name#93c5fd
invalid, invalid.deprecated#fb7185underline
support.type.property-name.json, meta.object-literal.key.json string.quoted.double.json, meta.object.member.json string.quoted.double.json#c7d2fe
meta.object-literal.value.json string.quoted.double.json, meta.array.literal.json string.quoted.double.json, string.quoted.double.json#a3e635
constant.numeric.json#fbbf24
constant.language.boolean.json, constant.language.null.json, constant.language.json#f472b6
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#e2e8f0
markup.heading, entity.name.section.markdown, markup.heading.markdown punctuation.definition.heading.markdown#22d3eebold
markup.bold, punctuation.definition.bold#ffffffbold
markup.italic, punctuation.definition.italic#ffffffitalic
markup.inline.raw, markup.inline.raw.string.markdown#a3e635
markup.fenced_code.block, markup.raw.block#f8fafc
markup.underline.link, meta.link.inline, meta.link.reference#60a5faunderline
markup.inserted, diff.inserted, meta.diff.header.to-file#a3e635
markup.deleted, diff.deleted, meta.diff.header.from-file#fb7185
markup.changed, diff.changed#fbbf24
comment.keyword.todo, comment.keyword.fixme, comment.keyword.note, keyword.other.todo, keyword.other.fixme, keyword.other.note#fbbf24bold
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#22d3ee