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#16161D
  • activityBar.border#1F1F28
  • activityBar.foreground#957FB8
  • activityBarBadge.background#FFA066
  • activityBarBadge.foreground#16161D
  • badge.background#957FB8
  • badge.foreground#16161D
  • breadcrumb.activeSelectionForeground#DCD7BA
  • breadcrumb.foreground#727169
  • button.background#957FB8
  • button.foreground#16161D
  • button.hoverBackground#7E9CD8
  • commandCenter.background#2A2A37
  • commandCenter.border#363646
  • commandCenter.foreground#DCD7BA
  • dropdown.background#2A2A37
  • dropdown.border#363646
  • dropdown.foreground#DCD7BA
  • editor.background#181820
  • editor.foreground#DCD7BA
  • editor.lineHighlightBackground#363646
  • editor.selectionBackground#54546D99
  • editor.selectionHighlightBackground#36364680
  • editor.selectionHighlightBorder#957FB8
  • editorCursor.foreground#FFA066
  • editorGroup.border#1F1F28
  • editorGroup.dropBackground#1F1F2880
  • editorGroupHeader.border#1F1F28
  • editorGroupHeader.tabsBackground#16161D
  • editorIndentGuide.activeBackground1#957FB8
  • editorIndentGuide.background1#2A2A37
  • editorLightBulb.foreground#FFA066
  • editorLineNumber.activeForeground#957FB8
  • editorLineNumber.foreground#54546D
  • input.background#2A2A37
  • input.border#363646
  • input.foreground#DCD7BA
  • input.placeholderForeground#727169
  • list.activeSelectionBackground#223249
  • list.activeSelectionForeground#957FB8
  • list.focusBackground#363646
  • list.hoverBackground#2A2A37
  • list.inactiveSelectionBackground#1F1F28
  • panel.border#1F1F28
  • settings.headerForeground#957FB8
  • settings.modifiedItemIndicator#957FB8
  • sideBar.background#16161D
  • sideBar.border#1F1F28
  • sideBar.foreground#DCD7BA
  • sideBarSectionHeader.background#16161D
  • sideBarSectionHeader.foreground#957FB8
  • statusBar.background#16161D
  • statusBar.border#1F1F28
  • statusBar.foreground#DCD7BA
  • statusBarItem.hoverBackground#2A2A37
  • tab.activeBackground#181820
  • tab.activeBorderTop#957FB8
  • tab.activeForeground#DCD7BA
  • tab.border#1F1F28
  • tab.inactiveBackground#16161D
  • tab.inactiveForeground#727169
  • terminal.ansiBlack#16161D
  • terminal.ansiBlue#7E9CD8
  • terminal.ansiBrightBlack#54546D
  • terminal.ansiBrightBlue#7E9CD8
  • terminal.ansiBrightCyan#7AA89F
  • terminal.ansiBrightGreen#98BB6C
  • terminal.ansiBrightMagenta#957FB8
  • terminal.ansiBrightRed#E46876
  • terminal.ansiBrightWhite#DCD7BA
  • terminal.ansiBrightYellow#E6C384
  • terminal.ansiCyan#7AA89F
  • terminal.ansiGreen#98BB6C
  • terminal.ansiMagenta#957FB8
  • terminal.ansiRed#E46876
  • terminal.ansiWhite#DCD7BA
  • terminal.ansiYellow#E6C384
  • terminal.background#181820
  • terminal.foreground#DCD7BA
  • terminalCursor.foreground#FFA066
  • titleBar.activeBackground#16161D
  • titleBar.activeForeground#DCD7BA
  • titleBar.border#1F1F28
  • titleBar.inactiveBackground#16161D
  • titleBar.inactiveForeground#727169
  • tree.indentGuidesStroke#363646

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
entity.name.type.class.java#7AA89Fbold
entity.name.type.interface.java#7E9CD8italic
entity.name.function.java#7FB4CAitalic
variable.other.java#98BB6C
keyword.other.java, storage.type.java#957FB8bold
storage.type.annotation.java, meta.annotation.java#C0A36Eitalic
storage.modifier.import.java, storage.modifier.package.java#727169italic
string.quoted.double.java, string.quoted.single.java#98BB6C
constant.numeric.java#D27E99
comment.line.double-slash.java, comment.block.documentation.java#727169italic
keyword.control, keyword.control.conditional, keyword.control.loop, keyword.control.flow#FFA066italic 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#957FB8bold
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#FFA066italic bold
entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-class.scss, punctuation.definition.entity.css, punctuation.definition.entity.scss#7E9CD8italic
entity.other.attribute-name.pseudo-element.css, entity.other.attribute-name.pseudo-element.scss#7AA89Fitalic
support.type.vendored-property-name.css, support.type.vendored-property-name.scss#7AA89F
variable.scss, variable.other.scss, variable.other.less, variable.less#E6C384bold
entity.name.function.scss, entity.name.function.less, support.function.misc.scss#7E9CD8italic
punctuation.definition.interpolation.begin.bracket.curly.scss, punctuation.definition.interpolation.end.bracket.curly.scss, punctuation.section.interpolation.begin.scss, punctuation.section.interpolation.end.scss#E46876bold
variable.interpolation.scss#98BB6C
entity.other.attribute-name.placeholder.css, entity.other.attribute-name.placeholder.scss#C0A36Ebold
keyword.operator.comparison#C0A36Ebold
keyword.operator.logical#98BB6Cbold
keyword.operator.assignment#7E9CD8bold
keyword.operator#E46876
variable.other.env, support.type.property-name.env#957FB8bold
keyword.operator.assignment.env#7E9CD8
string.unquoted.env, constant.other.env#E6C384
comment.line.number-sign.env#727169italic
keyword.other.DML.sql, keyword.other.DDL.sql, keyword.other.TCL.sql, keyword.other.DCL.sql, keyword.control.sql#957FB8bold
support.function.sql#7E9CD8italic
string.quoted.single.sql, string.quoted.double.sql#98BB6C
constant.numeric.sql#D27E99
comment.line.double-dash.sql, comment.block.sql#727169italic
variable.other.mongodb.operator, support.type.property-name.mongodb#957FB8bold
support.function.mongodb#7E9CD8italic
string.quoted.double.mongodb, string.quoted.single.mongodb#98BB6C
constant.numeric.mongodb#D27E99
comment.line.double-slash.mongodb, comment.block.mongodb#727169italic
storage.type, storage.modifier, keyword.declaration.js, keyword.declaration.ts#957FB8bold
keyword.control.import, keyword.control.export, keyword.control.from, keyword.control.as, keyword.control.default, keyword.other.import, keyword.other.export, keyword.other.from#957FB8bold
constant.language.import-export-all, constant.language.import-export-all.js, constant.language.import-export-all.ts, keyword.operator.module, storage.type.namespace.wildcard#E46876bold
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded.begin, punctuation.section.embedded.end#E46876bold
meta.template.expression, meta.embedded.expression#DCD7BA
meta.template.expression variable.other, meta.embedded.expression variable.other#DCD7BA
meta.template.expression support.type, meta.embedded.expression support.type#7AA89F
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#7FB4CAbold
variable.other.object, variable.other.readwrite.alias#DCD7BA
entity.name.function, support.function, variable.function#7E9CD8italic
variable.parameter#DCD7BA
entity.name.tag, punctuation.definition.tag#7AA89F
entity.other.attribute-name#957FB8italic
string#98BB6C
constant.language#957FB8bold
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#E6C384
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#E6C384bold
support.type.property-name.json, meta.mapping.key.json#7FB4CAbold
string.json, constant.numeric.json#C0A36E
comment, punctuation.definition.comment#727169italic
markup.heading, markup.heading.markdown, markup.heading.marker#957FB8bold
punctuation.definition.heading#363646
markup.bold, markup.bold.markdown#7E9CD8bold
markup.italic, markup.italic.markdown#E6C384italic
markup.list.bullet, markup.list.markdown, punctuation.definition.list#363646bold
markup.list#DCD7BA
markup.underline.link, markup.link, string.link#7FB4CAunderline
markup.inline.raw, markup.fenced_code.block#98BB6C
markup.quote, markup.other#727169italic
variable.css, variable.other.custom-property.css, variable.other.custom-property.scss#E6C384bold
variable.other.custom-property.use.css, variable.other.custom-property.use.scss#C0A36E
keyword.other.unit.css, keyword.other.unit.scss, keyword.other.unit.less#98BB6C
keyword.other.important.css, keyword.other.important.scss#E46876bold italic
entity.name.tag.css, entity.name.tag.scss, entity.name.tag.less#7AA89F
entity.name.type, entity.name.type.interface, entity.name.type.alias, entity.name.type.enum, entity.name.type.class#7AA89Fbold
support.type.primitive.ts, support.type.primitive.tsx, support.type.builtin.ts, support.type.builtin.tsx, keyword.type.ts, keyword.type.tsx#7FB4CAitalic
meta.decorator, meta.decorator.ts, meta.decorator.tsx, storage.type.decorator, entity.name.function.decorator, entity.name.type.decorator, punctuation.decorator#957FB8italic bold
punctuation.definition.decorator, punctuation.decorator.ts, punctuation.decorator.tsx#E46876bold
support.class.component.jsx, support.class.component.tsx, entity.name.tag.js.jsx, entity.name.tag.tsx#7AA89Fbold
variable.language, variable.language.this, variable.language.super#C0A36Eitalic
string.regexp, constant.regexp#98BB6C
constant.other.character-class.regexp, keyword.operator.negation.regexp, punctuation.definition.character-class.regexp#C0A36E
keyword.operator.quantifier.regexp, keyword.operator.anchor.regexp#E46876bold
punctuation.definition.group.regexp, keyword.operator.or.regexp#957FB8
keyword.operator.await, keyword.control.await, keyword.operator.async, storage.modifier.async#FFA066italic bold
constant.language.json, constant.language.boolean.true.json, constant.language.boolean.false.json, constant.language.null.json#957FB8bold
entity.name.tag.yaml, support.type.property-name.yaml#7FB4CAbold
string.unquoted.plain.out.yaml, string.unquoted.plain.in.yaml, string.quoted.single.yaml, string.quoted.double.yaml#98BB6C
entity.name.type.anchor.yaml, variable.other.alias.yaml, punctuation.definition.anchor.yaml, punctuation.definition.alias.yaml#C0A36Ebold
constant.numeric.yaml, constant.language.boolean.yaml, constant.language.null.yaml, constant.other.boolean.yaml, constant.other.null.yaml#957FB8
punctuation.definition.block.sequence.item.yaml#E46876bold
comment.line.number-sign.yaml#727169italic
keyword.operation.graphql, keyword.fragment.graphql, keyword.on.graphql, keyword.other.graphql, keyword.type.graphql#957FB8bold
support.type.graphql, entity.name.type.graphql#7AA89Fbold
variable.graphql, string.unquoted.alias.graphql#7FB4CA
variable.definition.graphql, punctuation.dollar-sign.graphql#E6C384
entity.name.function.directive.graphql, keyword.other.directive.graphql#E46876italic
string.quoted.double.graphql, comment.line.number-sign.graphql, comment.block.graphql#727169italic
keyword.other.special-method.dockerfile, keyword.other.dockerfile, entity.name.function.dockerfile#957FB8bold
entity.name.image.dockerfile, entity.name.tag.dockerfile#7AA89F
variable.other.dockerfile, variable.other.env.dockerfile#E6C384
string.quoted.double.dockerfile, string.quoted.single.dockerfile, comment.line.number-sign.dockerfile#727169italic
storage.type.dart, storage.modifier.dart, keyword.declaration.dart, keyword.other.dart#957FB8bold
keyword.control.dart, keyword.control.flow.dart#FFA066italic bold
support.class.dart, support.type.dart, entity.name.type.class.dart, entity.name.type.dart#7AA89Fbold
entity.name.function.dart#7E9CD8italic
storage.type.annotation.dart, entity.name.type.annotation.dart#957FB8italic bold
string.quoted.single.dart, string.quoted.double.dart, string.interpolated.single.dart, string.interpolated.double.dart#98BB6C
punctuation.definition.template-expression.begin.dart, punctuation.definition.template-expression.end.dart#E46876bold
comment.line.double-slash.dart, comment.block.dart#727169italic
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#957FB8bold
keyword.other.import.java, keyword.other.package.java, storage.modifier.import.java, storage.modifier.package.java#727169italic
keyword.control.java, keyword.control.conditional.java, keyword.control.loop.java, keyword.control.flow.java#FFA066italic bold
storage.type.primitive.java, keyword.type.java#7FB4CAitalic
entity.name.type.class.java, entity.name.type.interface.java, entity.name.type.enum.java, entity.name.type.annotation.java#7AA89Fbold
entity.name.function.java#7E9CD8italic
storage.type.annotation.java, punctuation.definition.annotation.java#957FB8italic bold
storage.type.generic.java, punctuation.bracket.angle.java#98BB6C
string.quoted.double.java, string.quoted.single.java#98BB6C
constant.numeric.java, constant.numeric.decimal.java, constant.numeric.hex.java#D27E99
constant.language.java#957FB8bold
variable.language.this.java, variable.language.super.java#E46876italic
comment.line.double-slash.java, comment.block.java, comment.block.javadoc.java#727169italic
keyword.other.documentation.javadoc.java, storage.type.class.javadoc#7E9CD8italic