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#C9C8BA
  • activityBar.foreground#000000
  • activityBarBadge.background#666666
  • activityBarBadge.foreground#EDEBDE
  • badge.background#666666
  • badge.foreground#EDEBDE
  • editor.background#DFDED6
  • editor.foreground#000000
  • editor.inactiveSelectionBackground#E5EBF1
  • editor.lineHighlightBorder#D9D8CE
  • editor.selectionHighlightBackground#ADD6FF4D
  • editorGroupHeader.tabsBackground#D3D3D3
  • editorIndentGuide.background#D3D3D3
  • editorLineNumber.foreground#666666
  • editorSuggestWidget.background#F3F3F3
  • gitDecoration.addedResourceForeground#b25ebd
  • gitDecoration.conflictingResourceForeground#cc0000
  • gitDecoration.deletedResourceForeground#880088
  • gitDecoration.ignoredResourceForeground#5e5c46
  • gitDecoration.modifiedResourceForeground#6f1616
  • gitDecoration.submoduleResourceForeground#666666
  • gitDecoration.untrackedResourceForeground#B95C00
  • list.activeSelectionBackground#DDDDDD
  • list.activeSelectionForeground#000000
  • list.focusBackground#DDDDDD
  • list.hoverBackground#DDDDDD
  • list.inactiveSelectionBackground#D3D2C7
  • list.inactiveSelectionForeground#000000
  • panel.background#DDDDDD
  • panel.border#666666
  • panelTitle.activeBorder#666666
  • panelTitle.activeForeground#000000
  • panelTitle.inactiveForeground#666666
  • sideBar.background#E3E2DB
  • sideBar.border#666666
  • sideBar.foreground#000000
  • sideBarSectionHeader.background#C9C8BA
  • sideBarSectionHeader.foreground#000000
  • sideBarTitle.foreground#000000
  • tab.activeForeground#000000
  • tab.inactiveBackground#E0E0E0
  • tab.inactiveForeground#333333
  • terminal.ansiBrightGreen#009100
  • terminal.ansiBrightYellow#B95C00
  • terminal.ansiGreen#005800
  • terminal.border#666666
  • terminalCursor.foreground#ADADAD

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
constant.numeric#0074C1—
constant.language#0074C1italic
entity.other.attribute-name.html#824A13—
meta.tag.sgml.doctype.html#880000—
entity.name.tag.structure.any.html, entity.name.tag, punctuation.definition.tag#000088—
comment#005800
comment.block.html#005800—
entity.name.selector#872D05—
invalid#959595italic bold
string#880000—
string.regexp, constant.regexp#880000—
string.regexp.js punctuation.definition.string.begin.js, string.regexp.js punctuation.definition.string.end.js#0074C1bold
string.regexp.js keyword.operator.quantifier.regexp#000000bold
keyword.control#000088—
keyword.operator#000000—
keyword.operator.expression.delete.js#000000italic
variable#880000—
support.function#000000—
storage.type, storage.type.function#000088—
entity.name.function, entity.name.type, variable.other.constant.object, support.class.console, support.class#880000bold
entity.name.function, support.function#880000
entity.name.function#880000—
support.class.builtin, support.constant.math#000000bold
keyword.operator.new#000000
variable.language.this#000000bold
variable.parameter#000000—
variable.other.readwrite, variable.other.object#824a13—
variable.other.property#000000—
meta.array.literal variable.other.readwrite#000000—
storage.type.class, storage.modifier#000088—
entity.name.type.class, variable.other.readwrite.alias#880000bold
entity.other.inherited-class#880000—
entity.name.type.module#000000—
keyword.control.export, keyword.control.default#000000bold
support.type.object.module#000088bold
meta.object-literal.key#000000—
support.function.console.js#000000
support.class.component.js#000088
entity.name.tag.localname.xml#000088—
entity.name.variable.local.cs#824a13—
storage.modifier.cs#000000—
entity.name.function.cs#880000bold
entity.name.type.namespace.cs#000088bold
keyword.type.cs#000088
keyword.other.class.cs#000000bold
entity.name.type.class.cs#880000bold
storage.type.cs#000088
storage.type.class.python#000088—
entity.name.type.class.python#880000—
variable.language.special.self.python#000000bold
meta.function-call.generic.python#880000—
support.type.property-name.json#000088—
storage.type.js, storage.type.function.js#000088—
entity.name.function.js, entity.name.type.js, variable.other.constant.object.js, support.class.console.js, support.class.js#880000bold
meta.function-call.js entity.name.function.js, meta.function-call.js support.function.js#000000
source.js meta.var.expr.js meta.function-call.js support.function.js#000000
meta.object-literal.key.js entity.name.function.js#880000—
support.class.builtin.js, support.constant.math.js#000000bold
keyword.operator.new.js#000000
variable.language.this.js#000000bold
variable.parameter.js#000000—
variable.other.readwrite.js, variable.other.object.js#824a13—
variable.other.constant.js#824a13
variable.other.property.js#000000—
meta.array.literal.js variable.other.readwrite.js#000000—
source.js meta.class.js storage.type.class.js, source.js meta.class.js storage.modifier.js#000088—
source.js meta.class.js entity.name.type.class.js, source.js meta.import.js variable.other.readwrite.alias.js#880000bold
source.js meta.import.js constant.language.import-export-all.js#880000
source.js meta.class.js entity.other.inherited-class.js#880000—
source.js meta.class.js entity.name.type.module.js#000000—
support.function.promise.js#008888italic bold
support.class.promise.js#008888bold
keyword.control.export.js#000000
source.js meta.export.default.js keyword.control.export.js, source.js meta.export.default.js keyword.control.default.js#000000bold
source.js support.type.object.module.js#000088bold
meta.object-literal.key.js#000000—
source.js meta.function.js meta.block.js meta.var.expr.js string.template.js#000000—
comment.block.documentation.js, comment.block.documentation.js entity.name.type.instance.jsdoc, entity.name.type.instance.jsdoc, comment.block.documentation.js storage.type.class.jsdoc, comment.block.documentation.js variable.other.object.tsx, comment.block.documentation.js variable.other.readwrite.tsx, comment.block.documentation.js variable.other.property.tsx, comment.block.documentation.js variable.other.jsdoc, comment.block.documentation.js entity.name.function.tsx, comment.block.documentation.js string.quoted.single.tsx, comment.block.documentation.js string.quoted.double.tsx, comment.block.documentation.js punctuation.separator.key-value.tsx#824a13
comment.block.documentation.js storage.type.class.jsdoc#824a13bold
entity.name.tag.css#880000bold
entity.other.attribute-name.class.css, entity.other.attribute-name.class.scss, entity.other.attribute-name.class.mixin.css, entity.other.attribute-name.class.mixin.scss, entity.other.attribute-name.id.css, entity.other.attribute-name.id.scss, entity.other.attribute-name.parent-selector.css, entity.other.attribute-name.parent-selector.scss, entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-class.scss, entity.other.attribute-name.pseudo-element.css, entity.other.attribute-name.pseudo-element.scss, entity.other.attribute-name.attribute.css, entity.other.attribute-name.attribute.scss, entity.other.attribute-name.css, entity.other.attribute-name.scss#880000—
support.type.property-name.css, meta.property-name.css, meta.property-list.css, source.css, meta.property-name.scss, meta.property-list.scss, source.css.scss, meta.property-list entity.name.tag.css#000000
support.constant.property-value.css, meta.property-value.scss, meta.property-list.scss, source.css.scss, string.quoted.single.css, meta.property-value.css, meta.property-list.css, source.css, string.quoted.single.scss, variable.scss, source.css.scss, support.constant.font-name.css, constant.numeric.css, keyword.other.unit.px.css#000088—
variable.scss, variable.css#000088bold
keyword.operator.logical.only.media.css, meta.at-rule.media.header.css, source.css, keyword.control.operator.css.scss, meta.at-rule.media.scss, source.css.scss#000000—
keyword.control.at-rule#000000bold
markup.heading.markdown entity.name.section.markdown#880000bold
markup.heading.markdown punctuation.definition.heading.markdown#880000—
text.html.markdown meta.paragraph.markdown markup.inline.raw.string.markdown, text.html.markdown meta.paragraph.markdown markup.bold.markdown, text.html.markdown meta.paragraph.markdown markup.italic.markdown#880000—
text.html.markdown meta.paragraph.markdown markup.bold.markdown—bold
text.html.markdown meta.paragraph.markdown markup.italic.markdown—italic
text.html.markdown meta.paragraph.markdown markup.bold.markdown markup.italic.markdown—italic bold
text.html.markdown meta.separator.markdown, text.html.markdown meta.paragraph.markdown markup.heading.setext.1.markdown, text.html.markdown meta.paragraph.markdown markup.heading.setext.2.markdown#880000—
text.html.markdown markup.quote.markdown beginning.punctuation.definition.quote.markdown, text.html.markdown markup.quote.markdown meta.paragraph.markdown#000088italic
markup.list.numbered.markdown meta.paragraph.markdown markup.bold.markdown, markup.list.unnumbered.markdown meta.paragraph.markdown markup.bold.markdown—bold
markup.list.numbered.markdown meta.paragraph.markdown markup.italic.markdown, markup.list.unnumbered.markdown meta.paragraph.markdown markup.italic.markdown—italic
string.other.link.title.markdown, string.other.link.description.markdown#880000bold
markup.underline.link.markdown, constant.other.reference.link.markdown, punctuation.definition.constant.markdown, punctuation.definition.string.begin.markdown, text.html.markdown meta.paragraph.markdown meta.image.reference.markdown string.other.link.description.markdown#0074C1
markup.fenced_code.block.markdown#000088—
source.asm.x86_64 constant.language.registers.general-purpose—
support.function.builtin.shell#000000—
source.shell meta.scope.while-loop.shell string.quoted.double.shell#880000—
ThemeDatabase All Themes by enes ozturk - VS Code Theme