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#1C1C24
  • activityBar.border#262630
  • activityBar.foreground#A88DC8
  • activityBarBadge.background#FFB080
  • activityBarBadge.foreground#1C1C24
  • badge.background#A88DC8
  • badge.foreground#1C1C24
  • breadcrumb.activeSelectionForeground#E2DDCA
  • breadcrumb.foreground#808078
  • button.background#A88DC8
  • button.foreground#1C1C24
  • button.hoverBackground#8EACF0
  • commandCenter.background#32323E
  • commandCenter.border#42424E
  • commandCenter.foreground#E2DDCA
  • dropdown.background#32323E
  • dropdown.border#42424E
  • dropdown.foreground#E2DDCA
  • editor.background#1E1E26
  • editor.foreground#E2DDCA
  • editor.lineHighlightBackground#42424E
  • editor.selectionBackground#62628099
  • editor.selectionHighlightBackground#42424E80
  • editor.selectionHighlightBorder#A88DC8
  • editorCursor.foreground#FFB080
  • editorGroup.border#262630
  • editorGroup.dropBackground#26263080
  • editorGroupHeader.border#262630
  • editorGroupHeader.tabsBackground#1C1C24
  • editorIndentGuide.activeBackground1#A88DC8
  • editorIndentGuide.background1#32323E
  • editorLightBulb.foreground#FFB080
  • editorLineNumber.activeForeground#A88DC8
  • editorLineNumber.foreground#626280
  • input.background#32323E
  • input.border#42424E
  • input.foreground#E2DDCA
  • input.placeholderForeground#808078
  • list.activeSelectionBackground#2A3850
  • list.activeSelectionForeground#A88DC8
  • list.focusBackground#42424E
  • list.hoverBackground#32323E
  • list.inactiveSelectionBackground#262630
  • panel.border#262630
  • settings.headerForeground#A88DC8
  • settings.modifiedItemIndicator#A88DC8
  • sideBar.background#1C1C24
  • sideBar.border#262630
  • sideBar.foreground#E2DDCA
  • sideBarSectionHeader.background#1C1C24
  • sideBarSectionHeader.foreground#A88DC8
  • statusBar.background#1C1C24
  • statusBar.border#262630
  • statusBar.foreground#E2DDCA
  • statusBarItem.hoverBackground#32323E
  • tab.activeBackground#1E1E26
  • tab.activeBorderTop#A88DC8
  • tab.activeForeground#E2DDCA
  • tab.border#262630
  • tab.inactiveBackground#1C1C24
  • tab.inactiveForeground#808078
  • terminal.ansiBlack#1C1C24
  • terminal.ansiBlue#8EACF0
  • terminal.ansiBrightBlack#626280
  • terminal.ansiBrightBlue#8EACF0
  • terminal.ansiBrightCyan#8ABAB0
  • terminal.ansiBrightGreen#A8D080
  • terminal.ansiBrightMagenta#A88DC8
  • terminal.ansiBrightRed#F07888
  • terminal.ansiBrightWhite#E2DDCA
  • terminal.ansiBrightYellow#F0D090
  • terminal.ansiCyan#8ABAB0
  • terminal.ansiGreen#A8D080
  • terminal.ansiMagenta#A88DC8
  • terminal.ansiRed#F07888
  • terminal.ansiWhite#E2DDCA
  • terminal.ansiYellow#F0D090
  • terminal.background#1E1E26
  • terminal.foreground#E2DDCA
  • terminalCursor.foreground#FFB080
  • titleBar.activeBackground#1C1C24
  • titleBar.activeForeground#E2DDCA
  • titleBar.border#262630
  • titleBar.inactiveBackground#1C1C24
  • titleBar.inactiveForeground#808078
  • tree.indentGuidesStroke#42424E

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
entity.name.type.class.java#8ABAB0bold
entity.name.type.interface.java#8EACF0italic
entity.name.function.java#8FC4E8italic
variable.other.java#A8D080
keyword.other.java, storage.type.java#A88DC8bold
storage.type.annotation.java, meta.annotation.java#D0B880italic
storage.modifier.import.java, storage.modifier.package.java#808078italic
string.quoted.double.java, string.quoted.single.java#A8D080
constant.numeric.java#E090B0
comment.line.double-slash.java, comment.block.documentation.java#808078italic
keyword.control, keyword.control.conditional, keyword.control.loop, keyword.control.flow#FFB080italic 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#A88DC8bold
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#FFB080italic bold
entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-class.scss, punctuation.definition.entity.css, punctuation.definition.entity.scss#8EACF0italic
entity.other.attribute-name.pseudo-element.css, entity.other.attribute-name.pseudo-element.scss#8ABAB0italic
support.type.vendored-property-name.css, support.type.vendored-property-name.scss#8ABAB0
variable.scss, variable.other.scss, variable.other.less, variable.less#F0D090bold
entity.name.function.scss, entity.name.function.less, support.function.misc.scss#8EACF0italic
punctuation.definition.interpolation.begin.bracket.curly.scss, punctuation.definition.interpolation.end.bracket.curly.scss, punctuation.section.interpolation.begin.scss, punctuation.section.interpolation.end.scss#F07888bold
variable.interpolation.scss#A8D080
entity.other.attribute-name.placeholder.css, entity.other.attribute-name.placeholder.scss#D0B880bold
keyword.operator.comparison#D0B880bold
keyword.operator.logical#A8D080bold
keyword.operator.assignment#8EACF0bold
keyword.operator#F07888
variable.other.env, support.type.property-name.env#A88DC8bold
keyword.operator.assignment.env#8EACF0
string.unquoted.env, constant.other.env#F0D090
comment.line.number-sign.env#808078italic
keyword.other.DML.sql, keyword.other.DDL.sql, keyword.other.TCL.sql, keyword.other.DCL.sql, keyword.control.sql#A88DC8bold
support.function.sql#8EACF0italic
string.quoted.single.sql, string.quoted.double.sql#A8D080
constant.numeric.sql#E090B0
comment.line.double-dash.sql, comment.block.sql#808078italic
variable.other.mongodb.operator, support.type.property-name.mongodb#A88DC8bold
support.function.mongodb#8EACF0italic
string.quoted.double.mongodb, string.quoted.single.mongodb#A8D080
constant.numeric.mongodb#E090B0
comment.line.double-slash.mongodb, comment.block.mongodb#808078italic
storage.type, storage.modifier, keyword.declaration.js, keyword.declaration.ts#A88DC8bold
keyword.control.import, keyword.control.export, keyword.control.from, keyword.control.as, keyword.control.default, keyword.other.import, keyword.other.export, keyword.other.from#A88DC8bold
constant.language.import-export-all, constant.language.import-export-all.js, constant.language.import-export-all.ts, keyword.operator.module, storage.type.namespace.wildcard#F07888bold
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded.begin, punctuation.section.embedded.end#F07888bold
meta.template.expression, meta.embedded.expression#E2DDCA
meta.template.expression variable.other, meta.embedded.expression variable.other#E2DDCA
meta.template.expression support.type, meta.embedded.expression support.type#8ABAB0
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#8FC4E8bold
variable.other.object, variable.other.readwrite.alias#E2DDCA
entity.name.function, support.function, variable.function#8EACF0italic
variable.parameter#E2DDCA
entity.name.tag, punctuation.definition.tag#8ABAB0
entity.other.attribute-name#A88DC8italic
string#A8D080
constant.language#A88DC8bold
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#F0D090
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#F0D090bold
support.type.property-name.json, meta.mapping.key.json#8FC4E8bold
string.json, constant.numeric.json#D0B880
comment, punctuation.definition.comment#808078italic
markup.heading, markup.heading.markdown, markup.heading.marker#A88DC8bold
punctuation.definition.heading#42424E
markup.bold, markup.bold.markdown#8EACF0bold
markup.italic, markup.italic.markdown#F0D090italic
markup.list.bullet, markup.list.markdown, punctuation.definition.list#42424Ebold
markup.list#E2DDCA
markup.underline.link, markup.link, string.link#8FC4E8underline
markup.inline.raw, markup.fenced_code.block#A8D080
markup.quote, markup.other#808078italic
variable.css, variable.other.custom-property.css, variable.other.custom-property.scss#F0D090bold
variable.other.custom-property.use.css, variable.other.custom-property.use.scss#D0B880
keyword.other.unit.css, keyword.other.unit.scss, keyword.other.unit.less#A8D080
keyword.other.important.css, keyword.other.important.scss#F07888bold italic
entity.name.tag.css, entity.name.tag.scss, entity.name.tag.less#8ABAB0
entity.name.type, entity.name.type.interface, entity.name.type.alias, entity.name.type.enum, entity.name.type.class#8ABAB0bold
support.type.primitive.ts, support.type.primitive.tsx, support.type.builtin.ts, support.type.builtin.tsx, keyword.type.ts, keyword.type.tsx#8FC4E8italic
meta.decorator, meta.decorator.ts, meta.decorator.tsx, storage.type.decorator, entity.name.function.decorator, entity.name.type.decorator, punctuation.decorator#A88DC8italic bold
punctuation.definition.decorator, punctuation.decorator.ts, punctuation.decorator.tsx#F07888bold
support.class.component.jsx, support.class.component.tsx, entity.name.tag.js.jsx, entity.name.tag.tsx#8ABAB0bold
variable.language, variable.language.this, variable.language.super#D0B880italic
string.regexp, constant.regexp#A8D080
constant.other.character-class.regexp, keyword.operator.negation.regexp, punctuation.definition.character-class.regexp#D0B880
keyword.operator.quantifier.regexp, keyword.operator.anchor.regexp#F07888bold
punctuation.definition.group.regexp, keyword.operator.or.regexp#A88DC8
keyword.operator.await, keyword.control.await, keyword.operator.async, storage.modifier.async#FFB080italic bold
constant.language.json, constant.language.boolean.true.json, constant.language.boolean.false.json, constant.language.null.json#A88DC8bold
entity.name.tag.yaml, support.type.property-name.yaml#8FC4E8bold
string.unquoted.plain.out.yaml, string.unquoted.plain.in.yaml, string.quoted.single.yaml, string.quoted.double.yaml#A8D080
entity.name.type.anchor.yaml, variable.other.alias.yaml, punctuation.definition.anchor.yaml, punctuation.definition.alias.yaml#D0B880bold
constant.numeric.yaml, constant.language.boolean.yaml, constant.language.null.yaml, constant.other.boolean.yaml, constant.other.null.yaml#A88DC8
punctuation.definition.block.sequence.item.yaml#F07888bold
comment.line.number-sign.yaml#808078italic
keyword.operation.graphql, keyword.fragment.graphql, keyword.on.graphql, keyword.other.graphql, keyword.type.graphql#A88DC8bold
support.type.graphql, entity.name.type.graphql#8ABAB0bold
variable.graphql, string.unquoted.alias.graphql#8FC4E8
variable.definition.graphql, punctuation.dollar-sign.graphql#F0D090
entity.name.function.directive.graphql, keyword.other.directive.graphql#F07888italic
string.quoted.double.graphql, comment.line.number-sign.graphql, comment.block.graphql#808078italic
keyword.other.special-method.dockerfile, keyword.other.dockerfile, entity.name.function.dockerfile#A88DC8bold
entity.name.image.dockerfile, entity.name.tag.dockerfile#8ABAB0
variable.other.dockerfile, variable.other.env.dockerfile#F0D090
string.quoted.double.dockerfile, string.quoted.single.dockerfile, comment.line.number-sign.dockerfile#808078italic
storage.type.dart, storage.modifier.dart, keyword.declaration.dart, keyword.other.dart#A88DC8bold
keyword.control.dart, keyword.control.flow.dart#FFB080italic bold
support.class.dart, support.type.dart, entity.name.type.class.dart, entity.name.type.dart#8ABAB0bold
entity.name.function.dart#8EACF0italic
storage.type.annotation.dart, entity.name.type.annotation.dart#A88DC8italic bold
string.quoted.single.dart, string.quoted.double.dart, string.interpolated.single.dart, string.interpolated.double.dart#A8D080
punctuation.definition.template-expression.begin.dart, punctuation.definition.template-expression.end.dart#F07888bold
comment.line.double-slash.dart, comment.block.dart#808078italic
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#A88DC8bold
keyword.other.import.java, keyword.other.package.java, storage.modifier.import.java, storage.modifier.package.java#808078italic
keyword.control.java, keyword.control.conditional.java, keyword.control.loop.java, keyword.control.flow.java#FFB080italic bold
storage.type.primitive.java, keyword.type.java#8FC4E8italic
entity.name.type.class.java, entity.name.type.interface.java, entity.name.type.enum.java, entity.name.type.annotation.java#8ABAB0bold
entity.name.function.java#8EACF0italic
storage.type.annotation.java, punctuation.definition.annotation.java#A88DC8italic bold
storage.type.generic.java, punctuation.bracket.angle.java#A8D080
string.quoted.double.java, string.quoted.single.java#A8D080
constant.numeric.java, constant.numeric.decimal.java, constant.numeric.hex.java#E090B0
constant.language.java#A88DC8bold
variable.language.this.java, variable.language.super.java#F07888italic
comment.line.double-slash.java, comment.block.java, comment.block.javadoc.java#808078italic
keyword.other.documentation.javadoc.java, storage.type.class.javadoc#8EACF0italic