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#F2F2F2
  • activityBar.border#E0E0E0
  • activityBar.foreground#161616
  • activityBar.inactiveForeground#555555
  • activityBarBadge.background#4CAF50
  • activityBarBadge.foreground#FAFAFA
  • button.background#4CAF50
  • button.foreground#FAFAFA
  • button.hoverBackground#66BB6A
  • dropdown.background#FAFAFA
  • dropdown.border#C0C0C0
  • dropdown.foreground#161616
  • editor.background#FAFAFA
  • editor.findMatchBackground#4CAF5040
  • editor.findMatchHighlightBackground#4CAF5020
  • editor.foreground#161616
  • editor.lineHighlightBackground#F0F0F0
  • editor.selectionBackground#CDE87A33
  • editor.selectionHighlightBackground#CDE87A20
  • editor.wordHighlightBackground#00796B30
  • editor.wordHighlightStrongBackground#4CAF5030
  • editorBracketMatch.background#4CAF5030
  • editorBracketMatch.border#4CAF50
  • editorCursor.foreground#4CAF50
  • editorIndentGuide.activeBackground#4CAF50
  • editorIndentGuide.background#E8E8E8
  • editorWhitespace.foreground#E8E8E8
  • errorForeground#D32F2F
  • gitDecoration.conflictingResourceForeground#FFB020
  • gitDecoration.deletedResourceForeground#FF4D4F
  • gitDecoration.modifiedResourceForeground#CDE87A
  • gitDecoration.untrackedResourceForeground#81C784
  • infoForeground#1976D2
  • input.background#FAFAFA
  • input.border#C0C0C0
  • input.foreground#161616
  • input.placeholderForeground#555555
  • inputOption.activeBorder#4CAF50
  • list.activeSelectionBackground#4CAF5030
  • list.activeSelectionForeground#161616
  • list.focusBackground#4CAF5030
  • list.hoverBackground#F0F0F0
  • list.inactiveSelectionBackground#4CAF5020
  • notificationCenter.border#E0E0E0
  • notifications.background#F2F2F2
  • notifications.border#C0C0C0
  • notifications.foreground#161616
  • panel.background#F2F2F2
  • panel.border#E0E0E0
  • panelTitle.activeBorder#4CAF50
  • panelTitle.activeForeground#161616
  • panelTitle.inactiveForeground#555555
  • sideBar.background#F2F2F2
  • sideBar.border#E0E0E0
  • sideBar.foreground#161616
  • sideBarSectionHeader.background#E8E8E8
  • sideBarSectionHeader.foreground#161616
  • sideBarTitle.foreground#161616
  • statusBar.background#F2F2F2
  • statusBar.border#E0E0E0
  • statusBar.debuggingBackground#4CAF50
  • statusBar.debuggingForeground#FAFAFA
  • statusBar.foreground#161616
  • statusBarItem.hoverBackground#4CAF5020
  • tab.activeBackground#FAFAFA
  • tab.activeBorder#4CAF50
  • tab.activeForeground#161616
  • tab.border#E0E0E0
  • tab.inactiveBackground#F2F2F2
  • tab.inactiveForeground#555555
  • terminal.ansiBrightGreen#81C784
  • terminal.ansiGreen#4CAF50
  • terminal.background#FAFAFA
  • terminal.foreground#161616
  • warningForeground#F57C00

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#757575italic
variable, string constant.other.placeholder#161616
constant.other.color#689F38
invalid, invalid.illegal#D32F2F
keyword, storage.type, storage.modifier#388E3Cbold
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#161616
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter#1B5E20bold
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method#00796Bbold
keyword.control.import, keyword.control.from, keyword.other.import, entity.name.namespace, variable.other.readwrite.alias, meta.import#8BC34Abold
meta.block variable.other#161616
support.other.variable, string.other.link#161616
constant.numeric, constant.language, support.constant, constant.character, constant.escape, variable.parameter, keyword.other.unit, keyword.other#689F38
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#689F38
entity.name, support.type, support.class, support.orther.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter, support.type.sys-types#2E7D32bold
support.type#616161
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#00796B
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#FF4D4F
variable.language#FF4D4Fitalic
entity.name.method.js#00796Bitalic
meta.class-method.js entity.name.function.js, variable.function.constructor#00796B
entity.other.attribute-name#00796B
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name#689F38italic
entity.other.attribute-name.class#689F38
source.sass keyword.control#161616
markup.inserted#00796B
markup.deleted#FF4D4F
markup.changed#689F38
string.regexp#2EBFDC
constant.character.escape#2EBFDC
*url*, *link*, *uri*underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#1A1A1Aitalic
source.js constant.other.object.key.js string.unquoted.label.js#FF4D4Fitalic
source.json meta.structure.dictionary.json support.type.property-name.json#00796B
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#689F38
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#161616
text.html.markdown, punctuation.definition.list_item.markdown#161616
text.html.markdown markup.inline.raw.markdown#689F38
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown#757575
markdown.heading, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown#388E3Cbold
markup.italic#689F38italic
markup.bold, markup.bold string#689F38bold
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#689F38bold
markup.underline#161616underline
markup.quote punctuation.definition.blockquote.markdown#757575
markup.quoteitalic
string.other.link.title.markdown#161616
string.other.link.description.title.markdown#388E3C
constant.other.reference.link.markdown#689F38
markup.raw.block#388E3C
markup.raw.block.fenced.markdown#161616
punctuation.definition.fenced.markdown#161616
markup.raw.block.fenced.markdown, variable.language.fenced.markdown, punctuation.section.class.end#161616
variable.language.fenced.markdown#757575
meta.separator#757575bold
markup.table#161616