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#1A1520
  • activityBar.border#2A2030
  • activityBar.foreground#C090FF
  • activityBarBadge.background#FF9040
  • activityBarBadge.foreground#1A1520
  • badge.background#C090FF
  • badge.foreground#1A1520
  • breadcrumb.activeSelectionForeground#F0E6F6
  • breadcrumb.foreground#6A5080
  • button.background#C090FF
  • button.foreground#1A1520
  • button.hoverBackground#A070E0
  • commandCenter.background#2A2030
  • commandCenter.border#3A3040
  • commandCenter.foreground#F0E6F6
  • dropdown.background#2A2030
  • dropdown.border#3A3040
  • dropdown.foreground#F0E6F6
  • editor.background#1E1828
  • editor.foreground#F0E6F6
  • editor.lineHighlightBackground#3A3040
  • editor.selectionBackground#6A508099
  • editor.selectionHighlightBackground#3A304080
  • editor.selectionHighlightBorder#C090FF
  • editorCursor.foreground#FF9040
  • editorGroup.border#2A2030
  • editorGroup.dropBackground#2A203080
  • editorGroupHeader.border#2A2030
  • editorGroupHeader.tabsBackground#1A1520
  • editorIndentGuide.activeBackground1#C090FF
  • editorIndentGuide.background1#2A2030
  • editorLightBulb.foreground#FF9040
  • editorLineNumber.activeForeground#C090FF
  • editorLineNumber.foreground#4A4050
  • input.background#2A2030
  • input.border#3A3040
  • input.foreground#F0E6F6
  • input.placeholderForeground#6A5080
  • list.activeSelectionBackground#3A2848
  • list.activeSelectionForeground#C090FF
  • list.focusBackground#3A3040
  • list.hoverBackground#2A2030
  • list.inactiveSelectionBackground#2A2030
  • panel.border#2A2030
  • settings.headerForeground#C090FF
  • settings.modifiedItemIndicator#C090FF
  • sideBar.background#1A1520
  • sideBar.border#2A2030
  • sideBar.foreground#F0E6F6
  • sideBarSectionHeader.background#1A1520
  • sideBarSectionHeader.foreground#C090FF
  • statusBar.background#1A1520
  • statusBar.border#2A2030
  • statusBar.foreground#F0E6F6
  • statusBarItem.hoverBackground#2A2030
  • tab.activeBackground#1E1828
  • tab.activeBorderTop#C090FF
  • tab.activeForeground#F0E6F6
  • tab.border#2A2030
  • tab.inactiveBackground#1A1520
  • tab.inactiveForeground#6A5080
  • terminal.ansiBlack#1A1520
  • terminal.ansiBlue#80D0F0
  • terminal.ansiBrightBlack#4A4050
  • terminal.ansiBrightBlue#80D0F0
  • terminal.ansiBrightCyan#80E0D0
  • terminal.ansiBrightGreen#98D050
  • terminal.ansiBrightMagenta#C090FF
  • terminal.ansiBrightRed#E06080
  • terminal.ansiBrightWhite#F0E6F6
  • terminal.ansiBrightYellow#F0C868
  • terminal.ansiCyan#80E0D0
  • terminal.ansiGreen#98D050
  • terminal.ansiMagenta#C090FF
  • terminal.ansiRed#E06080
  • terminal.ansiWhite#F0E6F6
  • terminal.ansiYellow#F0C868
  • terminal.background#1E1828
  • terminal.foreground#F0E6F6
  • terminalCursor.foreground#FF9040
  • titleBar.activeBackground#1A1520
  • titleBar.activeForeground#F0E6F6
  • titleBar.border#2A2030
  • titleBar.inactiveBackground#1A1520
  • titleBar.inactiveForeground#6A5080
  • tree.indentGuidesStroke#3A3040

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
entity.name.type.class.java#80E0D0bold
entity.name.type.interface.java#80D0F0italic
entity.name.function.java#A0E8F8italic
variable.other.java#98D050
keyword.other.java, storage.type.java#C090FFbold
storage.type.annotation.java, meta.annotation.java#F0C868italic
storage.modifier.import.java, storage.modifier.package.java#6A5080italic
string.quoted.double.java, string.quoted.single.java#98D050
constant.numeric.java#D090B0
comment.line.double-slash.java, comment.block.documentation.java#6A5080italic
keyword.control, keyword.control.conditional, keyword.control.loop, keyword.control.flow#FF9040italic 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#C090FFbold
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#FF9040italic bold
entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-class.scss, punctuation.definition.entity.css, punctuation.definition.entity.scss#80D0F0italic
entity.other.attribute-name.pseudo-element.css, entity.other.attribute-name.pseudo-element.scss#80E0D0italic
support.type.vendored-property-name.css, support.type.vendored-property-name.scss#80E0D0
variable.scss, variable.other.scss, variable.other.less, variable.less#F0C868bold
entity.name.function.scss, entity.name.function.less, support.function.misc.scss#80D0F0italic
punctuation.definition.interpolation.begin.bracket.curly.scss, punctuation.definition.interpolation.end.bracket.curly.scss, punctuation.section.interpolation.begin.scss, punctuation.section.interpolation.end.scss#E06080bold
variable.interpolation.scss#98D050
entity.other.attribute-name.placeholder.css, entity.other.attribute-name.placeholder.scss#F0C868bold
keyword.operator.comparison#F0C868bold
keyword.operator.logical#98D050bold
keyword.operator.assignment#80D0F0bold
keyword.operator#E06080
variable.other.env, support.type.property-name.env#C090FFbold
keyword.operator.assignment.env#80D0F0
string.unquoted.env, constant.other.env#F0C868
comment.line.number-sign.env#6A5080italic
keyword.other.DML.sql, keyword.other.DDL.sql, keyword.other.TCL.sql, keyword.other.DCL.sql, keyword.control.sql#C090FFbold
support.function.sql#80D0F0italic
string.quoted.single.sql, string.quoted.double.sql#98D050
constant.numeric.sql#D090B0
comment.line.double-dash.sql, comment.block.sql#6A5080italic
variable.other.mongodb.operator, support.type.property-name.mongodb#C090FFbold
support.function.mongodb#80D0F0italic
string.quoted.double.mongodb, string.quoted.single.mongodb#98D050
constant.numeric.mongodb#D090B0
comment.line.double-slash.mongodb, comment.block.mongodb#6A5080italic
storage.type, storage.modifier, keyword.declaration.js, keyword.declaration.ts#C090FFbold
keyword.control.import, keyword.control.export, keyword.control.from, keyword.control.as, keyword.control.default, keyword.other.import, keyword.other.export, keyword.other.from#C090FFbold
constant.language.import-export-all, constant.language.import-export-all.js, constant.language.import-export-all.ts, keyword.operator.module, storage.type.namespace.wildcard#E06080bold
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded.begin, punctuation.section.embedded.end#E06080bold
meta.template.expression, meta.embedded.expression#F0E6F6
meta.template.expression variable.other, meta.embedded.expression variable.other#F0E6F6
meta.template.expression support.type, meta.embedded.expression support.type#80E0D0
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#A0E8F8bold
variable.other.object, variable.other.readwrite.alias#F0E6F6
entity.name.function, support.function, variable.function#80D0F0italic
variable.parameter#F0E6F6
entity.name.tag, punctuation.definition.tag#80E0D0
entity.other.attribute-name#C090FFitalic
string#98D050
constant.language#C090FFbold
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#F0C868
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#F0C868bold
support.type.property-name.json, meta.mapping.key.json#A0E8F8bold
string.json, constant.numeric.json#F0C868
comment, punctuation.definition.comment#6A5080italic
markup.heading, markup.heading.markdown, markup.heading.marker#C090FFbold
punctuation.definition.heading#3A3040
markup.bold, markup.bold.markdown#80D0F0bold
markup.italic, markup.italic.markdown#F0C868italic
markup.list.bullet, markup.list.markdown, punctuation.definition.list#3A3040bold
markup.list#F0E6F6
markup.underline.link, markup.link, string.link#A0E8F8underline
markup.inline.raw, markup.fenced_code.block#98D050
markup.quote, markup.other#6A5080italic
variable.css, variable.other.custom-property.css, variable.other.custom-property.scss#F0C868bold
variable.other.custom-property.use.css, variable.other.custom-property.use.scss#F0C868
keyword.other.unit.css, keyword.other.unit.scss, keyword.other.unit.less#98D050
keyword.other.important.css, keyword.other.important.scss#E06080bold italic
entity.name.tag.css, entity.name.tag.scss, entity.name.tag.less#80E0D0
entity.name.type, entity.name.type.interface, entity.name.type.alias, entity.name.type.enum, entity.name.type.class#80E0D0bold
support.type.primitive.ts, support.type.primitive.tsx, support.type.builtin.ts, support.type.builtin.tsx, keyword.type.ts, keyword.type.tsx#A0E8F8italic
meta.decorator, meta.decorator.ts, meta.decorator.tsx, storage.type.decorator, entity.name.function.decorator, entity.name.type.decorator, punctuation.decorator#C090FFitalic bold
punctuation.definition.decorator, punctuation.decorator.ts, punctuation.decorator.tsx#E06080bold
support.class.component.jsx, support.class.component.tsx, entity.name.tag.js.jsx, entity.name.tag.tsx#80E0D0bold
variable.language, variable.language.this, variable.language.super#F0C868italic
string.regexp, constant.regexp#98D050
constant.other.character-class.regexp, keyword.operator.negation.regexp, punctuation.definition.character-class.regexp#F0C868
keyword.operator.quantifier.regexp, keyword.operator.anchor.regexp#E06080bold
punctuation.definition.group.regexp, keyword.operator.or.regexp#C090FF
keyword.operator.await, keyword.control.await, keyword.operator.async, storage.modifier.async#FF9040italic bold
constant.language.json, constant.language.boolean.true.json, constant.language.boolean.false.json, constant.language.null.json#C090FFbold
entity.name.tag.yaml, support.type.property-name.yaml#A0E8F8bold
string.unquoted.plain.out.yaml, string.unquoted.plain.in.yaml, string.quoted.single.yaml, string.quoted.double.yaml#98D050
entity.name.type.anchor.yaml, variable.other.alias.yaml, punctuation.definition.anchor.yaml, punctuation.definition.alias.yaml#F0C868bold
constant.numeric.yaml, constant.language.boolean.yaml, constant.language.null.yaml, constant.other.boolean.yaml, constant.other.null.yaml#C090FF
punctuation.definition.block.sequence.item.yaml#E06080bold
comment.line.number-sign.yaml#6A5080italic
keyword.operation.graphql, keyword.fragment.graphql, keyword.on.graphql, keyword.other.graphql, keyword.type.graphql#C090FFbold
support.type.graphql, entity.name.type.graphql#80E0D0bold
variable.graphql, string.unquoted.alias.graphql#A0E8F8
variable.definition.graphql, punctuation.dollar-sign.graphql#F0C868
entity.name.function.directive.graphql, keyword.other.directive.graphql#E06080italic
string.quoted.double.graphql, comment.line.number-sign.graphql, comment.block.graphql#6A5080italic
keyword.other.special-method.dockerfile, keyword.other.dockerfile, entity.name.function.dockerfile#C090FFbold
entity.name.image.dockerfile, entity.name.tag.dockerfile#80E0D0
variable.other.dockerfile, variable.other.env.dockerfile#F0C868
string.quoted.double.dockerfile, string.quoted.single.dockerfile, comment.line.number-sign.dockerfile#6A5080italic
storage.type.dart, storage.modifier.dart, keyword.declaration.dart, keyword.other.dart#C090FFbold
keyword.control.dart, keyword.control.flow.dart#FF9040italic bold
support.class.dart, support.type.dart, entity.name.type.class.dart, entity.name.type.dart#80E0D0bold
entity.name.function.dart#80D0F0italic
storage.type.annotation.dart, entity.name.type.annotation.dart#C090FFitalic bold
string.quoted.single.dart, string.quoted.double.dart, string.interpolated.single.dart, string.interpolated.double.dart#98D050
punctuation.definition.template-expression.begin.dart, punctuation.definition.template-expression.end.dart#E06080bold
comment.line.double-slash.dart, comment.block.dart#6A5080italic
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#C090FFbold
keyword.other.import.java, keyword.other.package.java, storage.modifier.import.java, storage.modifier.package.java#6A5080italic
keyword.control.java, keyword.control.conditional.java, keyword.control.loop.java, keyword.control.flow.java#FF9040italic bold
storage.type.primitive.java, keyword.type.java#A0E8F8italic
entity.name.type.class.java, entity.name.type.interface.java, entity.name.type.enum.java, entity.name.type.annotation.java#80E0D0bold
entity.name.function.java#80D0F0italic
storage.type.annotation.java, punctuation.definition.annotation.java#C090FFitalic bold
storage.type.generic.java, punctuation.bracket.angle.java#98D050
string.quoted.double.java, string.quoted.single.java#98D050
constant.numeric.java, constant.numeric.decimal.java, constant.numeric.hex.java#D090B0
constant.language.java#C090FFbold
variable.language.this.java, variable.language.super.java#E06080italic
comment.line.double-slash.java, comment.block.java, comment.block.javadoc.java#6A5080italic
keyword.other.documentation.javadoc.java, storage.type.class.javadoc#80D0F0italic