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#4a148c30
  • 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#eeeeee
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#eeeeee
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#999999
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