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#1E1828
  • activityBar.border#2A2438
  • activityBar.foreground#9A85B8
  • activityBarBadge.background#D0A070
  • activityBarBadge.foreground#1E1828
  • badge.background#9A85B8
  • badge.foreground#1E1828
  • breadcrumb.activeSelectionForeground#E0D8EC
  • breadcrumb.foreground#706888
  • button.background#9A85B8
  • button.foreground#1E1828
  • button.hoverBackground#7A9CC8
  • commandCenter.background#2E2840
  • commandCenter.border#3E3850
  • commandCenter.foreground#E0D8EC
  • dropdown.background#2E2840
  • dropdown.border#3E3850
  • dropdown.foreground#E0D8EC
  • editor.background#221C2E
  • editor.foreground#E0D8EC
  • editor.lineHighlightBackground#3E3850
  • editor.selectionBackground#70688899
  • editor.selectionHighlightBackground#3E385080
  • editor.selectionHighlightBorder#9A85B8
  • editorCursor.foreground#D0A070
  • editorGroup.border#2A2438
  • editorGroup.dropBackground#2A243880
  • editorGroupHeader.border#2A2438
  • editorGroupHeader.tabsBackground#1E1828
  • editorIndentGuide.activeBackground1#9A85B8
  • editorIndentGuide.background1#2E2840
  • editorLightBulb.foreground#D0A070
  • editorLineNumber.activeForeground#9A85B8
  • editorLineNumber.foreground#504868
  • input.background#2E2840
  • input.border#3E3850
  • input.foreground#E0D8EC
  • input.placeholderForeground#706888
  • list.activeSelectionBackground#322848
  • list.activeSelectionForeground#9A85B8
  • list.focusBackground#3E3850
  • list.hoverBackground#2E2840
  • list.inactiveSelectionBackground#2A2438
  • panel.border#2A2438
  • settings.headerForeground#9A85B8
  • settings.modifiedItemIndicator#9A85B8
  • sideBar.background#1E1828
  • sideBar.border#2A2438
  • sideBar.foreground#E0D8EC
  • sideBarSectionHeader.background#1E1828
  • sideBarSectionHeader.foreground#9A85B8
  • statusBar.background#1E1828
  • statusBar.border#2A2438
  • statusBar.foreground#E0D8EC
  • statusBarItem.hoverBackground#2E2840
  • tab.activeBackground#221C2E
  • tab.activeBorderTop#9A85B8
  • tab.activeForeground#E0D8EC
  • tab.border#2A2438
  • tab.inactiveBackground#1E1828
  • tab.inactiveForeground#706888
  • terminal.ansiBlack#1E1828
  • terminal.ansiBlue#7A9CC8
  • terminal.ansiBrightBlack#504868
  • terminal.ansiBrightBlue#7A9CC8
  • terminal.ansiBrightCyan#7AAA8A
  • terminal.ansiBrightGreen#7AAA8A
  • terminal.ansiBrightMagenta#9A85B8
  • terminal.ansiBrightRed#C87A8A
  • terminal.ansiBrightWhite#E0D8EC
  • terminal.ansiBrightYellow#C8B880
  • terminal.ansiCyan#7AAA8A
  • terminal.ansiGreen#7AAA8A
  • terminal.ansiMagenta#9A85B8
  • terminal.ansiRed#C87A8A
  • terminal.ansiWhite#E0D8EC
  • terminal.ansiYellow#C8B880
  • terminal.background#221C2E
  • terminal.foreground#E0D8EC
  • terminalCursor.foreground#D0A070
  • titleBar.activeBackground#1E1828
  • titleBar.activeForeground#E0D8EC
  • titleBar.border#2A2438
  • titleBar.inactiveBackground#1E1828
  • titleBar.inactiveForeground#706888
  • tree.indentGuidesStroke#3E3850

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
entity.name.type.class.java#7AAA8Abold
entity.name.type.interface.java#7A9CC8italic
entity.name.function.java#8AAEC0italic
variable.other.java#7AAA8A
keyword.other.java, storage.type.java#9A85B8bold
storage.type.annotation.java, meta.annotation.java#C8B880italic
storage.modifier.import.java, storage.modifier.package.java#706888italic
string.quoted.double.java, string.quoted.single.java#7AAA8A
constant.numeric.java#B88AAA
comment.line.double-slash.java, comment.block.documentation.java#706888italic
keyword.control, keyword.control.conditional, keyword.control.loop, keyword.control.flow#D0A070italic 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#9A85B8bold
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#D0A070italic bold
entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-class.scss, punctuation.definition.entity.css, punctuation.definition.entity.scss#7A9CC8italic
entity.other.attribute-name.pseudo-element.css, entity.other.attribute-name.pseudo-element.scss#7AAA8Aitalic
support.type.vendored-property-name.css, support.type.vendored-property-name.scss#7AAA8A
variable.scss, variable.other.scss, variable.other.less, variable.less#C8B880bold
entity.name.function.scss, entity.name.function.less, support.function.misc.scss#7A9CC8italic
punctuation.definition.interpolation.begin.bracket.curly.scss, punctuation.definition.interpolation.end.bracket.curly.scss, punctuation.section.interpolation.begin.scss, punctuation.section.interpolation.end.scss#C87A8Abold
variable.interpolation.scss#7AAA8A
entity.other.attribute-name.placeholder.css, entity.other.attribute-name.placeholder.scss#C8B880bold
keyword.operator.comparison#C8B880bold
keyword.operator.logical#7AAA8Abold
keyword.operator.assignment#7A9CC8bold
keyword.operator#C87A8A
variable.other.env, support.type.property-name.env#9A85B8bold
keyword.operator.assignment.env#7A9CC8
string.unquoted.env, constant.other.env#C8B880
comment.line.number-sign.env#706888italic
keyword.other.DML.sql, keyword.other.DDL.sql, keyword.other.TCL.sql, keyword.other.DCL.sql, keyword.control.sql#9A85B8bold
support.function.sql#7A9CC8italic
string.quoted.single.sql, string.quoted.double.sql#7AAA8A
constant.numeric.sql#B88AAA
comment.line.double-dash.sql, comment.block.sql#706888italic
variable.other.mongodb.operator, support.type.property-name.mongodb#9A85B8bold
support.function.mongodb#7A9CC8italic
string.quoted.double.mongodb, string.quoted.single.mongodb#7AAA8A
constant.numeric.mongodb#B88AAA
comment.line.double-slash.mongodb, comment.block.mongodb#706888italic
storage.type, storage.modifier, keyword.declaration.js, keyword.declaration.ts#9A85B8bold
keyword.control.import, keyword.control.export, keyword.control.from, keyword.control.as, keyword.control.default, keyword.other.import, keyword.other.export, keyword.other.from#9A85B8bold
constant.language.import-export-all, constant.language.import-export-all.js, constant.language.import-export-all.ts, keyword.operator.module, storage.type.namespace.wildcard#C87A8Abold
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded.begin, punctuation.section.embedded.end#C87A8Abold
meta.template.expression, meta.embedded.expression#E0D8EC
meta.template.expression variable.other, meta.embedded.expression variable.other#E0D8EC
meta.template.expression support.type, meta.embedded.expression support.type#7AAA8A
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#8AAEC0bold
variable.other.object, variable.other.readwrite.alias#E0D8EC
entity.name.function, support.function, variable.function#7A9CC8italic
variable.parameter#E0D8EC
entity.name.tag, punctuation.definition.tag#7AAA8A
entity.other.attribute-name#9A85B8italic
string#7AAA8A
constant.language#9A85B8bold
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#C8B880
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#C8B880bold
support.type.property-name.json, meta.mapping.key.json#8AAEC0bold
string.json, constant.numeric.json#C8B880
comment, punctuation.definition.comment#706888italic
markup.heading, markup.heading.markdown, markup.heading.marker#9A85B8bold
punctuation.definition.heading#3E3850
markup.bold, markup.bold.markdown#7A9CC8bold
markup.italic, markup.italic.markdown#C8B880italic
markup.list.bullet, markup.list.markdown, punctuation.definition.list#3E3850bold
markup.list#E0D8EC
markup.underline.link, markup.link, string.link#8AAEC0underline
markup.inline.raw, markup.fenced_code.block#7AAA8A
markup.quote, markup.other#706888italic
variable.css, variable.other.custom-property.css, variable.other.custom-property.scss#C8B880bold
variable.other.custom-property.use.css, variable.other.custom-property.use.scss#C8B880
keyword.other.unit.css, keyword.other.unit.scss, keyword.other.unit.less#7AAA8A
keyword.other.important.css, keyword.other.important.scss#C87A8Abold italic
entity.name.tag.css, entity.name.tag.scss, entity.name.tag.less#7AAA8A
entity.name.type, entity.name.type.interface, entity.name.type.alias, entity.name.type.enum, entity.name.type.class#7AAA8Abold
support.type.primitive.ts, support.type.primitive.tsx, support.type.builtin.ts, support.type.builtin.tsx, keyword.type.ts, keyword.type.tsx#8AAEC0italic
meta.decorator, meta.decorator.ts, meta.decorator.tsx, storage.type.decorator, entity.name.function.decorator, entity.name.type.decorator, punctuation.decorator#9A85B8italic bold
punctuation.definition.decorator, punctuation.decorator.ts, punctuation.decorator.tsx#C87A8Abold
support.class.component.jsx, support.class.component.tsx, entity.name.tag.js.jsx, entity.name.tag.tsx#7AAA8Abold
variable.language, variable.language.this, variable.language.super#C8B880italic
string.regexp, constant.regexp#7AAA8A
constant.other.character-class.regexp, keyword.operator.negation.regexp, punctuation.definition.character-class.regexp#C8B880
keyword.operator.quantifier.regexp, keyword.operator.anchor.regexp#C87A8Abold
punctuation.definition.group.regexp, keyword.operator.or.regexp#9A85B8
keyword.operator.await, keyword.control.await, keyword.operator.async, storage.modifier.async#D0A070italic bold
constant.language.json, constant.language.boolean.true.json, constant.language.boolean.false.json, constant.language.null.json#9A85B8bold
entity.name.tag.yaml, support.type.property-name.yaml#8AAEC0bold
string.unquoted.plain.out.yaml, string.unquoted.plain.in.yaml, string.quoted.single.yaml, string.quoted.double.yaml#7AAA8A
entity.name.type.anchor.yaml, variable.other.alias.yaml, punctuation.definition.anchor.yaml, punctuation.definition.alias.yaml#C8B880bold
constant.numeric.yaml, constant.language.boolean.yaml, constant.language.null.yaml, constant.other.boolean.yaml, constant.other.null.yaml#9A85B8
punctuation.definition.block.sequence.item.yaml#C87A8Abold
comment.line.number-sign.yaml#706888italic
keyword.operation.graphql, keyword.fragment.graphql, keyword.on.graphql, keyword.other.graphql, keyword.type.graphql#9A85B8bold
support.type.graphql, entity.name.type.graphql#7AAA8Abold
variable.graphql, string.unquoted.alias.graphql#8AAEC0
variable.definition.graphql, punctuation.dollar-sign.graphql#C8B880
entity.name.function.directive.graphql, keyword.other.directive.graphql#C87A8Aitalic
string.quoted.double.graphql, comment.line.number-sign.graphql, comment.block.graphql#706888italic
keyword.other.special-method.dockerfile, keyword.other.dockerfile, entity.name.function.dockerfile#9A85B8bold
entity.name.image.dockerfile, entity.name.tag.dockerfile#7AAA8A
variable.other.dockerfile, variable.other.env.dockerfile#C8B880
string.quoted.double.dockerfile, string.quoted.single.dockerfile, comment.line.number-sign.dockerfile#706888italic
storage.type.dart, storage.modifier.dart, keyword.declaration.dart, keyword.other.dart#9A85B8bold
keyword.control.dart, keyword.control.flow.dart#D0A070italic bold
support.class.dart, support.type.dart, entity.name.type.class.dart, entity.name.type.dart#7AAA8Abold
entity.name.function.dart#7A9CC8italic
storage.type.annotation.dart, entity.name.type.annotation.dart#9A85B8italic bold
string.quoted.single.dart, string.quoted.double.dart, string.interpolated.single.dart, string.interpolated.double.dart#7AAA8A
punctuation.definition.template-expression.begin.dart, punctuation.definition.template-expression.end.dart#C87A8Abold
comment.line.double-slash.dart, comment.block.dart#706888italic
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#9A85B8bold
keyword.other.import.java, keyword.other.package.java, storage.modifier.import.java, storage.modifier.package.java#706888italic
keyword.control.java, keyword.control.conditional.java, keyword.control.loop.java, keyword.control.flow.java#D0A070italic bold
storage.type.primitive.java, keyword.type.java#8AAEC0italic
entity.name.type.class.java, entity.name.type.interface.java, entity.name.type.enum.java, entity.name.type.annotation.java#7AAA8Abold
entity.name.function.java#7A9CC8italic
storage.type.annotation.java, punctuation.definition.annotation.java#9A85B8italic bold
storage.type.generic.java, punctuation.bracket.angle.java#7AAA8A
string.quoted.double.java, string.quoted.single.java#7AAA8A
constant.numeric.java, constant.numeric.decimal.java, constant.numeric.hex.java#B88AAA
constant.language.java#9A85B8bold
variable.language.this.java, variable.language.super.java#C87A8Aitalic
comment.line.double-slash.java, comment.block.java, comment.block.javadoc.java#706888italic
keyword.other.documentation.javadoc.java, storage.type.class.javadoc#7A9CC8italic
Amethyst Pulse by Jonh Sousa - VS Code Theme