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#0D1B2A
  • activityBar.border#2D3E50
  • activityBar.foreground#4299E1
  • activityBarBadge.background#DD6B20
  • activityBarBadge.foreground#F7F0E6
  • badge.background#4299E1
  • badge.foreground#0D1B2A
  • breadcrumb.activeSelectionForeground#F7F0E6
  • breadcrumb.foreground#5A6B7A
  • button.background#4299E1
  • button.foreground#0D1B2A
  • button.hoverBackground#3182CE
  • commandCenter.background#1B2838
  • commandCenter.border#2D3E50
  • commandCenter.foreground#F7F0E6
  • dropdown.background#1B2838
  • dropdown.border#2D3E50
  • dropdown.foreground#F7F0E6
  • editor.background#0D1B2A
  • editor.foreground#F7F0E6
  • editor.lineHighlightBackground#1B283880
  • editor.selectionBackground#24344799
  • editor.selectionHighlightBackground#24344780
  • editor.selectionHighlightBorder#4299E1
  • editorCursor.foreground#DD6B20
  • editorGroup.border#2D3E50
  • editorGroup.dropBackground#24344780
  • editorGroupHeader.border#2D3E50
  • editorGroupHeader.tabsBackground#0D1B2A
  • editorIndentGuide.activeBackground1#4299E1
  • editorIndentGuide.background1#2D3E50
  • editorLightBulb.foreground#DD6B20
  • editorLineNumber.activeForeground#4299E1
  • editorLineNumber.foreground#2D3E50
  • input.background#1B2838
  • input.border#2D3E50
  • input.foreground#F7F0E6
  • input.placeholderForeground#5A6B7A
  • list.activeSelectionBackground#243447
  • list.activeSelectionForeground#4299E1
  • list.focusBackground#243447
  • list.hoverBackground#1B2838
  • list.inactiveSelectionBackground#1B2838
  • panel.border#2D3E50
  • settings.headerForeground#4299E1
  • settings.modifiedItemIndicator#4299E1
  • sideBar.background#0D1B2A
  • sideBar.border#2D3E50
  • sideBar.foreground#F7F0E6
  • sideBarSectionHeader.background#0D1B2A
  • sideBarSectionHeader.foreground#4299E1
  • statusBar.background#0D1B2A
  • statusBar.border#2D3E50
  • statusBar.foreground#F7F0E6
  • statusBarItem.hoverBackground#1B2838
  • tab.activeBackground#1B2838
  • tab.activeBorderTop#4299E1
  • tab.activeForeground#F7F0E6
  • tab.border#2D3E50
  • tab.inactiveBackground#0D1B2A
  • tab.inactiveForeground#5A6B7A
  • terminal.ansiBlack#0D1B2A
  • terminal.ansiBlue#4299E1
  • terminal.ansiBrightBlack#5A6B7A
  • terminal.ansiBrightBlue#63B3ED
  • terminal.ansiBrightCyan#81E6D9
  • terminal.ansiBrightGreen#9AE6B4
  • terminal.ansiBrightMagenta#63B3ED
  • terminal.ansiBrightRed#FEB2B2
  • terminal.ansiBrightWhite#F7F0E6
  • terminal.ansiBrightYellow#FBD38D
  • terminal.ansiCyan#68D391
  • terminal.ansiGreen#68D391
  • terminal.ansiMagenta#4299E1
  • terminal.ansiRed#E06C75
  • terminal.ansiWhite#F7F0E6
  • terminal.ansiYellow#DD6B20
  • terminal.background#0D1B2A
  • terminal.foreground#F7F0E6
  • terminalCursor.foreground#DD6B20
  • titleBar.activeBackground#0D1B2A
  • titleBar.activeForeground#F7F0E6
  • titleBar.border#2D3E50
  • titleBar.inactiveBackground#0D1B2A
  • titleBar.inactiveForeground#5A6B7A
  • tree.indentGuidesStroke#2D3E50

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
entity.name.type.class.java#4299E1bold
entity.name.type.interface.java#63B3EDitalic
entity.name.function.java#DD6B20italic
variable.other.java#68D391
keyword.other.java, storage.type.java#4299E1bold
storage.type.annotation.java, meta.annotation.java#81E6D9italic
storage.modifier.import.java, storage.modifier.package.java#5A6B7Aitalic
string.quoted.double.java, string.quoted.single.java#68D391
constant.numeric.java#DD6B20
comment.line.double-slash.java, comment.block.documentation.java#5A6B7Aitalic
keyword.control, keyword.control.conditional, keyword.control.loop, keyword.control.flow#DD6B20italic 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, keyword.control.at-rule.scss, punctuation.definition.keyword.css, punctuation.definition.keyword.scss#4299E1bold
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#DD6B20italic bold
entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-class.scss, punctuation.definition.entity.css, punctuation.definition.entity.scss#63B3EDitalic
entity.other.attribute-name.pseudo-element.css, entity.other.attribute-name.pseudo-element.scss#81E6D9italic
support.type.vendored-property-name.css, support.type.vendored-property-name.scss#81E6D9
variable.scss, variable.other.scss, variable.other.less, variable.less#DD6B20bold
entity.name.function.scss, entity.name.function.less, support.function.misc.scss#63B3EDitalic
punctuation.definition.interpolation.begin.bracket.curly.scss, punctuation.definition.interpolation.end.bracket.curly.scss, punctuation.section.interpolation.begin.scss, punctuation.section.interpolation.end.scss#E06C75bold
variable.interpolation.scss#68D391
entity.other.attribute-name.placeholder.css, entity.other.attribute-name.placeholder.scss#FBD38Dbold
keyword.operator.comparison#FBD38Dbold
keyword.operator.logical#68D391bold
keyword.operator.assignment#63B3EDbold
keyword.operator#E06C75
variable.other.env, support.type.property-name.env#4299E1bold
keyword.operator.assignment.env#63B3ED
string.unquoted.env, constant.other.env#DD6B20
comment.line.number-sign.env#5A6B7Aitalic
keyword.other.DML.sql, keyword.other.DDL.sql, keyword.other.TCL.sql, keyword.other.DCL.sql, keyword.control.sql#4299E1bold
support.function.sql#63B3EDitalic
string.quoted.single.sql, string.quoted.double.sql#68D391
constant.numeric.sql#DD6B20
comment.line.double-dash.sql, comment.block.sql#5A6B7Aitalic
variable.other.mongodb.operator, support.type.property-name.mongodb#4299E1bold
support.function.mongodb#63B3EDitalic
string.quoted.double.mongodb, string.quoted.single.mongodb#68D391
constant.numeric.mongodb#DD6B20
comment.line.double-slash.mongodb, comment.block.mongodb#5A6B7Aitalic
storage.type, storage.modifier, keyword.declaration.js, keyword.declaration.ts#4299E1bold
keyword.control.import, keyword.control.export, keyword.control.from, keyword.control.as, keyword.control.default, keyword.other.import, keyword.other.export, keyword.other.from#4299E1bold
constant.language.import-export-all, constant.language.import-export-all.js, constant.language.import-export-all.ts, keyword.operator.module, storage.type.namespace.wildcard#E06C75bold
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded.begin, punctuation.section.embedded.end#E06C75bold
meta.template.expression, meta.embedded.expression#F7F0E6
meta.template.expression variable.other, meta.embedded.expression variable.other#F7F0E6
meta.template.expression support.type, meta.embedded.expression support.type#81E6D9
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#81E6D9bold
variable.other.object, variable.other.readwrite.alias#F7F0E6
entity.name.function, support.function, variable.function#63B3EDitalic
variable.parameter#F7F0E6
entity.name.tag, punctuation.definition.tag#4EC9B0
entity.other.attribute-name#4299E1italic
string#68D391
constant.language#4299E1bold
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#DD6B20
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#DD6B20bold
support.type.property-name.json, meta.mapping.key.json#81E6D9bold
string.json, constant.numeric.json#FBD38D
comment, punctuation.definition.comment#5A6B7Aitalic
markup.heading, markup.heading.markdown, markup.heading.marker#4299E1bold
punctuation.definition.heading#2D3E50
markup.bold, markup.bold.markdown#63B3EDbold
markup.italic, markup.italic.markdown#DD6B20italic
markup.list.bullet, markup.list.markdown, punctuation.definition.list#2D3E50bold
markup.list#F7F0E6
markup.underline.link, markup.link, string.link#81E6D9underline
markup.inline.raw, markup.fenced_code.block#68D391
markup.quote, markup.other#5A6B7Aitalic
variable.css, variable.other.custom-property.css, variable.other.custom-property.scss#DD6B20bold
variable.other.custom-property.use.css, variable.other.custom-property.use.scss#FBD38D
keyword.other.unit.css, keyword.other.unit.scss, keyword.other.unit.less#68D391
keyword.other.important.css, keyword.other.important.scss#E06C75bold italic
entity.name.tag.css, entity.name.tag.scss, entity.name.tag.less#4EC9B0
entity.name.type, entity.name.type.interface, entity.name.type.alias, entity.name.type.enum, entity.name.type.class#4EC9B0bold
support.type.primitive.ts, support.type.primitive.tsx, support.type.builtin.ts, support.type.builtin.tsx, keyword.type.ts, keyword.type.tsx#81E6D9italic
meta.decorator, meta.decorator.ts, meta.decorator.tsx, storage.type.decorator, entity.name.function.decorator, entity.name.type.decorator, punctuation.decorator#4299E1italic bold
punctuation.definition.decorator, punctuation.decorator.ts, punctuation.decorator.tsx#E06C75bold
support.class.component.jsx, support.class.component.tsx, entity.name.tag.js.jsx, entity.name.tag.tsx#4EC9B0bold
variable.language, variable.language.this, variable.language.super#FBD38Ditalic
string.regexp, constant.regexp#68D391
constant.other.character-class.regexp, keyword.operator.negation.regexp, punctuation.definition.character-class.regexp#FBD38D
keyword.operator.quantifier.regexp, keyword.operator.anchor.regexp#E06C75bold
punctuation.definition.group.regexp, keyword.operator.or.regexp#4299E1
keyword.operator.await, keyword.control.await, keyword.operator.async, storage.modifier.async#DD6B20italic bold
constant.language.json, constant.language.boolean.true.json, constant.language.boolean.false.json, constant.language.null.json#4299E1bold
entity.name.tag.yaml, support.type.property-name.yaml#81E6D9bold
string.unquoted.plain.out.yaml, string.unquoted.plain.in.yaml, string.quoted.single.yaml, string.quoted.double.yaml#68D391
entity.name.type.anchor.yaml, variable.other.alias.yaml, punctuation.definition.anchor.yaml, punctuation.definition.alias.yaml#FBD38Dbold
constant.numeric.yaml, constant.language.boolean.yaml, constant.language.null.yaml, constant.other.boolean.yaml, constant.other.null.yaml#4299E1
punctuation.definition.block.sequence.item.yaml#E06C75bold
comment.line.number-sign.yaml#5A6B7Aitalic
keyword.operation.graphql, keyword.fragment.graphql, keyword.on.graphql, keyword.other.graphql, keyword.type.graphql#4299E1bold
support.type.graphql, entity.name.type.graphql#4EC9B0bold
variable.graphql, string.unquoted.alias.graphql#81E6D9
variable.definition.graphql, punctuation.dollar-sign.graphql#DD6B20
entity.name.function.directive.graphql, keyword.other.directive.graphql#E06C75italic
string.quoted.double.graphql, comment.line.number-sign.graphql, comment.block.graphql#5A6B7Aitalic
keyword.other.special-method.dockerfile, keyword.other.dockerfile, entity.name.function.dockerfile#4299E1bold
entity.name.image.dockerfile, entity.name.tag.dockerfile#4EC9B0
variable.other.dockerfile, variable.other.env.dockerfile#DD6B20
string.quoted.double.dockerfile, string.quoted.single.dockerfile, comment.line.number-sign.dockerfile#5A6B7Aitalic
storage.type.dart, storage.modifier.dart, keyword.declaration.dart, keyword.other.dart#4299E1bold
keyword.control.dart, keyword.control.flow.dart#DD6B20italic bold
support.class.dart, support.type.dart, entity.name.type.class.dart, entity.name.type.dart#4EC9B0bold
entity.name.function.dart#63B3EDitalic
storage.type.annotation.dart, entity.name.type.annotation.dart#4299E1italic bold
string.quoted.single.dart, string.quoted.double.dart, string.interpolated.single.dart, string.interpolated.double.dart#68D391
punctuation.definition.template-expression.begin.dart, punctuation.definition.template-expression.end.dart#E06C75bold
comment.line.double-slash.dart, comment.block.dart#5A6B7Aitalic
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#4299E1bold
keyword.other.import.java, keyword.other.package.java, storage.modifier.import.java, storage.modifier.package.java#5A6B7Aitalic
keyword.control.java, keyword.control.conditional.java, keyword.control.loop.java, keyword.control.flow.java#DD6B20italic bold
storage.type.primitive.java, keyword.type.java#81E6D9italic
entity.name.type.class.java, entity.name.type.interface.java, entity.name.type.enum.java, entity.name.type.annotation.java#4EC9B0bold
entity.name.function.java#63B3EDitalic
storage.type.annotation.java, punctuation.definition.annotation.java#4299E1italic bold
storage.type.generic.java, punctuation.bracket.angle.java#68D391
string.quoted.double.java, string.quoted.single.java#68D391
constant.numeric.java, constant.numeric.decimal.java, constant.numeric.hex.java#DD6B20
constant.language.java#4299E1bold
variable.language.this.java, variable.language.super.java#E06C75italic
comment.line.double-slash.java, comment.block.java, comment.block.javadoc.java#5A6B7Aitalic
keyword.other.documentation.javadoc.java, storage.type.class.javadoc#63B3EDitalic