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#150A1E
  • activityBar.foreground#E8D5E8
  • activityBarBadge.background#A8577E
  • activityBarBadge.foreground#F5F5F5
  • button.background#44275A
  • button.foreground#E8D5E8
  • dropdown.background#2B1B3D
  • dropdown.foreground#E8D5E8
  • editor.background#0A0009
  • editor.foreground#E8D5E8
  • editor.lineHighlightBackground#2B1B3D
  • editor.selectionBackground#A8577E
  • editor.selectionHighlightBackground#A8577E50
  • editor.wordHighlightBackground#A8577E40
  • editorCursor.foreground#A8577E
  • editorGroupHeader.tabsBackground#150A1E
  • editorIndentGuide.activeBackground#A8577E
  • editorIndentGuide.background#44275A
  • editorWhitespace.foreground#44275A
  • focusBorder#A8577E
  • input.background#150A1E
  • input.foreground#E8D5E8
  • input.placeholderForeground#D4A5C7
  • list.activeSelectionBackground#44275A
  • list.activeSelectionForeground#E8D5E8
  • list.hoverBackground#2B1B3D
  • list.hoverForeground#E8D5E8
  • sideBar.background#150A1E
  • sideBar.foreground#E8D5E8
  • sideBarTitle.foreground#D4A5C7
  • statusBar.background#44275A
  • statusBar.foreground#E8D5E8
  • statusBar.noFolderBackground#0A0009
  • tab.activeBackground#2B1B3D
  • tab.activeForeground#E8D5E8
  • tab.inactiveBackground#150A1E
  • tab.inactiveForeground#D4A5C7
  • terminal.ansiBlack#2B1B3D
  • terminal.ansiBlue#7B5EA8
  • terminal.ansiBrightBlack#44275A
  • terminal.ansiBrightBlue#9B7EC8
  • terminal.ansiBrightCyan#D0B8E8
  • terminal.ansiBrightGreen#A898C0
  • terminal.ansiBrightMagenta#D4A5C7
  • terminal.ansiBrightRed#C96B8E
  • terminal.ansiBrightWhite#F5F5F5
  • terminal.ansiBrightYellow#E8D5E8
  • terminal.ansiCyan#B8A0D0
  • terminal.ansiGreen#8A7A9E
  • terminal.ansiMagenta#A8577E
  • terminal.ansiRed#A8577E
  • terminal.ansiWhite#D4A5C7
  • terminal.ansiYellow#D4A5C7
  • terminal.background#0A0009
  • terminal.foreground#E8D5E8
  • titleBar.activeBackground#2B1B3D
  • titleBar.activeForeground#E8D5E8

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#7A5A8Aitalic
string, string.quoted.single, string.quoted.double, string.quoted.triple, string.template, constant.character, constant.other.symbol#D4A5C7
constant.numeric, constant.language, constant.character.escape, constant.other, support.constant#C88FA8
variable, variable.other, variable.parameter, variable.language, variable.object.property#E8D5E8
keyword, keyword.control, keyword.operator, keyword.other, storage.type, storage.modifier, punctuation.decorator#A8577E
entity.name.function, entity.name.method, support.function, meta.function-call, meta.method-call, meta.function.dart#C070A0
entity.name.type, entity.name.class, entity.name.struct, entity.name.enum, entity.name.union, entity.name.trait, entity.name.interface, support.class, support.type, meta.return-type#D4A5C7bold
meta.decorator, meta.annotation, punctuation.definition.annotation#9B5878
entity.name.tag, punctuation.definition.tag#A8577E
entity.other.attribute-name, entity.other.attribute-name.html, entity.other.attribute-name.css, support.type.property-name.css, entity.other.attribute-name.class#D4A5C7
support.type.primitive, support.type.builtin, keyword.type, storage.type.primitive, storage.type.built-in, support.type.primitive.dart#D4A5C7
string.regexp, constant.character.escape.regex#D4A5C7
markup.heading, entity.name.section#A8577Ebold
markup.boldbold
markup.italicitalic
markup.inline.raw, markup.fenced_code, markup.raw#D4A5C7
support.type.property-name.json, support.type.property-name.jsonc#D4A5C7
keyword.operator.expression, keyword.operator.new, keyword.operator.optional, keyword.operator.comparison, keyword.operator.arithmetic, keyword.operator.assignment, keyword.operator.logical#CF8FAE
meta.embedded, source.groovy.embedded, meta.template.expression#E8D5E8
meta.object-literal.key, variable.object.property, variable.other.property, variable.other.object.property#D4A5C7
support.variable.property, support.variable.object.process, support.variable.object.node#D4A5C7
source.rust storage.type.rust, source.rust entity.name.type.rust, source.rust entity.name.type.struct.rust#D4A5C7
source.rust keyword.operator, source.rust keyword.operator.arithmetic, source.rust keyword.operator.logical#CF8FAE
source.python support.type.python, source.python support.function.builtin.python#C070A0
source.cs entity.name.type.class.cs, source.cs storage.type.cs#D4A5C7
source.dart support.class.dart, source.dart support.type.dart#D4A5C7
source.prisma keyword.operator, source.prisma constant.language, source.prisma keyword.type#A8577E
source.graphql support.type, source.graphql constant.character#D4A5C7
source.sql keyword.other, source.sql storage.type#A8577E
meta.jsx.children, meta.embedded.block.tsx, meta.embedded.block.jsx#E8D5E8
meta.decorator.ts, meta.decorator.tsx, meta.decorator.angular#9B5878
entity.name.tag.yaml, string.unquoted.plain.out.yaml#D4A5C7
support.type.property-name.toml, entity.name.tag.toml#D4A5C7
markup.underline.link, string.other.link.title.markdown, meta.link.inline.markdown#A8577E
markup.quote#7A5A8Aitalic
punctuation.definition.list.begin.markdown, beginning.punctuation.definition.list.markdown#A8577E
variable.css, variable.other.custom-property.css, support.type.custom-property.css#CF8FAE
support.macro.rust, entity.name.function.macro.rust, meta.macro.rust entity.name.function.rust#C070A0
storage.modifier.lifetime.rust, entity.name.lifetime.rust, punctuation.definition.lifetime.rust#9B5878
entity.name.package.go#C88FA8
entity.name.package.java, support.other.package.java, entity.name.package.kotlin#C88FA8