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#1e0a1e
  • activityBar.foreground#ce93d8
  • activityBarBadge.background#9c27b0
  • activityBarBadge.foreground#eeeeee
  • button.background#6a4c93
  • button.foreground#eeeeee
  • button.hoverBackground#7e57c2
  • button.secondaryBackground#424242
  • button.secondaryForeground#e0e0e0
  • button.secondaryHoverBackground#616161
  • dropdown.background#2d1b2d
  • dropdown.border#6a4c93
  • dropdown.foreground#f3e5f5
  • editor.background#1a0d1a
  • editor.findMatchBackground#ffeb3b40
  • editor.findMatchHighlightBackground#ffeb3b20
  • editor.foreground#f3e5f5
  • editor.lineHighlightBackground#4a148c0A
  • editor.selectionBackground#7b1fa260
  • editor.selectionHighlightBackground#7b1fa220
  • editor.wordHighlightBackground#9c27b030
  • editor.wordHighlightStrongBackground#9c27b050
  • editorBracketHighlight.foreground1#ff6b9d
  • editorBracketHighlight.foreground2#4fc3f7
  • editorBracketHighlight.foreground3#81c784
  • editorBracketHighlight.foreground4#ffb74d
  • editorBracketHighlight.foreground5#ba68c8
  • editorBracketHighlight.foreground6#26a69a
  • editorBracketMatch.background#7b1fa240
  • editorBracketMatch.border#ab47bc
  • editorCursor.foreground#ba68c8
  • editorGutter.addedBackground#4caf50
  • editorGutter.background#1a0d1a
  • editorGutter.deletedBackground#f44336
  • editorGutter.modifiedBackground#ffeb3b
  • editorIndentGuide.activeBackground#ab47bc
  • editorIndentGuide.background#4a148c30
  • editorLineNumber.activeForeground#ce93d8
  • editorLineNumber.foreground#8e24aa
  • input.background#2d1b2d
  • input.border#6a4c93
  • input.foreground#f3e5f5
  • input.placeholderForeground#9575cd
  • list.activeSelectionBackground#6a4c9350
  • list.activeSelectionForeground#f3e5f5
  • list.hoverBackground#6a4c9320
  • list.inactiveSelectionBackground#6a4c9330
  • menu.background#2d1b2d
  • menu.foreground#f3e5f5
  • menu.selectionBackground#6a4c93
  • menu.selectionForeground#eeeeee
  • notifications.background#2d1b2d
  • notifications.border#6a4c93
  • notifications.foreground#f3e5f5
  • panel.background#2a1f2a
  • panel.border#6a4c9330
  • sideBar.background#2a1f2a
  • sideBar.foreground#e1bee7
  • sideBarTitle.foreground#ab47bc
  • statusBar.background#6a1b9a
  • statusBar.debuggingBackground#f44336
  • statusBar.foreground#eeeeee
  • tab.activeBackground#1a0d1a
  • tab.activeBorder#ab47bc
  • tab.activeForeground#f3e5f5
  • tab.inactiveBackground#221122
  • terminal.ansiBlack#263238
  • terminal.ansiBlue#2196f3
  • terminal.ansiBrightBlack#37474f
  • terminal.ansiBrightBlue#448aff
  • terminal.ansiBrightCyan#18ffff
  • terminal.ansiBrightGreen#69f0ae
  • terminal.ansiBrightMagenta#ff4081
  • terminal.ansiBrightRed#ff5252
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#ffff00
  • terminal.ansiCyan#00bcd4
  • terminal.ansiGreen#4caf50
  • terminal.ansiMagenta#e91e63
  • terminal.ansiRed#f44336
  • terminal.ansiWhite#eceff1
  • terminal.ansiYellow#ffeb3b
  • terminal.background#2a1d2a
  • terminal.foreground#fae8fa
  • widget.shadow#00000030

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment, comment.line, comment.block#8e24aaitalic
comment.block.documentation, comment.line.documentation#a5d6a7italic
keyword, keyword.control, keyword.operator.new, keyword.other.using, keyword.other.import#ce93d8bold
keyword.control.flow, keyword.control.conditional, keyword.control.loop, keyword.control.exception, keyword.control.trycatch#ff6b9dbold
storage.type, storage.modifier, storage.type.class, storage.type.function, storage.type.interface#4fc3f7bold
keyword.operator, keyword.operator.arithmetic, keyword.operator.comparison, keyword.operator.logical, keyword.operator.assignment#81c784—
keyword.operator.word, keyword.operator.typeof, keyword.operator.instanceof#ff6b9d—
variable, variable.other, variable.language.this, variable.language.super#f3e5f5—
variable.other.property, variable.other.object.property, variable.other.member#a5d6a7—
variable.parameter, variable.parameter.function#ffcc02italic
entity.name.function, entity.name.method, meta.function-call entity.name.function, support.function#ba68c8—
meta.function entity.name.function, meta.method entity.name.function#ab47bcbold
support.function.builtin, support.function.magic#26a69a—
entity.name.class, entity.name.type.class, entity.other.inherited-class#ffcc02bold
entity.name.interface, entity.name.type.interface#4fc3f7bold
entity.name.type, support.type, meta.type.annotation#81c784—
string, string.quoted, string.quoted.single, string.quoted.double#a5d6a7—
string.template, string.quoted.template#c8e6c9—
string.interpolated, meta.template.expression#4fc3f7—
string.regexp, string.regex#ff9800—
constant.numeric, constant.numeric.integer, constant.numeric.float, constant.numeric.decimal, constant.numeric.hex, constant.numeric.binary, constant.numeric.octal#ffcc02—
constant.language.boolean, constant.language.true, constant.language.false#ff6b9dbold
constant.language.null, constant.language.undefined, constant.language.none#f44336bold
constant.other, variable.other.constant#ffcc02italic
keyword.control.import, keyword.control.export, keyword.control.from, keyword.control.as#4fc3f7—
keyword.control.flow.async, keyword.control.flow.await#ff6b9ditalic
meta.object-binding-pattern-variable entity.name.binding, meta.array-binding-pattern-variable entity.name.binding#a5d6a7—
variable.language.special.self.python, variable.language.special.cls.python#4fc3f7italic
support.function.magic.python#ff9800—
entity.name.function.decorator.python, punctuation.definition.decorator.python#ffcc02—
punctuation.definition.annotation, storage.type.annotation#ffcc02—
punctuation.definition.typeparameters, entity.name.type.parameter#4fc3f7—
keyword.control.directive, meta.preprocessor#4fc3f7—
keyword.operator.pointer, keyword.operator.address#ff6b9d—
entity.name.type.lifetime.rust, punctuation.definition.lifetime.rust#ff9800—
entity.name.function.macro.rust, punctuation.definition.macro.rust#4fc3f7—
entity.name.package.go#a5d6a7—
punctuation.definition.variable.php, variable.other.php#f3e5f5—
entity.name.type.namespace.php#a5d6a7—
entity.name.tag.html, punctuation.definition.tag#ce93d8—
entity.other.attribute-name.html#ffcc02—
string.quoted.double.html, string.quoted.single.html#a5d6a7—
support.type.property-name.css#4fc3f7—
support.constant.property-value.css, constant.numeric.css#a5d6a7—
entity.name.tag.css, entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#ffcc02—
keyword.other.unit.css#ff9800—
source.json meta.structure.dictionary.json support.type.property-name.json#ce93d8bold
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#e1bee7bold
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#f3e5f5bold
punctuation.support.type.property-name.begin.json, punctuation.support.type.property-name.end.json, punctuation.separator.dictionary.key-value.json, punctuation.separator.array.json#d1c4e9—
string.quoted.double.json, string.quoted.single.json#a5d6a7—
constant.numeric.json#ffcc02—
constant.language.json#ff6b9dbold
constant.language.null.json#f44336bold
entity.name.tag.yaml#ce93d8—
string.unquoted.plain.out.yaml#a5d6a7—
markup.heading, punctuation.definition.heading.markdown#ce93d8bold
markup.bold#ffcc02bold
markup.italic#4fc3f7italic
markup.inline.raw.markdown, markup.fenced_code.block.markdown#26a69a—
markup.underline.link.markdown#81c784—
markup.quote.markdown#a5d6a7italic
keyword.other.sql#ce93d8bold
support.function.sql#ba68c8—
punctuation, punctuation.separator, punctuation.terminator#d1c4e9—
punctuation.section.brackets, punctuation.section.parens, punctuation.section.braces#ce93d8—
source.graphql keyword.operation, source.graphql meta.type.interface#26c6dabold
source.graphql variable.graphql, source.graphql meta.selection-set#80cbc4—
keyword.other.special-method.dockerfile, source.dockerfile keyword.operator.flag#f48fb1bold
entity.name.type.anchor.yaml, variable.other.alias.yaml#b39ddbitalic
variable.other.special.shell, variable.other.positional.shell, variable.other.normal.shell#ce93d8—
meta.decorator.ts entity.name.function, meta.decorator.tsx entity.name.function#dce775italic
comment.block.documentation storage.type.class.jsdoc, comment.block.documentation punctuation.definition.block.tag.jsdoc#aed581bold
markup.changed, meta.diff.header.git#fff176—
meta.decorator.python, meta.decorator.identifier.python#ffb74ditalic
meta.attribute.rust, meta.attribute.identifier.rust#ff9800italic