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#000000
  • activityBar.border#2D283A
  • activityBar.foreground#BB9AF7
  • activityBarBadge.background#FFB347
  • activityBarBadge.foreground#000000
  • badge.background#BB9AF7
  • badge.foreground#000000
  • breadcrumb.activeSelectionForeground#EEE8D5
  • breadcrumb.foreground#6B6080
  • button.background#BB9AF7
  • button.foreground#000000
  • button.hoverBackground#A370F0
  • commandCenter.background#000000
  • commandCenter.border#4A3B5C
  • commandCenter.foreground#EEE8D5
  • dropdown.background#000000
  • dropdown.border#4A3B5C
  • dropdown.foreground#EEE8D5
  • editor.background#000000
  • editor.foreground#EEE8D5
  • editor.lineHighlightBackground#3D334D
  • editor.selectionBackground#6B608099
  • editor.selectionHighlightBackground#3D334D80
  • editor.selectionHighlightBorder#BB9AF7
  • editorCursor.foreground#FF9E64
  • editorGroup.border#2D283A
  • editorGroup.dropBackground#2D283A80
  • editorGroupHeader.border#2D283A
  • editorGroupHeader.tabsBackground#000000
  • editorIndentGuide.activeBackground1#BB9AF7
  • editorIndentGuide.background1#312A3D
  • editorLightBulb.foreground#FF9E64
  • editorLineNumber.activeForeground#BB9AF7
  • editorLineNumber.foreground#4A3B5C
  • input.background#000000
  • input.border#4A3B5C
  • input.foreground#EEE8D5
  • input.placeholderForeground#6B6080
  • list.activeSelectionBackground#2D2438
  • list.activeSelectionForeground#BB9AF7
  • list.focusBackground#3D334D
  • list.hoverBackground#000000
  • list.inactiveSelectionBackground#231D2B
  • panel.border#2D283A
  • settings.headerForeground#BB9AF7
  • settings.modifiedItemIndicator#BB9AF7
  • sideBar.background#000000
  • sideBar.border#2D283A
  • sideBar.foreground#EEE8D5
  • sideBarSectionHeader.background#000000
  • sideBarSectionHeader.foreground#BB9AF7
  • statusBar.background#000000
  • statusBar.border#312A3D
  • statusBar.foreground#EEE8D5
  • statusBarItem.hoverBackground#000000
  • tab.activeBackground#000000
  • tab.activeBorderTop#BB9AF7
  • tab.activeForeground#EEE8D5
  • tab.border#2D283A
  • tab.inactiveBackground#000000
  • tab.inactiveForeground#6B6080
  • terminal.ansiBlack#000000
  • terminal.ansiBlue#7AA2F7
  • terminal.ansiBrightBlack#4A3B5C
  • terminal.ansiBrightBlue#7AA2F7
  • terminal.ansiBrightCyan#B4F9F8
  • terminal.ansiBrightGreen#9ECE6A
  • terminal.ansiBrightMagenta#BB9AF7
  • terminal.ansiBrightRed#F7768E
  • terminal.ansiBrightWhite#EEE8D5
  • terminal.ansiBrightYellow#FF9E64
  • terminal.ansiCyan#B4F9F8
  • terminal.ansiGreen#9ECE6A
  • terminal.ansiMagenta#BB9AF7
  • terminal.ansiRed#F7768E
  • terminal.ansiWhite#EEE8D5
  • terminal.ansiYellow#FF9E64
  • terminal.background#000000
  • terminal.foreground#EEE8D5
  • terminalCursor.foreground#FF9E64
  • titleBar.activeBackground#000000
  • titleBar.activeForeground#EEE8D5
  • titleBar.border#2D283A
  • titleBar.inactiveBackground#000000
  • titleBar.inactiveForeground#6B6080
  • tree.indentGuidesStroke#4A3B5C

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
entity.name.type.class.java#BB9AF7bold
entity.name.type.interface.java#7AA2F7italic
entity.name.function.java#FF9E64italic
variable.other.java#9ECE6A
keyword.other.java, storage.type.java#BB9AF7bold
storage.type.annotation.java, meta.annotation.java#FFB347italic
storage.modifier.import.java, storage.modifier.package.java#6B6080italic
string.quoted.double.java, string.quoted.single.java#FF9E64
constant.numeric.java#B4F9F8
comment.line.double-slash.java, comment.block.documentation.java#6B6080italic
keyword.control, keyword.control.conditional, keyword.control.loop, keyword.control.flow#FF9E64italic bold
keyword.control.at-rule.import.css, keyword.control.at-rule.import.scss, keyword.control.at-rule.use.scss, keyword.control.at-rule.forward.scss, keyword.control.at-rule.media.css, keyword.control.at-rule.media.scss, keyword.control.at-rule.keyframes.css, keyword.control.at-rule.keyframes.scss, keyword.control.at-rule.supports.css, keyword.control.at-rule.supports.scss, keyword.control.at-rule.mixin.scss, keyword.control.at-rule.include.scss, keyword.control.at-rule.extend.scss, keyword.control.at-rule.function.scss, keyword.control.at-rule.css, punctuation.definition.keyword.css, punctuation.definition.keyword.scss#BB9AF7bold
keyword.control.if.scss, keyword.control.else.scss, keyword.control.for.scss, keyword.control.each.scss, keyword.control.while.scss, keyword.control.return.scss, keyword.control.warn.scss, keyword.control.content.scss, keyword.control.at-rule.if.scss, keyword.control.at-rule.else.scss, keyword.control.at-rule.for.scss, keyword.control.at-rule.each.scss, keyword.control.at-rule.while.scss, keyword.control.at-rule.return.scss#FF9E64italic bold
entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-class.scss, punctuation.definition.entity.css, punctuation.definition.entity.scss#7AA2F7italic
entity.other.attribute-name.pseudo-element.css, entity.other.attribute-name.pseudo-element.scss#B4F9F8italic
support.type.vendored-property-name.css, support.type.vendored-property-name.scss#B4F9F8
variable.scss, variable.other.scss, variable.other.less, variable.less#FF9E64bold
entity.name.function.scss, entity.name.function.less, support.function.misc.scss#7AA2F7italic
punctuation.definition.interpolation.begin.bracket.curly.scss, punctuation.definition.interpolation.end.bracket.curly.scss, punctuation.section.interpolation.begin.scss, punctuation.section.interpolation.end.scss#F7768Ebold
variable.interpolation.scss#C3E88D
entity.other.attribute-name.placeholder.css, entity.other.attribute-name.placeholder.scss#FFB347bold
keyword.operator.comparison#FFB347bold
keyword.operator.logical#9ECE6Abold
keyword.operator.assignment#7AA2F7bold
keyword.operator#F7768E
variable.other.env, support.type.property-name.env#BB9AF7bold
keyword.operator.assignment.env#7AA2F7
string.unquoted.env, constant.other.env#FF9E64
comment.line.number-sign.env#6B6080italic
keyword.other.DML.sql, keyword.other.DDL.sql, keyword.other.TCL.sql, keyword.other.DCL.sql, keyword.control.sql#BB9AF7bold
support.function.sql#7AA2F7italic
string.quoted.single.sql, string.quoted.double.sql#FF9E64
constant.numeric.sql#B4F9F8
comment.line.double-dash.sql, comment.block.sql#6B6080italic
variable.other.mongodb.operator, support.type.property-name.mongodb#BB9AF7bold
support.function.mongodb#7AA2F7italic
string.quoted.double.mongodb, string.quoted.single.mongodb#FF9E64
constant.numeric.mongodb#B4F9F8
comment.line.double-slash.mongodb, comment.block.mongodb#6B6080italic
storage.type, storage.modifier, keyword.declaration.js, keyword.declaration.ts#BB9AF7bold
keyword.control.import, keyword.control.export, keyword.control.from, keyword.control.as, keyword.control.default, keyword.other.import, keyword.other.export, keyword.other.from#BB9AF7bold
constant.language.import-export-all, constant.language.import-export-all.js, constant.language.import-export-all.ts, keyword.operator.module, storage.type.namespace.wildcard#F7768Ebold
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded.begin, punctuation.section.embedded.end#F7768Ebold
meta.template.expression, meta.embedded.expression#EEE8D5
meta.template.expression variable.other, meta.embedded.expression variable.other#EEE8D5
meta.template.expression support.type, meta.embedded.expression support.type#4EC9B0
variable.other.property, variable.other.object.property, support.type.property-name.css, support.type.property-name.scss, entity.other.attribute-name.variable.css, entity.other.attribute-name.variable.scss, meta.property.object.js, variable.other.property.js#B4F9F8bold
variable.other.object, variable.other.readwrite.alias#EEE8D5
entity.name.function, support.function, variable.function#7AA2F7italic
variable.parameter#EEE8D5
entity.name.tag, punctuation.definition.tag#4EC9B0
entity.other.attribute-name#BB9AF7italic
string#FF9E64
constant.language#BB9AF7bold
constant.numeric, support.constant.property-value.css, support.constant.property-value.scss, support.constant.color.w3c-standard-color-name.css, support.constant.color.w3c-standard-color-name.scss, variable.parameter.url.css, variable.parameter.url.scss#FF9E64
entity.other.attribute-name.id, entity.other.attribute-name.id.css, entity.other.attribute-name.id.scss, entity.other.attribute-name.class, entity.other.attribute-name.class.css, entity.other.attribute-name.class.scss#FF9E64bold
support.type.property-name.json, meta.mapping.key.json#B4F9F8bold
string.json, constant.numeric.json#FFB48A
comment, punctuation.definition.comment#6B6080italic
markup.heading, markup.heading.markdown, markup.heading.marker#BB9AF7bold
punctuation.definition.heading#4A3B5C
markup.bold, markup.bold.markdown#7AA2F7bold
markup.italic, markup.italic.markdown#FF9E64italic
markup.list.bullet, markup.list.markdown, punctuation.definition.list#4A3B5Cbold
markup.list#EEE8D5
markup.underline.link, markup.link, string.link#B4F9F8underline
markup.inline.raw, markup.fenced_code.block#9ECE6A
markup.quote, markup.other#6B6080italic
variable.css, variable.other.custom-property.css, variable.other.custom-property.scss#FF9E64bold
variable.other.custom-property.use.css, variable.other.custom-property.use.scss#FFB347
keyword.other.unit.css, keyword.other.unit.scss, keyword.other.unit.less#9ECE6A
keyword.other.important.css, keyword.other.important.scss#F7768Ebold italic
entity.name.tag.css, entity.name.tag.scss, entity.name.tag.less#4EC9B0
entity.name.type, entity.name.type.interface, entity.name.type.alias, entity.name.type.enum, entity.name.type.class#4EC9B0bold
support.type.primitive.ts, support.type.primitive.tsx, support.type.builtin.ts, support.type.builtin.tsx, keyword.type.ts, keyword.type.tsx#B4F9F8italic
meta.decorator, meta.decorator.ts, meta.decorator.tsx, storage.type.decorator, entity.name.function.decorator, entity.name.type.decorator, punctuation.decorator#BB9AF7italic bold
punctuation.definition.decorator, punctuation.decorator.ts, punctuation.decorator.tsx#F7768Ebold
support.class.component.jsx, support.class.component.tsx, entity.name.tag.js.jsx, entity.name.tag.tsx#4EC9B0bold
variable.language, variable.language.this, variable.language.super#FFB347italic
string.regexp, constant.regexp#9ECE6A
constant.other.character-class.regexp, keyword.operator.negation.regexp, punctuation.definition.character-class.regexp#FFB347
keyword.operator.quantifier.regexp, keyword.operator.anchor.regexp#F7768Ebold
punctuation.definition.group.regexp, keyword.operator.or.regexp#BB9AF7
keyword.operator.await, keyword.control.await, keyword.operator.async, storage.modifier.async#FF9E64italic bold
constant.language.json, constant.language.boolean.true.json, constant.language.boolean.false.json, constant.language.null.json#BB9AF7bold
entity.name.tag.yaml, support.type.property-name.yaml#B4F9F8bold
string.unquoted.plain.out.yaml, string.unquoted.plain.in.yaml, string.quoted.single.yaml, string.quoted.double.yaml#FF9E64
entity.name.type.anchor.yaml, variable.other.alias.yaml, punctuation.definition.anchor.yaml, punctuation.definition.alias.yaml#FFB347bold
constant.numeric.yaml, constant.language.boolean.yaml, constant.language.null.yaml, constant.other.boolean.yaml, constant.other.null.yaml#BB9AF7
punctuation.definition.block.sequence.item.yaml#F7768Ebold
comment.line.number-sign.yaml#6B6080italic
keyword.operation.graphql, keyword.fragment.graphql, keyword.on.graphql, keyword.other.graphql, keyword.type.graphql#BB9AF7bold
support.type.graphql, entity.name.type.graphql#4EC9B0bold
variable.graphql, string.unquoted.alias.graphql#B4F9F8
variable.definition.graphql, punctuation.dollar-sign.graphql#FF9E64
entity.name.function.directive.graphql, keyword.other.directive.graphql#F7768Eitalic
string.quoted.double.graphql, comment.line.number-sign.graphql, comment.block.graphql#6B6080italic
keyword.other.special-method.dockerfile, keyword.other.dockerfile, entity.name.function.dockerfile#BB9AF7bold
entity.name.image.dockerfile, entity.name.tag.dockerfile#4EC9B0
variable.other.dockerfile, variable.other.env.dockerfile#FF9E64
string.quoted.double.dockerfile, string.quoted.single.dockerfile, comment.line.number-sign.dockerfile#6B6080italic
storage.type.dart, storage.modifier.dart, keyword.declaration.dart, keyword.other.dart#BB9AF7bold
keyword.control.dart, keyword.control.flow.dart#FF9E64italic bold
support.class.dart, support.type.dart, entity.name.type.class.dart, entity.name.type.dart#4EC9B0bold
entity.name.function.dart#7AA2F7italic
storage.type.annotation.dart, entity.name.type.annotation.dart#BB9AF7italic bold
string.quoted.single.dart, string.quoted.double.dart, string.interpolated.single.dart, string.interpolated.double.dart#FF9E64
punctuation.definition.template-expression.begin.dart, punctuation.definition.template-expression.end.dart#F7768Ebold
comment.line.double-slash.dart, comment.block.dart#6B6080italic
storage.type.java, storage.modifier.java, keyword.declaration.class.java, keyword.declaration.interface.java, keyword.declaration.enum.java, keyword.other.new.java, keyword.operator.instanceof.java#BB9AF7bold
keyword.other.import.java, keyword.other.package.java, storage.modifier.import.java, storage.modifier.package.java#6B6080italic
keyword.control.java, keyword.control.conditional.java, keyword.control.loop.java, keyword.control.flow.java#FF9E64italic bold
storage.type.primitive.java, keyword.type.java#B4F9F8italic
entity.name.type.class.java, entity.name.type.interface.java, entity.name.type.enum.java, entity.name.type.annotation.java#4EC9B0bold
entity.name.function.java#7AA2F7italic
storage.type.annotation.java, punctuation.definition.annotation.java#BB9AF7italic bold
storage.type.generic.java, punctuation.bracket.angle.java#9ECE6A
string.quoted.double.java, string.quoted.single.java#FF9E64
constant.numeric.java, constant.numeric.decimal.java, constant.numeric.hex.java#B4F9F8
constant.language.java#BB9AF7bold
variable.language.this.java, variable.language.super.java#F7768Eitalic
comment.line.double-slash.java, comment.block.java, comment.block.javadoc.java#6B6080italic
keyword.other.documentation.javadoc.java, storage.type.class.javadoc#7AA2F7italic