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#00ff41
  • activityBar.background#000000
  • activityBar.foreground#ff00ff
  • activityBarBadge.background#ff00ff
  • activityBarBadge.foreground#000000
  • badge.background#ff00ff
  • badge.foreground#000000
  • button.background#ff00ff
  • button.foreground#000000
  • button.hoverBackground#ff44ff
  • button.secondaryBackground#000000
  • button.secondaryForeground#ff00ff
  • button.secondaryHoverBackground#1a001a
  • dropdown.background#0a0a0a
  • dropdown.border#ff00ff
  • dropdown.foreground#00ff41
  • dropdown.listBackground#000000
  • editor.background#000000
  • editor.findMatchBackground#330066
  • editor.findMatchBorder#ff00ff
  • editor.findMatchHighlightBackground#00220088
  • editor.findRangeHighlightBackground#33006688
  • editor.foreground#00ff41
  • editor.lineHighlightBackground#001a0d
  • editor.lineHighlightBorder#ff00ff
  • editor.selectionBackground#003300
  • editor.selectionForeground#00ff41
  • editor.selectionHighlightBackground#00220088
  • editor.selectionHighlightBorder#ff00ff
  • editor.wordHighlightBackground#33006688
  • editor.wordHighlightStrongBackground#00330088
  • editorBracketMatch.background#330066
  • editorBracketMatch.border#ff00ff
  • editorError.border#ff0000
  • editorError.foreground#ff0000
  • editorGroup.border#ff00ff
  • editorHint.border#00ff41
  • editorHint.foreground#00ff41
  • editorHoverWidget.background#000000
  • editorHoverWidget.border#00ff41
  • editorHoverWidget.foreground#00ff41
  • editorInfo.border#00ffff
  • editorInfo.foreground#00ffff
  • editorLineNumber.activeForeground#00ffff
  • editorLineNumber.foreground#ff00ff
  • editorOverviewRuler.addedForeground#00ff41
  • editorOverviewRuler.border#00ff41
  • editorOverviewRuler.deletedForeground#ff0000
  • editorOverviewRuler.errorForeground#ff0000
  • editorOverviewRuler.findMatchForeground#00ff41aa
  • editorOverviewRuler.infoForeground#00ffff
  • editorOverviewRuler.modifiedForeground#ffff00
  • editorOverviewRuler.rangeHighlightForeground#00ff41aa
  • editorOverviewRuler.selectionHighlightForeground#00ff41aa
  • editorOverviewRuler.warningForeground#ffff00
  • editorOverviewRuler.wordHighlightForeground#00ff41aa
  • editorOverviewRuler.wordHighlightStrongForeground#00ff41aa
  • editorSuggestWidget.background#000000
  • editorSuggestWidget.border#00ff41
  • editorSuggestWidget.foreground#00ff41
  • editorSuggestWidget.highlightForeground#00ff41
  • editorSuggestWidget.selectedBackground#003300
  • editorSuggestWidget.selectedForeground#00ff41
  • editorWarning.border#ffff00
  • editorWarning.foreground#ffff00
  • editorWidget.background#000000
  • editorWidget.border#00ff41
  • editorWidget.foreground#00ff41
  • editorWidget.resizeBorder#00ff41
  • foreground#00ff41
  • gitDecoration.addedResourceForeground#00ff41
  • gitDecoration.conflictingResourceForeground#ff00ff
  • gitDecoration.deletedResourceForeground#ff0066
  • gitDecoration.ignoredResourceForeground#666666
  • gitDecoration.modifiedResourceForeground#ffff00
  • gitDecoration.stageDeletedResourceForeground#ff0066
  • gitDecoration.stageModifiedResourceForeground#ffff66
  • gitDecoration.untrackedResourceForeground#00ffff
  • icon.foreground#ff00ff
  • input.background#000000
  • input.border#ff00ff
  • input.foreground#00ff41
  • input.placeholderForeground#ff00ff
  • inputOption.activeBackground#ff00ff
  • inputOption.activeBorder#00ff41
  • inputOption.activeForeground#000000
  • inputValidation.errorBackground#ff0066
  • inputValidation.errorBorder#ff0066
  • inputValidation.warningBackground#ffff00
  • inputValidation.warningBorder#ffff00
  • list.activeSelectionBackground#330066
  • list.activeSelectionForeground#00ff41
  • list.filterMatchBackground#330066
  • list.filterMatchBorder#ff00ff
  • list.focusBackground#330066
  • list.focusForeground#00ff41
  • list.highlightForeground#00ff41
  • list.hoverBackground#001a33
  • list.hoverForeground#00ffff
  • list.inactiveSelectionBackground#1a001a
  • list.inactiveSelectionForeground#ff00ff
  • merge.border#00ff41
  • merge.currentContentBackground#00110088
  • merge.currentHeaderBackground#00330088
  • merge.incomingContentBackground#00001188
  • merge.incomingHeaderBackground#00003388
  • notificationCenter.border#00ff41
  • notificationCenterHeader.background#000000
  • notificationCenterHeader.foreground#00ff41
  • notificationLink.foreground#00ffff
  • notifications.background#000000
  • notifications.border#00ff41
  • notifications.foreground#00ff41
  • notificationsErrorIcon.foreground#ff0000
  • notificationsInfoIcon.foreground#00ffff
  • notificationsWarningIcon.foreground#ffff00
  • panel.background#0a0a0a
  • panel.border#ff00ff
  • panelTitle.activeForeground#00ff41
  • panelTitle.inactiveForeground#ff00ff
  • problemsErrorIcon.foreground#ff0000
  • problemsInfoIcon.foreground#00ffff
  • problemsWarningIcon.foreground#ffff00
  • progressBar.background#00ff41
  • scrollbarSlider.activeBackground#ff00ff
  • scrollbarSlider.background#ff00ffaa
  • scrollbarSlider.hoverBackground#ff00ff
  • sideBar.background#0a0a0a
  • sideBar.foreground#00ff41
  • sideBarSectionHeader.background#1a001a
  • sideBarSectionHeader.foreground#ff00ff
  • sideBarTitle.foreground#ff00ff
  • statusBar.background#1a001a
  • statusBar.border#ff00ff
  • statusBar.foreground#00ff41
  • tab.activeBackground#000000
  • tab.activeBorder#ff00ff
  • tab.activeBorderTop#00ff41
  • tab.activeForeground#00ff41
  • tab.border#ff00ff
  • tab.inactiveBackground#0a0a0a
  • tab.inactiveForeground#ff00ff
  • terminal.ansiBlack#000000
  • terminal.ansiBlue#0066ff
  • terminal.ansiBrightBlack#333333
  • terminal.ansiBrightBlue#3399ff
  • terminal.ansiBrightCyan#33ffff
  • terminal.ansiBrightGreen#33ff66
  • terminal.ansiBrightMagenta#ff33ff
  • terminal.ansiBrightRed#ff3399
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#ffff66
  • terminal.ansiCyan#00ffff
  • terminal.ansiGreen#00ff41
  • terminal.ansiMagenta#ff00ff
  • terminal.ansiRed#ff0066
  • terminal.ansiWhite#ffffff
  • terminal.ansiYellow#ffff00
  • terminal.background#000000
  • terminal.border#ff00ff
  • terminal.foreground#00ff41
  • terminalCursor.background#000000
  • terminalCursor.foreground#ff00ff
  • titleBar.activeBackground#000000
  • titleBar.activeForeground#ff00ff
  • titleBar.inactiveBackground#0a0a0a
  • titleBar.inactiveForeground#00ff41
  • widget.shadow#000000ff

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
—#00ff41—
comment, punctuation.definition.comment#808080italic
string, string.quoted.single, string.quoted.double, string.quoted.triple#00ffffbold
string.quoted.docstring, string.quoted.multi, comment.block.documentation#00ccccitalic
constant.numeric, constant.numeric.integer, constant.numeric.float, constant.numeric.hex, constant.numeric.binary, constant.numeric.octal#ff9933bold
constant.language.boolean, constant.language.true, constant.language.false#ff9933bold
constant.language.null, constant.language.undefined, constant.language.none, constant.language.nan, variable.language.this, variable.language.super#ff9933bold italic
variable.language.self, support.variable.self, variable.parameter.function.language.special.self.python, variable.parameter.function.language.special.cls.python#00cc99italic bold
keyword, keyword.control, storage.type, storage.modifier#ff33ccbold
keyword.control.import, keyword.control.export, keyword.control.from, keyword.control.as, keyword.import, keyword.package#ff33ccbold
keyword.control.flow, keyword.control.loop, keyword.control.trycatch, keyword.control.conditional#ff33ccbold
keyword.control.return, keyword.control.yield#ff33ccbold
entity.name.function, support.function, meta.function-call.generic#00aaffbold
storage.type.function, entity.name.function.definition#ff33ccbold
variable.parameter, meta.function-parameter#00ff41italic
variable, variable.other.readwrite, variable.other.object, variable.name, meta.definition.variable#00ff41—
support.variable.builtin, variable.language, support.constant#ffcc00italic
entity.name.class, entity.name.type.class, support.class#ffcc00bold
meta.method, meta.method.declaration#00aaffbold
entity.name.type, support.type, storage.type.primitive, storage.type.built-in#ffcc00bold
meta.type.annotation, meta.return.type#ffcc00italic
variable.other.constant, support.constant#ff9933bold
keyword.operator, keyword.operator.arithmetic, keyword.operator.assignment, keyword.operator.comparison, keyword.operator.logical, keyword.operator.ternary, keyword.operator.new#ff66ffbold
variable.other.property, meta.object-literal.key, variable.other.object.property, support.variable.property#33ccccbold
punctuation.definition.parameters, punctuation.definition.block, punctuation.definition.arguments, punctuation.definition.array, punctuation.section, meta.brace#ff66ff—
punctuation, punctuation.separator, punctuation.terminator#ff66ff—
entity.name.tag, support.class.component, punctuation.definition.tag#ff33ccbold
entity.other.attribute-name#33ccccbold
invalid, invalid.illegal, invalid.deprecated#ff0000bold
markup.heading, markup.heading.markdown, markup.heading.setext#ff33ccbold
markup.bold, markup.bold.markdown#00ff41bold
markup.italic, markup.italic.markdown#00ffffitalic
markup.underline.link, markup.underline.link.markdown, string.other.link#00ffffunderline
markup.list, markup.list.numbered, markup.list.unnumbered, punctuation.definition.list#ff33ccbold
markup.quote, punctuation.definition.quote#00ccccitalic
markup.fenced_code, markup.inline.raw, markup.raw#00ff41—
entity.name.type.interface.ts, entity.name.type.interface.tsx#ffcc00bold
entity.name.type.ts, entity.name.type.tsx, support.type.primitive.ts, support.type.primitive.tsx, entity.name.type.alias.ts, entity.name.type.alias.tsx#ffcc00bold
meta.type.parameters, meta.type.annotation#ffcc00—
meta.decorator, meta.decorator.ts, meta.decorator.tsx#ffcc00bold italic
support.class.component.jsx, support.class.component.tsx, entity.name.tag.jsx, entity.name.tag.tsx#ff33ccbold
meta.function.decorator.python, entity.name.function.decorator.python#ffcc00bold italic
support.function.magic.python#00aaffbold italic
support.function.builtin.python, support.type.python, support.class.python#00aaffbold
meta.fstring.python, constant.character.format.placeholder.other.python#00ffff—
support.type.property-name.css, meta.property-name.css#33ccccbold
support.constant.property-value.css, constant.numeric.css, meta.property-value.css#ff9933bold
keyword.other.unit.css, keyword.other.unit.scss, keyword.other.unit.less#ff9933bold
constant.other.color.rgb-value.css, support.constant.color.w3c-standard-color-name.css#ff9933bold
entity.name.tag.css, entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#ff33ccbold
entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-element.css#00ffffitalic
support.type.property-name.json, meta.structure.dictionary.key.json#33ccccbold
meta.structure.dictionary.value.json#00ffff—
string.template, punctuation.definition.template-expression, punctuation.section.embedded#00ffffbold
meta.embedded, source.groovy.embedded, meta.template.expression#00ff41—
entity.name.tag.html, punctuation.definition.tag.html#ff33ccbold
entity.other.attribute-name.html#33ccccbold
string.regexp, string.regexp keyword.other, string.regexp constant.character#ff9933bold
punctuation.definition.group.regexp, meta.group.regexp#ffcc00—
constant.other.character-class.regexp, constant.character.escape.regexp#ff66ff—
keyword.operator.quantifier.regexp#ff9933bold
constant.character.escape, constant.character.escape.backslash#00ffffbold