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.activeBorder#00FF00
  • activityBar.background#FF0000
  • activityBar.foreground#FFFF00
  • activityBarBadge.background#00FF00
  • activityBarBadge.foreground#9400D3
  • badge.background#FF0000
  • badge.foreground#4B0082
  • breadcrumb.activeSelectionForeground#9400D3
  • button.background#FF0000
  • button.foreground#00FF00
  • button.hoverBackground#19f9d7c7
  • debugToolBar.background#002b36
  • dropdown.background#0000FF
  • dropdown.border#19f9d8
  • dropdown.foreground#FFFF00
  • dropdown.listBackground#0000FF
  • editor.background#9400D3
  • editor.foreground#FF7F00
  • editor.lineHighlightBackground#9400D3
  • editor.selectionBackground#9400D3
  • editorCursor.foreground#FFFF00
  • editorGroupHeader.tabsBackground#00FF00
  • editorGutter.addedBackground#FF7F00
  • editorGutter.background#FFFF00
  • editorGutter.commentRangeForeground#FFFF00
  • editorLineNumber.activeForeground#00FF00
  • editorPane.background#FF7F00
  • editorWhitespace.foreground#34383d
  • editorWidget.background#002b36
  • extensionButton.prominentBackground#19f9d8
  • extensionButton.prominentForeground#404954
  • extensionButton.prominentHoverBackground#19f9d7c7
  • focusBorder#19f9d759
  • input.background#00FF00
  • input.border#19f9d8
  • inputOption.activeBorder#19f9d8
  • inputValidation.errorBorder#FF0000
  • inputValidation.infoBackground#002b36
  • inputValidation.infoBorder#19f9d8
  • list.activeSelectionBackground#09698180
  • list.activeSelectionForeground#d4d4d4
  • list.focusBackground#09698180
  • list.focusForeground#d4d4d4
  • list.highlightForeground#aeb1b0
  • list.hoverBackground#09698180
  • list.hoverForeground#d4d4d4
  • list.inactiveFocusBackground#002b36
  • list.inactiveSelectionBackground#09698180
  • list.inactiveSelectionForeground#aeb1b0
  • menu.background#4B0082
  • menu.foreground#FF7F00
  • menu.selectionBackground#9400D3
  • menu.selectionForeground#00FF00
  • menu.separatorBackground#0000FF
  • minimap.errorHighlight#ff1212b3
  • minimap.findMatchHighlight#d18616
  • minimap.selectionHighlight#264f78
  • minimap.warningHighlight#cca700
  • minimapGutter.addedBackground#587c0c
  • minimapGutter.deletedBackground#94151b
  • minimapGutter.modifiedBackground#0c7d9d
  • notificationCenterHeader.background#FFFF00
  • notifications.background#FFFF00
  • notifications.foreground#00FF00
  • panel.background#FF0000
  • panel.border#00FF00
  • panelTitle.activeBorder#19f9d8
  • panelTitle.activeForeground#e7e7e7
  • panelTitle.inactiveForeground#e7e7e799
  • peekViewTitle.background#00FF00
  • quickInput.background#00FF00
  • quickInput.foreground#FF0000
  • scrollbarSlider.background#0000FF
  • scrollbarSlider.hoverBackground#0000FF
  • settings.dropdownBackground#00FF00
  • settings.dropdownForeground#f0f0f0
  • settings.headerForeground#4B0082
  • sideBar.background#FF7F00
  • sideBar.border#0000FF
  • sideBar.foreground#0000FF
  • sideBarSectionHeader.foreground#0000FF
  • sideBarTitle.foreground#0000FF
  • statusBar.background#FF0000
  • statusBar.debuggingBackground#00FF00
  • statusBar.debuggingForeground#FF7F00
  • statusBar.foreground#FF7F00
  • statusBar.noFolderBackground#002b36
  • statusBar.noFolderForeground#9400D3
  • statusBarItem.activeBackground#002b36
  • statusBarItem.hoverBackground#00FF00
  • statusBarItem.prominentBackground#002b36
  • statusBarItem.prominentForeground#FF7F00
  • statusBarItem.prominentHoverBackground#09698180
  • statusBarItem.remoteBackground#FF0000
  • statusBarItem.remoteForeground#0000FF
  • tab.activeBackground#0000FF
  • tab.activeBorder#FF7F00
  • tab.activeForeground#d4d4d4
  • tab.border#FF0000
  • tab.hoverBorder#0000FF
  • tab.inactiveBackground#FF7F00
  • tab.inactiveForeground#717272
  • terminal.background#4B0082
  • terminal.foreground#00FF00
  • terminal.selectionBackground#FF0000
  • textLink.activeForeground#b3b8b6e5
  • textLink.foreground#00abc1de
  • titleBar.activeBackground#FFFF00
  • titleBar.activeForeground#4B0082
  • titleBar.inactiveBackground#FFFF00
  • titleBar.inactiveForeground#4B0082

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#FFFF00italic
storage.type, keyword.control.import.js, keyword.control.from.js, support.class.error.js#FF2C6D
string.quoted.double, string.template#00ABC1DA
punctuation.definition.string.begin, punctuation.definition.string.end, punctuation.definition.string.template.begin, punctuation.definition.string.template.end#00ACC1
meta.brace.round.js, punctuation.terminator.statement.js#C5C5C5F1
punctuation.separator.comma.js, punctuation.definition.block.js, punctuation.definition.parameters.begin.js, punctuation.definition.parameters.end.js#C5C5C5F1
keyword.control.loop#09CBDD
keyword.control.flow, keyword.operator.new#00E5FFCC
punctuation.accessor, meta.brace.square.js, keyword.operator.arithmetic, keyword.operator.comparison, keyword.operator.assignment, keyword.operator.relational, keyword.operator, punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, constant.language.import-export-all.js, entity.other.attribute-name.js#FFCC95
keyword.control.switch#079BA8
string.quoted.single#00ABC1DE
variable.language.this, constant.language.boolean.true, constant.language.boolean.false, constant.language.undefined, constant.language.null#F48FB1DC
variable.other.object.property, variable.other.property, meta.template.expression, support.variable.property, variable.language.super, support.class.component.js, entity.name.tag.js#FF2C6BF1
meta.jsx.children.js#C0BABAEC
meta.embedded.line, variable.other.object, variable.other.readwrite, entity.name.type.class, entity.name.type, entity.other.inherited-class, variable.parameter, variable.object.property.js#A1D7DA
constant.numeric.decimal#FF5622DE
support.class.console, support.function.console, meta.object-literal.key#FFCC95E7
support.variable.dom, storage.modifier, support.function#079BA8
entity.name.function#09CBDD
storage.type.function#F48FB1
support.type.property-name.json, punctuation.support.type.property-name.begin.json, punctuation.support.type.property-name.end.json#FFCC95
keyword.control.conditional, keyword.control.trycatch.js#09CBDD
support.function.dom#FFCC95E3
constant.language.json#00ACC1
constant.language.json, constant.numeric.json#EE475E
entity.name.tag.script.html, entity.name.tag.structure.any.html, entity.name.tag.html, entity.name.tag.inline.any.html, entity.name.tag.block.any.html, entity.name.tag.other.html, meta.tag.sgml.doctype.html#FF2C6BF1
entity.other.attribute-name.html, entity.other.attribute-name.id.html#FFCC95EE
punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, punctuation.definition.tag.begin.js, punctuation.definition.tag.end.js#C5C5C5F1
meta.tag.structure.any.html, meta.tag.inline.any.html#C5C5C5F1
text.html.basic#BDBDBD
meta.toc-list.id.html#64FFDBDA
entity.name.tag.xml, entity.name.tag.localname.xml, entity.name.tag.namespace.xml#FF2C6BC2
punctuation.definition.tag.xml, meta.tag.preprocessor.xml, punctuation.separator.namespace.xml#C5C5C5F1
string.quoted.double.xml#728E9E
entity.other.attribute-name.xml, entity.other.attribute-name.localname.xml#33FAE9AD
text.xml#8BDBE9E3
entity.name.tag.yaml#E4E0BD
source.yaml#00FFFFCC
keyword.other.definition.ini#FFCC95E7
source.ini#00ABC1DE
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#FFCC95DE
support.type.property-name.css, support.constant.color.w3c-extended-color-name.css, support.constant.color.w3c-standard-color-name.css#A0B9C4C0
entity.name.tag.css#FF2C6BE0
constant.numeric.css#FFCC95C4
keyword.other.unit, keyword.control.at-rule.include.scss, meta.definition.variable.scss, keyword.control.at-rule.import.scss, keyword.control.return.scss, entity.name.tag.wildcard.css, entity.name.tag.wildcard.scss, keyword.control.at-rule.mixin.scss#FF2C6BC2
punctuation.section.property-list.begin.bracket.curly.scss, punctuation.section.property-list.end.bracket.curly.scss, punctuation.section.property-list.begin.bracket.curly.css, punctuation.section.property-list.end.bracket.curly.css, punctuation.separator.list.comma.css, punctuation.section.function.begin.bracket.round.css, punctuation.section.function.end.bracket.round.css, punctuation.definition.entity.begin.bracket.square.css, punctuation.definition.entity.end.bracket.square.css#B9B8B8
punctuation.terminator.rule.css, punctuation.separator.key-value.css#A7A2A2
punctuation.definition.constant.css#A0B9C4C0
constant.other.color.rgb-value.hex.css, entity.name.tag.reference.scss#DD8AA3
support.type.vendored.property-name.css#A7A2A2
keyword.control.at-rule.keyframes.css, entity.other.attribute-name.placeholder.css, keyword.control.at-rule.media.css, support.type.property-name.media.css, support.constant.media.css, support.constant.font-name.css, keyword.other.important.scss, keyword.control.at-rule.media.scss, keyword.control.operator.css.scss, entity.other.keyframe-offset.css, entity.other.attribute-name.css, keyword.control.at-rule.import.css, keyword.control.for.scss, keyword.control.if.scss, meta.at-rule.include.scss#DD8AA3
variable.parameter.keyframe-list.css, meta.property-value.css#7CC0D1
support.constant.property-value.css#7CC0D1
entity.other.attribute-name.pseudo-element.css, entity.other.attribute-name.pseudo-class.css#A0B9C4FA
entity.other.keyframe-offset.percentage.css, meta.property-list.scss#34EEEED7
variable.scss, support.function.url.css, entity.other.attribute-name.attribute.scss, punctuation.definition.attribute-selector.begin.bracket.square.scss, punctuation.definition.attribute-selector.end.bracket.square.scss#88F1FFC2
markup.heading.markdown, punctuation.definition.metadata.markdown, punctuation.definition.list.begin.markdown, meta.separator.markdown, punctuation.definition.quote.begin.markdown#FFCC95E7
meta.paragraph.markdown#93A8AC
beginning.punctuation.definition.list.markdown#64FFDBDA
entity.name.tag.template.html, keyword.control.export.js#FF2C6BF1
text.html.vue-html#BDBDBD
keyword.control.default.js, support.class.builtin.js, meta.function-call.js, keyword.control.as.js#64FFDBDA
support.type.object.module.js, string.regexp.js, support.variable.object.node.js#64FFDBDA
support.variable.object.process.js, variable.other.constant.property.js, variable.other.constant.js#A1D7DA
punctuation.definition.variable.php#FFCC95E7
variable.other.php, variable.other.global.php, variable.other.global.safer.php#26E0D7F3
constant.language.php, constant.other.php#FF2C6BF1
keyword.control.return.php#09CBDD
keyword.other.new.php, keyword.other.use.php, keyword.other.namespace.php, keyword.other.use-as.php, keyword.other.function.use.php, keyword.other.clone.php, keyword.control.yield.php, keyword.control.break.php, keyword.control.die.php#F48FB1
support.class.builtin.php, entity.name.function.php, entity.other.alias.php, support.constant.std.php, constant.other.class.php#64F5FFDA
support.class.php, support.other.namespace.php, variable.other.class.php, variable.other.property.php, support.constant.core.php, support.constant.ext.php, support.class.exception.php#A0E3E7
storage.modifier.php#09CBDD
keyword.control.case.php, keyword.control.switch.php, keyword.control.default.php, keyword.control.if.php, keyword.control.foreach.php, keyword.control.continue.php, keyword.other.class.php, keyword.control.elseif.php, keyword.control.else.php, keyword.control.while.php, keyword.control.for.php, keyword.control.do.php#A7DEEC
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php#A7DEEC
keyword.control.exception.php, keyword.control.exception.catch.php, keyword.control.import.include.php#EB9485
string.regexp.single-quoted.php#EB9485
keyword.other.phpdoc.php, keyword.other.type.php#53A5B9
token.info-token#6796E6
token.warn-token#CD9731
token.error-token#F44747
token.debug-token#B267E6

Shiki preview

TypeScript sample highlighted with this variant's colors and tokenColors.

Loading...