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#0892d0
  • activityBar.background#292421
  • activityBar.border#36393f
  • activityBar.foreground#00C78C
  • activityBar.inactiveForeground#696f5e
  • activityBarBadge.background#8470FF
  • badge.background#0892d0
  • button.background#2B3C5D
  • debugIcon.pauseForeground#007fff
  • debugIcon.restartForeground#24bfa5
  • debugIcon.stepIntoForeground#ffd700
  • debugIcon.stepOutForeground#ffff00
  • debugIcon.stopForeground#FF6103
  • debugToolBar.background#020202
  • dropdown.background#36393f
  • editor.background#292421
  • editor.findMatchHighlightBackground#020202
  • editor.findMatchHighlightBorder#36393f
  • editor.foreground#e5e4e2
  • editor.selectionBackground#36393f
  • editorCursor.foreground#24bfa5
  • editorGroup.border#8470FF
  • editorGroupHeader.tabsBorder#596F99
  • editorHoverWidget.background#36393f
  • editorHoverWidget.border#3D59AB
  • editorWhitespace.foreground#36393f
  • editorWidget.background#000
  • editorWidget.border#00b294
  • extensionButton.prominentBackground#00C957
  • extensionButton.prominentHoverBackground#00FF7F
  • focusBorder#596F99
  • input.background#36393f
  • inputOption.activeBorder#1D4A87
  • inputValidation.errorBackground#A22D44
  • inputValidation.errorBorder#AB395B
  • inputValidation.infoBackground#051336
  • inputValidation.infoBorder#384078
  • inputValidation.warningBackground#5B7E7A
  • inputValidation.warningBorder#5B7E7A
  • list.activeSelectionBackground#483D8B
  • list.dropBackground#041D52
  • list.focusBackground#483D8B
  • list.highlightForeground#0063a5
  • list.hoverBackground#36393f
  • list.inactiveSelectionBackground#36393f
  • list.warningForeground#ff9c1b
  • menu.background#292421
  • menu.border#000
  • menu.foreground#c0c0c0
  • menu.separatorBackground#EEE9E9
  • menubar.selectionBackground#292421
  • panel.border#008080
  • panelTitle.activeBorder#8470FF
  • panelTitle.activeForeground#00C78C
  • panelTitle.inactiveForeground#8470FF
  • pickerGroup.border#3D59AB
  • pickerGroup.foreground#596F99
  • progressBar.background#8470FF
  • scrollbar.shadow#36393f
  • scrollbarSlider.activeBackground#3B3F5188
  • scrollbarSlider.background#696f5e
  • scrollbarSlider.hoverBackground#3B3F5188
  • settings.headerForeground#8470FF
  • settings.modifiedItemIndicator#00C957
  • sideBar.background#292421
  • sideBarSectionHeader.background#3D59AB
  • sideBarTitle.foreground#00C78C
  • statusBar.background#00C957
  • statusBar.debuggingBackground#483D8B
  • statusBar.noFolderBackground#3D59AB
  • statusBarItem.activeBackground#292421
  • statusBarItem.hoverBackground#292421
  • statusBarItem.prominentBackground#292421
  • tab.activeBorderTop#24bfa5
  • tab.border#000
  • tab.hoverBackground#292421
  • tab.hoverBorder#8470FF
  • tab.inactiveBackground#36393f
  • titleBar.activeBackground#36393f
  • widget.shadow#000

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#696f5eitalic
variable, string constant.other.placeholder#8470FFitalic
constant.other.color#ffffff—
invalid, invalid.illegal#FF5370—
keyword, storage.type, storage.modifier#faa61a—
keyword.other.important.css#007fff—
variable.parameter.url.css#4d4dff—
storage.type#FF8C00italic
support.class.dart, source.dart, support.class#FF9912italic
keyword.operator.comparison.dart, source.dart, keyword#007fff—
punctuation.comma.dart, source.dart, punctuation#8470FFitalic
punctuation.comma.dart#ffff00italic
constant.numeric.dart, source.dart#c0c0c0italic
constant.numeric.dart#8470FFitalic
meta.member.access.python, meta.function-call.arguments.python, meta.function-call.python, source.python, meta.function-call#FF9912italic
meta.function-call.generic.python#00C78Citalic
keyword.control, constant.other.color, punctuation, meta.tag, punctuation.definition.tag, punctuation.separator.inheritance.php, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, punctuation.section.embedded, keyword.other.template, keyword.other.substitution#ff4500italic
constant.other.color#0892d0italic
punctuation.definition.tag, punctuation, punctuation.separator.inheritance.php, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html#e5e4e2italic
punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html#0892d0italic
punctuation#ffd700—
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter#FF9912—
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method#D8BFD8—
support.function#8470FF—
entity.name.function#007fffitalic
meta.block variable.other#FF6347—
support.other.variable, string.other.link#f07178—
constant.numeric, constant.language, support.constant, constant.character, constant.escape, variable.parameter, keyword.other.unit, keyword.other#c0c0c0—
constant.language#00C957italic
variable.parameter#ffd700—
support.constant.property-value.css, meta.property-value.css, meta.property-list.css, source.css, support.constant#696f5e—
source.css#daa520—
text.html.derivative#c0c0c0italic
string, constant.other.symbol, constant.other.key, entity.other.inherited-class, markup.heading, markup.inserted.git_gutter, meta.group.braces.curly constant.other.object.key.js string.unquoted.label.js#00C78Citalic
entity.name, support.type, support.class, support.other.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter, support.type.sys-types#FFCB6B—
support.type#FF7D40—
source.css support.type.property-name, source.sass support.type.property-name, source.scss support.type.property-name, source.less support.type.property-name, source.stylus support.type.property-name, source.postcss support.type.property-name#8470FF—
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#008080—
variable.language#33DBFFitalic
entity.name.method.js#82AAFFitalic
meta.class-method.js entity.name.function.js, variable.function.constructor#82AAFF—
entity.other.attribute-name#8470FF—
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name#FFCB6Bitalic
entity.other.attribute-name.class#FF9912—
source.sass keyword.control#82AAFF—
markup.inserted#C3E88D—
markup.deleted#FF5370—
markup.changed#C792EA—
string.regexp#89DDFF—
constant.character.escape#89DDFF—
*url*, *link*, *uri*—underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#82AAFFitalic
source.js constant.other.object.key.js string.unquoted.label.js#FF5370italic
source.json meta.structure.dictionary.json support.type.property-name.json#0892d0—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#FF8C00—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#ff8040—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#f88379—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#C17E70—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#82AAFF—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#f07178—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#C792EA—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#C3E88D—
text.html.markdown, punctuation.definition.list_item.markdown#c0c0c0—
text.html.markdown markup.inline.raw.markdown#C792EA—
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown#65737E—
punctuation.definition.quote.begin.markdown#0892d0—
markdown.heading, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown#4169e1—
markup.heading.markdown punctuation.definition.heading.markdown#ffa500—
markup.italic#f07178italic
markup.bold, markup.bold string#f07178bold
markup.bold markup.italic, markup.italic markup.bold, markup.quote markup.bold, markup.bold markup.italic string, markup.italic markup.bold string, markup.quote markup.bold string#f07178bold
markup.underline#4169e1underline
markup.quote punctuation.definition.blockquote.markdown#65737E—
markup.quote—italic
string.other.link.title.markdown#82AAFF—
string.other.link.description.title.markdown#C792EA—
constant.other.reference.link.markdown, entity.name#4169e1—
markup.raw.block#C792EA—
markup.raw.block.fenced.markdown#00000050—
punctuation.definition.fenced.markdown#00000050—
markup.raw.block.fenced.markdown, variable.language.fenced.markdown, punctuation.section.class.end#EEFFFF—
variable.language.fenced.markdown#65737E—
meta.separator#65737Ebold
markup.table#EEFFFF—