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#13111c
  • activityBar.foreground#eaa800
  • activityBarBadge.background#13111c
  • activityBarBadge.foreground#ffffff
  • button.background#eaa800
  • button.foreground#13111c
  • button.hoverBackground#19f9d7c7
  • debugToolBar.background#13111c
  • dropdown.background#13111c
  • dropdown.border#eaa800
  • dropdown.listBackground#13111c
  • editor.background#13111c
  • editor.foreground#ffffff
  • editor.lineHighlightBackground#303030
  • editor.selectionBackground#303030
  • editorBracketHighlight.foreground1#ffffff
  • editorBracketHighlight.foreground2#ffffff
  • editorBracketHighlight.foreground3#ffffff
  • editorBracketHighlight.foreground4#ffffff
  • editorBracketHighlight.foreground5#ffffff
  • editorBracketHighlight.foreground6#ffffff
  • editorBracketHighlight.unexpectedBracket.foreground#ffffff
  • editorCursor.foreground#ffffff
  • editorGroupHeader.tabsBackground#13111c
  • editorLineNumber.activeForeground#ffffff
  • editorWhitespace.foreground#303030
  • editorWidget.background#13111c
  • extensionButton.prominentBackground#eaa800
  • extensionButton.prominentForeground#13111c
  • extensionButton.prominentHoverBackground#eaa800
  • focusBorder#f7df1e
  • icon.foreground#eaa800
  • input.background#13111c
  • input.border#eaa800
  • inputOption.activeBorder#eaa800
  • inputValidation.errorBorder#eaa800
  • inputValidation.infoBackground#13111c
  • inputValidation.infoBorder#eaa800
  • list.activeSelectionBackground#eaa800
  • list.activeSelectionForeground#ffffff
  • list.focusBackground#f7df1e
  • list.focusForeground#ffffff
  • list.highlightForeground#ffffff
  • list.hoverBackground#f7df1e
  • list.hoverForeground#ffffff
  • list.inactiveFocusBackground#13111c
  • list.inactiveSelectionBackground#f7df1e
  • list.inactiveSelectionForeground#ffffff
  • panel.background#13111c
  • panelTitle.activeBorder#f7df1e
  • sideBar.background#13111c
  • sideBar.border#13111cd8
  • sideBar.foreground#ffffff
  • sideBarSectionHeader.foreground#ffffff
  • sideBarTitle.foreground#ffffff
  • statusBar.background#13111c
  • statusBar.debuggingBackground#13111c
  • statusBar.foreground#eaa800
  • statusBar.noFolderBackground#13111c
  • statusBarItem.activeBackground#13111c
  • statusBarItem.prominentBackground#13111c
  • statusBarItem.prominentHoverBackground#f7df1e
  • tab.activeBackground#13111c
  • tab.activeBorder#eaa800
  • tab.activeForeground#ffffff
  • tab.hoverBorder#ffffff
  • tab.inactiveBackground#13111c
  • tab.inactiveForeground#c0c0c0
  • textLink.activeForeground#ffffff
  • textLink.foreground#eaa800
  • titleBar.activeBackground#13111c
  • titleBar.activeForeground#eaa800
  • titleBar.inactiveBackground#13111c
  • titleBar.inactiveForeground#eaa800

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#8a8787italic
keyword.control.import, keyword.control.from, keyword.control.export, keyword.generator.asterisk#FF2C6D
keyword.control.loop, keyword.control.type, keyword.control.as#09cbdd
keyword.operator.new#00e5ffcc
keyword.control.flow#f48fb1
keyword.control.conditional#f48fb1
keyword.control.trycatch#f48fb1
keyword.control.default#64ffdbda
keyword.control.switch#09cbdd
storage.type.function#f48fb1
storage.type, support.class.error#FF2C6D
meta.block.tsx, source.tsx#c5c5c5f1
string.quoted.double, string.template string.quoted.single#00abc1da
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#FFCC95
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, entity.name.tag, entity.name.tag.style.html#ff2c6bf1
meta.jsx.children.js, meta.jsx.children.tsx#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, support.function, storage.modifier.async#a1d7da
constant.numeric.decimal#ff5622de
support.class.console, support.function.console, meta.object-literal.key#ffcc95e7
support.variable.dom, storage.modifier#079ba8
entity.name.function, variable.other.jsdoc#09cbdd
support.function.dom#ffcc95e3
punctuation.definition.block.tag.jsdoc#ffcc95e7
punctuation.definition.tag.begin, punctuation.definition.tag.end#c5c5c5f1
punctuation.definition.string.begin, punctuation.definition.string.end, punctuation.definition.string.template.begin, punctuation.definition.string.template.end#00acc1
punctuation.terminator.statement, punctuation.separator.comma, punctuation.definition.block, punctuation.definition.parameters.begin, punctuation.definition.parameters.end#c5c5c5f1
meta.brace.round#c5c5c5f1
support.type.property-name.json, punctuation.support.type.property-name.begin.json, punctuation.support.type.property-name.end.json#FFCC95
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#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, variable.other.key.toml, entity.name.section.toml, entity.name.function.target.makefile#e4e0bd
source.yaml#00ffffcc
string.unquoted.plain.out.yaml#00ABC1DA
variable.other.alias.yaml#00ABC1DAitalic underline
meta.flow-sequence.yaml, punctuation.definition.block.scalar.folded.yaml, punctuation.definition.block.scalar.literal.yaml, punctuation.definition.block.sequence.item.yaml, punctuation.separator.key-value.mapping.yaml, support.other.chomping-indicator.yaml#ee475e
string.unquoted.plain.in.yaml#00ffffcc
constant.other.timestamp, constant.other.date#a1d7da
keyword.other.definition.ini, meta.rule.indent_style.editorconfig, keyword.other.definition.root.editorconfig, meta.section.editorconfig#ffcc95e7
source.ini constant.language.tab.editorconfig, punctuation.separator.key-value.editorconfig#00abc1de
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css, variable.argument.css, meta.attribute-selector.scss#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
punctuation.definition.metadata.markdown, punctuation.definition.list.begin.markdown, punctuation.definition.quote.begin.markdown#ffcc95e7
meta.separator.markdown#ffcc95e7
punctuation.definition.constant.restructuredtext#ffcc95e7
markup.quote#ffcc95e7italic
fenced.raw.inner.restructuredtext, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown, punctuation.definition.markdown#93A8AC
meta.paragraph.markdown#93A8AC
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext#64ffdbda
markup.underlineunderline
markup.boldbold
markup.italicitalic
markup.heading#ffcc95e7bold
meta.link.reference.def.restructuredtext, punctuation.definition.directive.restructuredtext, string.other.link.description, string.other.link.title#ff2c6bf1
entity.name.tag.template.html#ff2c6bf1
text.html.vue-html#bdbdbd
support.class.builtin, meta.function-call#64ffdbda
support.type.object.module, string.regexp, support.variable.object.node#64ffdbda
support.variable.object.process, variable.other.constant.property, variable.other.constant#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, meta.function-call.php#64f5ffda
support.class.php, variable.other.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, storage.type.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
meta.preprocessor.haskell#8a8787
log.error#ff2c6be0
log.warning#ffcc95e7
source.shell variable.other#ff2c6be0