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#002933
  • activityBar.foreground#14c5ab
  • activityBar.inactiveForeground#9e9e9e
  • activityBarBadge.background#404954
  • activityBarBadge.foreground#ffffff
  • button.background#14c5ab
  • button.foreground#002933
  • button.hoverBackground#19f9d7c7
  • contrastActiveBorder#14c5ab
  • contrastBorder#14c5ab
  • debugToolBar.background#002933
  • dropdown.background#002933
  • dropdown.listBackground#002933
  • editor.background#002933
  • editor.foreground#E6E6E6
  • editor.lineHighlightBackground#000000
  • editor.lineHighlightBorder#14c5ab
  • editor.selectionBackground#000000
  • editor.selectionForeground#ffffff00
  • editorCursor.foreground#ffffff
  • editorGroupHeader.tabsBackground#002933
  • editorLineNumber.activeForeground#d4d4d4dc
  • editorWhitespace.foreground#34383D
  • editorWidget.background#002933
  • extensionButton.prominentBackground#14c5ab
  • extensionButton.prominentForeground#404954
  • extensionButton.prominentHoverBackground#19f9d7c7
  • focusBorder#00b7ff
  • input.background#002933
  • inputValidation.infoBackground#002933
  • list.activeSelectionBackground#000000
  • list.activeSelectionForeground#d4d4d4
  • list.focusBackground#09698180
  • list.focusForeground#d4d4d4
  • list.highlightForeground#aeb1b0
  • list.hoverBackground#09698180
  • list.hoverForeground#d4d4d4
  • list.inactiveFocusBackground#002933
  • list.inactiveSelectionBackground#000000
  • list.inactiveSelectionForeground#aeb1b0
  • notification.background#002933
  • notification.buttonBackground#14c5ab
  • notification.buttonForeground#002933
  • notification.buttonHoverBackground#19f9d7d3
  • panel.background#002933
  • panel.dropBorder#14c5ab
  • panelTitle.activeBorder#14c5ab
  • scrollbarSlider.activeBackground#19eece9c
  • scrollbarSlider.background#14c5ab9c
  • scrollbarSlider.hoverBackground#19eece9c
  • settings.dropdownBorder#14c5ab
  • settings.modifiedItemIndicator#00b7ff
  • sideBar.background#002933
  • sideBar.foreground#aeb1b0
  • sideBarSectionHeader.foreground#aeb1b1
  • sideBarTitle.foreground#aeb1b1
  • statusBar.background#002933
  • statusBar.debuggingBackground#002933
  • statusBar.foreground#14c5ab
  • statusBar.noFolderBackground#002933
  • statusBarItem.activeBackground#002933
  • statusBarItem.prominentBackground#002933
  • statusBarItem.prominentHoverBackground#09698180
  • tab.activeBackground#002933
  • tab.activeBorder#14c5ab
  • tab.activeForeground#ffffff
  • tab.hoverBorder#bcbdbd
  • tab.inactiveBackground#002933
  • tab.inactiveForeground#9e9e9e
  • textLink.activeForeground#ffffff
  • textLink.foreground#00b7ff
  • titleBar.activeBackground#002933
  • titleBar.activeForeground#aeb1b0
  • titleBar.inactiveBackground#002933
  • titleBar.inactiveForeground#aeb1b0

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, string.quoted.docstring.multi.python, punctuation.definition.string.begin.python, punctuation.definition.string.end.python, string.quoted.docstring.raw.multi.python#9e9e9ebold italic
storage.type, keyword.control.import, keyword.control.from, support.class.error#ff0e56
string.quoted.double, string.template#00b7ff
punctuation.definition.string.begin, punctuation.definition.string.end, punctuation.definition.string.template.begin, punctuation.definition.string.template.end#00acc1
meta.brace.round, punctuation.terminator.statement#ffffff
punctuation.separator.comma, punctuation.definition.block, punctuation.definition.parameters.begin, punctuation.definition.parameters.end#ffffff
keyword.control.loop#09cbdd
keyword.control.flow, keyword.operator.new#00e5ffcc
punctuation.accessor, meta.brace.square, 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, entity.other.attribute-name#ffbe79
keyword.control.switch#079ba8
string.quoted.single#00b7ff
variable.language.this, constant.language.boolean.true, constant.language.boolean.false, constant.language.undefined, constant.language.null#ff6a9b
variable.other.object.property, variable.other.property, meta.template.expression, support.variable.property, variable.language.super, support.class.component.js, entity.name.tag, entity.name.tag.style.html#ff0e56
meta.jsx.children.js, meta.jsx.children.tsx#ffffffec
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, support.function, storage.modifier.async#8be1f7
constant.numeric.decimal#ff5622de
support.class.console, support.function.console, meta.object-literal.key#ffbe79
support.variable.dom, storage.modifier#079ba8
entity.name.function#09cbdd
storage.type.function#ff6a9b
support.type.property-name.json, punctuation.support.type.property-name.begin.json, punctuation.support.type.property-name.end.json#ffbe79
keyword.control.conditional, keyword.control.trycatch#09cbdd
support.function.dom#ffbe79e3
constant.language.json#00acc1
constant.language.json, constant.numeric.json#ff0e56
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#ff0e56
entity.other.attribute-name.html, entity.other.attribute-name.id.html#ffbe79ee
punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, punctuation.definition.tag.begin.js, punctuation.definition.tag.begin.tsx, punctuation.definition.tag.end.js, punctuation.definition.tag.end.tsx#ffffff
meta.tag.structure.any.html, meta.tag.inline.any.html#ffffff
text.html.basic#bdbdbd
meta.toc-list.id.html#64ffdbda
entity.name.tag.xml, entity.name.tag.localname.xml, entity.name.tag.namespace.xml#ff0e56
punctuation.definition.tag.xml, meta.tag.preprocessor.xml, punctuation.separator.namespace.xml#ffffff
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
string.unquoted.plain.out.yaml#00b7ffDA
meta.flow-sequence.yaml#ff0e56
string.unquoted.plain.in.yaml#00ffffcc
keyword.other.definition.ini, meta.rule.indent_style.editorconfig, keyword.other.definition.root.editorconfig, meta.section.editorconfig#ffbe79
source.ini constant.language.tab.editorconfig, punctuation.separator.key-value.editorconfig#00b7ff
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css, variable.argument.css#ffbe79
support.type.property-name.css, support.constant.color.w3c-extended-color-name.css, support.constant.color.w3c-standard-color-name.css#b9d8e6
entity.name.tag.css#ff2c6be0
constant.numeric.css#ffbe79
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#ff0e56
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#ffffff
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#8be1f7
support.constant.property-value.css#8be1f7
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#ffffff
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#00b7ff
markup.heading.markdown, punctuation.definition.metadata.markdown, punctuation.definition.list.begin.markdown, meta.separator.markdown, punctuation.definition.quote.begin.markdown#ffbe79
meta.paragraph.markdown#9e9e9e
beginning.punctuation.definition.list.markdown#64ffdbda
entity.name.tag.template.html, keyword.control.export#ff0e56
text.html.vue-html#ffffff
keyword.control.default, support.class.builtin, meta.function-call, keyword.control.as#64ffdbda
support.type.object.module, string.regexp.js, string.regexp.tsx, support.variable.object.node#64ffdbda
support.variable.object.process, variable.other.constant.property, variable.other.constant#a1d7da
punctuation.definition.variable.php#ffbe79
variable.other.php, variable.other.global.php, variable.other.global.safer.php#26e0d7f3
constant.language.php, constant.other.php#ff0e56
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#ff6a9b
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
source.python, storage.type.string.python#a7deec
meta.member.access.python, meta.function-call.arguments.python, meta.item-access.python#a7deec
variable.language.special.self.python#a7deec
meta.attribute.python#ee475e
meta.function-call.generic.python#09cbdd
constant.numeric.dec.python#ff5622de
string.quoted.single.python, punctuation.definition.string.end.python, punctuation.definition.string.begin.python#00abc1da
constant.language.python#f48fb1dc