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#EAE4F0
  • activityBar.border#D4CDE0
  • activityBar.foreground#9070D0
  • activityBarBadge.background#C88A20
  • activityBarBadge.foreground#FFFFFF
  • badge.background#9070D0
  • badge.foreground#FFFFFF
  • breadcrumb.activeSelectionForeground#3D3548
  • breadcrumb.foreground#8B7FA0
  • button.background#9070D0
  • button.foreground#FFFFFF
  • button.hoverBackground#7A5CB8
  • commandCenter.background#E4DEF0
  • commandCenter.border#B8A9CC
  • commandCenter.foreground#3D3548
  • dropdown.background#E4DEF0
  • dropdown.border#B8A9CC
  • dropdown.foreground#3D3548
  • editor.background#F0EAF6
  • editor.foreground#3D3548
  • editor.lineHighlightBackground#E4DEF0
  • editor.selectionBackground#C9BFDB99
  • editor.selectionHighlightBackground#C9BFDB80
  • editor.selectionHighlightBorder#9070D0
  • editorCursor.foreground#E07040
  • editorGroup.border#D4CDE0
  • editorGroup.dropBackground#D4CDE080
  • editorGroupHeader.border#D4CDE0
  • editorGroupHeader.tabsBackground#EAE4F0
  • editorIndentGuide.activeBackground1#9070D0
  • editorIndentGuide.background1#D4CDE0
  • editorLightBulb.foreground#E07040
  • editorLineNumber.activeForeground#9070D0
  • editorLineNumber.foreground#B8A9CC
  • input.background#E4DEF0
  • input.border#B8A9CC
  • input.foreground#3D3548
  • input.placeholderForeground#8B7FA0
  • list.activeSelectionBackground#DDD5EA
  • list.activeSelectionForeground#9070D0
  • list.focusBackground#C9BFDB
  • list.hoverBackground#E4DEF0
  • list.inactiveSelectionBackground#E8E2EE
  • panel.border#D4CDE0
  • settings.headerForeground#9070D0
  • settings.modifiedItemIndicator#9070D0
  • sideBar.background#EAE4F0
  • sideBar.border#D4CDE0
  • sideBar.foreground#3D3548
  • sideBarSectionHeader.background#EAE4F0
  • sideBarSectionHeader.foreground#9070D0
  • statusBar.background#EAE4F0
  • statusBar.border#D4CDE0
  • statusBar.foreground#3D3548
  • statusBarItem.hoverBackground#E4DEF0
  • tab.activeBackground#F0EAF6
  • tab.activeBorderTop#9070D0
  • tab.activeForeground#3D3548
  • tab.border#D4CDE0
  • tab.inactiveBackground#EAE4F0
  • tab.inactiveForeground#8B7FA0
  • terminal.ansiBlack#3D3548
  • terminal.ansiBlue#4A6ABF
  • terminal.ansiBrightBlack#8B7FA0
  • terminal.ansiBrightBlue#4A6ABF
  • terminal.ansiBrightCyan#30A0A0
  • terminal.ansiBrightGreen#5A9E3A
  • terminal.ansiBrightMagenta#9070D0
  • terminal.ansiBrightRed#D05060
  • terminal.ansiBrightWhite#3D3548
  • terminal.ansiBrightYellow#E07040
  • terminal.ansiCyan#30A0A0
  • terminal.ansiGreen#5A9E3A
  • terminal.ansiMagenta#9070D0
  • terminal.ansiRed#D05060
  • terminal.ansiWhite#3D3548
  • terminal.ansiYellow#E07040
  • terminal.background#F0EAF6
  • terminal.foreground#3D3548
  • terminalCursor.foreground#E07040
  • titleBar.activeBackground#EAE4F0
  • titleBar.activeForeground#3D3548
  • titleBar.border#D4CDE0
  • titleBar.inactiveBackground#EAE4F0
  • titleBar.inactiveForeground#8B7FA0
  • tree.indentGuidesStroke#B8A9CC

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
entity.name.type.class.java#9070D0bold
entity.name.type.interface.java#4A6ABFitalic
entity.name.function.java#E07040italic
variable.other.java#5A9E3A
keyword.other.java, storage.type.java#9070D0bold
storage.type.annotation.java, meta.annotation.java#C88A20italic
storage.modifier.import.java, storage.modifier.package.java#8B7FA0italic
string.quoted.double.java, string.quoted.single.java#E07040
constant.numeric.java#30A0A0
comment.line.double-slash.java, comment.block.documentation.java#8B7FA0italic
keyword.control, keyword.control.conditional, keyword.control.loop, keyword.control.flow#E07040italic 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#9070D0bold
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#E07040italic bold
entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-class.scss, punctuation.definition.entity.css, punctuation.definition.entity.scss#4A6ABFitalic
entity.other.attribute-name.pseudo-element.css, entity.other.attribute-name.pseudo-element.scss#30A0A0italic
support.type.vendored-property-name.css, support.type.vendored-property-name.scss#30A0A0
variable.scss, variable.other.scss, variable.other.less, variable.less#E07040bold
entity.name.function.scss, entity.name.function.less, support.function.misc.scss#4A6ABFitalic
punctuation.definition.interpolation.begin.bracket.curly.scss, punctuation.definition.interpolation.end.bracket.curly.scss, punctuation.section.interpolation.begin.scss, punctuation.section.interpolation.end.scss#D05060bold
variable.interpolation.scss#6AAB50
entity.other.attribute-name.placeholder.css, entity.other.attribute-name.placeholder.scss#C88A20bold
keyword.operator.comparison#C88A20bold
keyword.operator.logical#5A9E3Abold
keyword.operator.assignment#4A6ABFbold
keyword.operator#D05060
variable.other.env, support.type.property-name.env#9070D0bold
keyword.operator.assignment.env#4A6ABF
string.unquoted.env, constant.other.env#E07040
comment.line.number-sign.env#8B7FA0italic
keyword.other.DML.sql, keyword.other.DDL.sql, keyword.other.TCL.sql, keyword.other.DCL.sql, keyword.control.sql#9070D0bold
support.function.sql#4A6ABFitalic
string.quoted.single.sql, string.quoted.double.sql#E07040
constant.numeric.sql#30A0A0
comment.line.double-dash.sql, comment.block.sql#8B7FA0italic
variable.other.mongodb.operator, support.type.property-name.mongodb#9070D0bold
support.function.mongodb#4A6ABFitalic
string.quoted.double.mongodb, string.quoted.single.mongodb#E07040
constant.numeric.mongodb#30A0A0
comment.line.double-slash.mongodb, comment.block.mongodb#8B7FA0italic
storage.type, storage.modifier, keyword.declaration.js, keyword.declaration.ts#9070D0bold
keyword.control.import, keyword.control.export, keyword.control.from, keyword.control.as, keyword.control.default, keyword.other.import, keyword.other.export, keyword.other.from#9070D0bold
constant.language.import-export-all, constant.language.import-export-all.js, constant.language.import-export-all.ts, keyword.operator.module, storage.type.namespace.wildcard#D05060bold
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded.begin, punctuation.section.embedded.end#D05060bold
meta.template.expression, meta.embedded.expression#3D3548
meta.template.expression variable.other, meta.embedded.expression variable.other#3D3548
meta.template.expression support.type, meta.embedded.expression support.type#3A8A7A
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#30A0A0bold
variable.other.object, variable.other.readwrite.alias#3D3548
entity.name.function, support.function, variable.function#4A6ABFitalic
variable.parameter#3D3548
entity.name.tag, punctuation.definition.tag#3A8A7A
entity.other.attribute-name#9070D0italic
string#E07040
constant.language#9070D0bold
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#E07040
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#E07040bold
support.type.property-name.json, meta.mapping.key.json#30A0A0bold
string.json, constant.numeric.json#C07040
comment, punctuation.definition.comment#8B7FA0italic
markup.heading, markup.heading.markdown, markup.heading.marker#9070D0bold
punctuation.definition.heading#8B7FA0
markup.bold, markup.bold.markdown#4A6ABFbold
markup.italic, markup.italic.markdown#E07040italic
markup.list.bullet, markup.list.markdown, punctuation.definition.list#8B7FA0bold
markup.list#3D3548
markup.underline.link, markup.link, string.link#30A0A0underline
markup.inline.raw, markup.fenced_code.block#5A9E3A
markup.quote, markup.other#8B7FA0italic
variable.css, variable.other.custom-property.css, variable.other.custom-property.scss#E07040bold
variable.other.custom-property.use.css, variable.other.custom-property.use.scss#C88A20
keyword.other.unit.css, keyword.other.unit.scss, keyword.other.unit.less#5A9E3A
keyword.other.important.css, keyword.other.important.scss#D05060bold italic
entity.name.tag.css, entity.name.tag.scss, entity.name.tag.less#3A8A7A
entity.name.type, entity.name.type.interface, entity.name.type.alias, entity.name.type.enum, entity.name.type.class#3A8A7Abold
support.type.primitive.ts, support.type.primitive.tsx, support.type.builtin.ts, support.type.builtin.tsx, keyword.type.ts, keyword.type.tsx#30A0A0italic
meta.decorator, meta.decorator.ts, meta.decorator.tsx, storage.type.decorator, entity.name.function.decorator, entity.name.type.decorator, punctuation.decorator#9070D0italic bold
punctuation.definition.decorator, punctuation.decorator.ts, punctuation.decorator.tsx#D05060bold
support.class.component.jsx, support.class.component.tsx, entity.name.tag.js.jsx, entity.name.tag.tsx#3A8A7Abold
variable.language, variable.language.this, variable.language.super#C88A20italic
string.regexp, constant.regexp#5A9E3A
constant.other.character-class.regexp, keyword.operator.negation.regexp, punctuation.definition.character-class.regexp#C88A20
keyword.operator.quantifier.regexp, keyword.operator.anchor.regexp#D05060bold
punctuation.definition.group.regexp, keyword.operator.or.regexp#9070D0
keyword.operator.await, keyword.control.await, keyword.operator.async, storage.modifier.async#E07040italic bold
constant.language.json, constant.language.boolean.true.json, constant.language.boolean.false.json, constant.language.null.json#9070D0bold
entity.name.tag.yaml, support.type.property-name.yaml#30A0A0bold
string.unquoted.plain.out.yaml, string.unquoted.plain.in.yaml, string.quoted.single.yaml, string.quoted.double.yaml#E07040
entity.name.type.anchor.yaml, variable.other.alias.yaml, punctuation.definition.anchor.yaml, punctuation.definition.alias.yaml#C88A20bold
constant.numeric.yaml, constant.language.boolean.yaml, constant.language.null.yaml, constant.other.boolean.yaml, constant.other.null.yaml#9070D0
punctuation.definition.block.sequence.item.yaml#D05060bold
comment.line.number-sign.yaml#8B7FA0italic
keyword.operation.graphql, keyword.fragment.graphql, keyword.on.graphql, keyword.other.graphql, keyword.type.graphql#9070D0bold
support.type.graphql, entity.name.type.graphql#3A8A7Abold
variable.graphql, string.unquoted.alias.graphql#30A0A0
variable.definition.graphql, punctuation.dollar-sign.graphql#E07040
entity.name.function.directive.graphql, keyword.other.directive.graphql#D05060italic
string.quoted.double.graphql, comment.line.number-sign.graphql, comment.block.graphql#8B7FA0italic
keyword.other.special-method.dockerfile, keyword.other.dockerfile, entity.name.function.dockerfile#9070D0bold
entity.name.image.dockerfile, entity.name.tag.dockerfile#3A8A7A
variable.other.dockerfile, variable.other.env.dockerfile#E07040
string.quoted.double.dockerfile, string.quoted.single.dockerfile, comment.line.number-sign.dockerfile#8B7FA0italic
storage.type.dart, storage.modifier.dart, keyword.declaration.dart, keyword.other.dart#9070D0bold
keyword.control.dart, keyword.control.flow.dart#E07040italic bold
support.class.dart, support.type.dart, entity.name.type.class.dart, entity.name.type.dart#3A8A7Abold
entity.name.function.dart#4A6ABFitalic
storage.type.annotation.dart, entity.name.type.annotation.dart#9070D0italic bold
string.quoted.single.dart, string.quoted.double.dart, string.interpolated.single.dart, string.interpolated.double.dart#E07040
punctuation.definition.template-expression.begin.dart, punctuation.definition.template-expression.end.dart#D05060bold
comment.line.double-slash.dart, comment.block.dart#8B7FA0italic
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#9070D0bold
keyword.other.import.java, keyword.other.package.java, storage.modifier.import.java, storage.modifier.package.java#8B7FA0italic
keyword.control.java, keyword.control.conditional.java, keyword.control.loop.java, keyword.control.flow.java#E07040italic bold
storage.type.primitive.java, keyword.type.java#30A0A0italic
entity.name.type.class.java, entity.name.type.interface.java, entity.name.type.enum.java, entity.name.type.annotation.java#3A8A7Abold
entity.name.function.java#4A6ABFitalic
storage.type.annotation.java, punctuation.definition.annotation.java#9070D0italic bold
storage.type.generic.java, punctuation.bracket.angle.java#5A9E3A
string.quoted.double.java, string.quoted.single.java#E07040
constant.numeric.java, constant.numeric.decimal.java, constant.numeric.hex.java#30A0A0
constant.language.java#9070D0bold
variable.language.this.java, variable.language.super.java#D05060italic
comment.line.double-slash.java, comment.block.java, comment.block.javadoc.java#8B7FA0italic
keyword.other.documentation.javadoc.java, storage.type.class.javadoc#4A6ABFitalic