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.activeBorder#6366f1
  • activityBar.background#141524
  • activityBar.foreground#A5B4FC
  • activityBarBadge.background#5E51AF
  • activityBarBadge.foreground#FFFFFF
  • badge.background#7C82F3
  • badge.foreground#FFFFFF
  • breadcrumb.foreground#7A83B6
  • button.background#7C82F3
  • button.foreground#FFFFFF
  • button.hoverBackground#8B9CF7
  • editor.background#141523
  • editor.foreground#E6E7F2
  • editor.lineHighlightBackground#262A52
  • editor.lineHighlightBorder#4B4FA3
  • editor.selectionBackground#4B4FA366
  • editor.selectionHighlightBackground#7F47D933
  • editorCursor.foreground#A5B4FC
  • editorGroupHeader.tabsBackground#1F2547
  • editorIndentGuide.activeBackground1#7C82F3
  • editorIndentGuide.background1#2A2F5A88
  • editorLineNumber.activeForeground#E6E7F2
  • editorLineNumber.foreground#5C64A8
  • editorWidget.background#1b1630
  • editorWidget.border#8F6DFF
  • focusBorder#8883d4
  • input.background#1b1630
  • input.border#5E51AF
  • input.foreground#8d8fef
  • list.activeSelectionBackground#3A3F7A
  • list.activeSelectionForeground#FFFFFF
  • list.hoverBackground#2B3461
  • menu.background#282834
  • menu.foreground#E6E7F2
  • menu.separatorBackground#272A49
  • progressBar.background#7C82F3
  • scrollbarSlider.activeBackground#A5B4FCAA
  • scrollbarSlider.background#343B6E66
  • scrollbarSlider.hoverBackground#7C82F388
  • sideBar.background#111120
  • sideBar.border#5E51AF
  • sideBar.foreground#fcfcfce3
  • sideBarTitle.foreground#B0ADFB
  • statusBar.background#2B2651
  • statusBar.border#574CA3
  • statusBar.foreground#FFFFFF
  • tab.activeBackground#3A3F7A
  • tab.activeForeground#FFFFFF
  • tab.inactiveBackground#141523
  • tab.inactiveForeground#7d86b1
  • terminal.ansiBlack#141523
  • terminal.ansiBlue#5F8DF0
  • terminal.ansiBrightBlack#6B6E8F
  • terminal.ansiBrightBlue#8FA8FF
  • terminal.ansiBrightCyan#9FE8D5
  • terminal.ansiBrightGreen#4CD9B0
  • terminal.ansiBrightMagenta#E6A3D0
  • terminal.ansiBrightRed#F07178
  • terminal.ansiBrightWhite#FFFFFF
  • terminal.ansiBrightYellow#F0E68C
  • terminal.ansiCyan#8EE6CF
  • terminal.ansiGreen#20BB94
  • terminal.ansiMagenta#CA5DAD
  • terminal.ansiRed#E05A6F
  • terminal.ansiWhite#E6E7F2
  • terminal.ansiYellow#E6D66F
  • terminal.background#1F2033
  • terminal.foreground#E6E7F2
  • terminal.selectionBackground#7F47D980
  • terminalCursor.foreground#8F6DFF
  • textLink.activeForeground#C7D2FE
  • textLink.foreground#A5B4FC
  • titleBar.activeBackground#2B3461
  • titleBar.activeForeground#C7d2FE
  • titleBar.inactiveBackground#141523
  • titleBar.inactiveForeground#8b9CF7
  • welcomePage.tileBackground#2B305E
  • welcomePage.tileHoverBackground#343B6E

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
emphasis—italic
strong—bold
header#B07AE6—
meta.diff, meta.diff.header#6B6E8F—
markup.inserted#20BB94—
markup.deleted#E05A6F—
markup.changed#E8A763—
invalid#E05A6Funderline italic
invalid.deprecated#E6E7F2underline italic
entity.name.filename#ECE29C—
markup.error#E05A6F—
markup.underline—underline
markup.bold#E8A763bold
markup.heading#B07AE6bold
markup.italic#ECE29Citalic
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext#5F8DF0—
markup.inline.raw, markup.raw.restructuredtext#20BB94—
markup.underline.link, markup.underline.link.image#5F8DF0—
meta.link.reference.def.restructuredtext, punctuation.definition.directive.restructuredtext, string.other.link.description, string.other.link.title#CA5DAD—
entity.name.directive.restructuredtext, markup.quote#ECE29Citalic
meta.separator.markdown#6B6E8F—
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown#20BB94—
punctuation.definition.constant.restructuredtext#B07AE6—
markup.heading.markdown punctuation.definition.string.begin, markup.heading.markdown punctuation.definition.string.end#B07AE6—
meta.paragraph.markdown punctuation.definition.string.begin, meta.paragraph.markdown punctuation.definition.string.end#E6E7F2—
markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.begin, markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.end#ECE29C—
entity.name.type.class, entity.name.class#5F8DF0bold
keyword.expressions-and-types.swift, keyword.other.this, variable.language, variable.language punctuation.definition.variable.php, variable.other.readwrite.instance.ruby, variable.parameter.function.language.special#B07AE6italic
entity.other.inherited-class#5F8DF0italic bold
comment, punctuation.definition.comment, unused.comment, wildcard.comment#565CA1—
comment keyword.codetag.notation, comment.block.documentation keyword, comment.block.documentation storage.type.class#CA5DAD—
comment.block.documentation entity.name.type#5F8DF0italic bold
comment.block.documentation entity.name.type punctuation.definition.bracket#5F8DF0bold
comment.block.documentation variable#E8A763italic
constant, variable.other.constant#B07AE6—
constant.character.escape, constant.character.string.escape, constant.regexp#CA5DAD—
entity.name.tag#CA5DADbold
entity.other.attribute-name.parent-selector#CA5DAD—
entity.other.attribute-name#20BB94italic
entity.name.function, meta.function-call.object, meta.function-call.php, meta.function-call.static, meta.method-call.java meta.method, meta.method.groovy, support.function.any-method.lua, keyword.operator.function.infix#20BB94—
entity.name.variable.parameter, meta.at-rule.function variable, meta.at-rule.mixin variable, meta.function.arguments variable.other.php, meta.selectionset.graphql meta.arguments.graphql variable.arguments.graphql, variable.parameter#E8A763italic
meta.decorator variable.other.readwrite, meta.decorator variable.other.property#20BB94italic
meta.decorator variable.other.object#20BB94—
keyword, punctuation.definition.keyword#CA5DAD—
keyword.control.new, keyword.operator.new—bold
meta.selector#CA5DAD—
support#5F8DF0italic bold
support.function.magic, support.variable, variable.other.predefined#B07AE6—
support.function, support.type.property-name—regular
constant.other.symbol.hashkey punctuation.definition.constant.ruby, entity.other.attribute-name.placeholder punctuation, entity.other.attribute-name.pseudo-class punctuation, entity.other.attribute-name.pseudo-element punctuation, meta.group.double.toml, meta.group.toml, meta.object-binding-pattern-variable punctuation.destructuring, punctuation.colon.graphql, punctuation.definition.block.scalar.folded.yaml, punctuation.definition.block.scalar.literal.yaml, punctuation.definition.block.sequence.item.yaml, punctuation.definition.entity.other.inherited-class, punctuation.function.swift, punctuation.separator.dictionary.key-value, punctuation.separator.hash, punctuation.separator.inheritance, punctuation.separator.key-value, punctuation.separator.key-value.mapping.yaml, punctuation.separator.namespace, punctuation.separator.pointer-access, punctuation.separator.slice, string.unquoted.heredoc punctuation.definition.string, support.other.chomping-indicator.yaml, punctuation.separator.annotation#CA5DAD—
keyword.operator.other.powershell, keyword.other.statement-separator.powershell, meta.brace.round, meta.function-call punctuation, punctuation.definition.arguments.begin, punctuation.definition.arguments.end, punctuation.definition.entity.begin, punctuation.definition.entity.end, punctuation.definition.tag.cs, punctuation.definition.type.begin, punctuation.definition.type.end, punctuation.section.scope.begin, punctuation.section.scope.end, punctuation.terminator.expression.php, storage.type.generic.java, string.template meta.brace, string.template punctuation.accessor#E6E7F2—
meta.string-contents.quoted.double punctuation.definition.variable, punctuation.definition.interpolation.begin, punctuation.definition.interpolation.end, punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded.begin, punctuation.section.embedded.coffee, punctuation.section.embedded.end, punctuation.section.embedded.end source.php, punctuation.section.embedded.end source.ruby, punctuation.definition.variable.makefile#CA5DAD—
entity.name.function.target.makefile, entity.name.section.toml, entity.name.tag.yaml, variable.other.key.toml#5F8DF0bold
constant.other.date, constant.other.timestamp#E8A763—
variable.other.alias.yaml#20BB94italic underline
storage, meta.implementation storage.type.objc, meta.interface-or-protocol storage.type.objc, source.groovy storage.type.def#CA5DAD—
entity.name.type, keyword.primitive-datatypes.swift, keyword.type.cs, meta.protocol-list.objc, meta.return-type.objc, source.go storage.type, source.groovy storage.type, source.java storage.type, source.powershell entity.other.attribute-name, storage.class.std.rust, storage.type.attribute.swift, storage.type.c, storage.type.core.rust, storage.type.cs, storage.type.groovy, storage.type.objc, storage.type.php, storage.type.haskell, storage.type.ocaml#5F8DF0italic
entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type#E8A763—
storage.modifier#CA5DAD—
string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp#ECE29C—
punctuation.definition.group.capture.regexp#CA5DAD—
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end#E05A6F—
punctuation.definition.character-class.regexp#5F8DF0bold
punctuation.definition.group.regexp#E8A763—
punctuation.definition.group.assertion.regexp, keyword.operator.negation.regexp#E05A6F—
meta.assertion.look-ahead.regexp#20BB94—
string#E1E783—
punctuation.definition.string.begin, punctuation.definition.string.end#ECE29C—
punctuation.support.type.property-name.begin, punctuation.support.type.property-name.end#8ba0fe—
string.quoted.docstring.multi, string.quoted.docstring.multi.python punctuation.definition.string.begin, string.quoted.docstring.multi.python punctuation.definition.string.end, string.quoted.docstring.multi.python constant.character.escape#6B6E8F—
variable, constant.other.key.perl, support.variable.property, variable.other.constant.js, variable.other.constant.ts, variable.other.constant.tsx#E6E7F2—
meta.import variable.other.readwrite, meta.variable.assignment.destructured.object.coffee variable#E8A763italic
meta.import variable.other.readwrite.alias, meta.export variable.other.readwrite.alias, meta.variable.assignment.destructured.object.coffee variable variable#E6E7F2—
meta.selectionset.graphql variable#ECE29C—
meta.selectionset.graphql meta.arguments variable#E6E7F2—
entity.name.fragment.graphql, variable.fragment.graphql#5F8DF0bold
constant.other.symbol.hashkey.ruby, keyword.operator.dereference.java, keyword.operator.navigation.groovy, meta.scope.for-loop.shell punctuation.definition.string.begin, meta.scope.for-loop.shell punctuation.definition.string.end, meta.scope.for-loop.shell string, storage.modifier.import, punctuation.section.embedded.begin.tsx, punctuation.section.embedded.end.tsx, punctuation.section.embedded.begin.jsx, punctuation.section.embedded.end.jsx, punctuation.separator.list.comma.css, constant.language.empty-list.haskell#E6E7F2—
source.shell variable.other#B07AE6—
support.constant#B07AE6—
meta.scope.prerequisites.makefile#ECE29C—
meta.attribute-selector.scss#ECE29C—
punctuation.definition.attribute-selector.end.bracket.square.scss, punctuation.definition.attribute-selector.begin.bracket.square.scss#E6E7F2—
meta.preprocessor.haskell#6B6E8F—
log.error#E05A6Fbold
log.warning#ECE29Cbold
support.type.property-name.json#8FA8FF—
string.quoted.double.json#20BB94—
constant.numeric.json#E6D66F—
constant.language.json#B07AE6—
punctuation.separator.key-value.json, punctuation.separator.dictionary.json#6B6E8F—
punctuation.definition.string.begin.json, punctuation.definition.string.end.json#20BB94—
Midnight Purple - Dark Theme by Barbara_Xavier - VS Code Theme