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#1A1A1A
  • activityBar.border#242424
  • activityBar.foreground#F5F5F5
  • activityBar.inactiveForeground#9E9E9E
  • activityBarBadge.background#4CAF50
  • activityBarBadge.foreground#161616
  • button.background#4CAF50
  • button.foreground#161616
  • button.hoverBackground#81C784
  • dropdown.background#242424
  • dropdown.border#404040
  • dropdown.foreground#F5F5F5
  • editor.background#161616
  • editor.findMatchBackground#4CAF5040
  • editor.findMatchHighlightBackground#4CAF5020
  • editor.foreground#F5F5F5
  • editor.lineHighlightBackground#1C1C1C
  • editor.selectionBackground#4CAF5033
  • editor.selectionHighlightBackground#4CAF5020
  • editor.wordHighlightBackground#26A69A30
  • editor.wordHighlightStrongBackground#4CAF5030
  • editorBracketMatch.background#4CAF5040
  • editorBracketMatch.border#4CAF50
  • editorCursor.foreground#81C784
  • editorIndentGuide.activeBackground#4CAF50
  • editorIndentGuide.background#242424
  • editorWhitespace.foreground#242424
  • errorForeground#FF5252
  • gitDecoration.conflictingResourceForeground#FFB020
  • gitDecoration.deletedResourceForeground#FF4D4F
  • gitDecoration.modifiedResourceForeground#CDE87A
  • gitDecoration.untrackedResourceForeground#81C784
  • infoForeground#2196F3
  • input.background#242424
  • input.border#404040
  • input.foreground#F5F5F5
  • input.placeholderForeground#9E9E9E
  • inputOption.activeBorder#4CAF50
  • list.activeSelectionBackground#4CAF5040
  • list.activeSelectionForeground#F5F5F5
  • list.focusBackground#4CAF5040
  • list.hoverBackground#242424
  • list.inactiveSelectionBackground#4CAF5020
  • notificationCenter.border#242424
  • notifications.background#242424
  • notifications.border#404040
  • notifications.foreground#F5F5F5
  • panel.background#1A1A1A
  • panel.border#242424
  • panelTitle.activeBorder#4CAF50
  • panelTitle.activeForeground#F5F5F5
  • panelTitle.inactiveForeground#9E9E9E
  • sideBar.background#1A1A1A
  • sideBar.border#242424
  • sideBar.foreground#F5F5F5
  • sideBarSectionHeader.background#242424
  • sideBarSectionHeader.foreground#F5F5F5
  • sideBarTitle.foreground#F5F5F5
  • statusBar.background#1A1A1A
  • statusBar.border#242424
  • statusBar.debuggingBackground#4CAF50
  • statusBar.debuggingForeground#161616
  • statusBar.foreground#F5F5F5
  • statusBarItem.hoverBackground#4CAF5040
  • tab.activeBackground#1A1A1A
  • tab.activeBorder#4CAF50
  • tab.activeForeground#F5F5F5
  • tab.border#242424
  • tab.inactiveBackground#161616
  • tab.inactiveForeground#9E9E9E
  • terminal.ansiBrightGreen#81C784
  • terminal.ansiGreen#4CAF50
  • terminal.background#161616
  • terminal.foreground#F5F5F5
  • warningForeground#FFB74D

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#A8A8A8italic
variable, string constant.other.placeholder#F5F5F5
constant.other.color#CDE87A
invalid, invalid.illegal#FF5252
keyword, storage.type, storage.modifier#4CAF50bold
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#F5F5F5
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter#2E7D32bold
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method#26A69A
keyword.control.import, keyword.control.from, keyword.other.import, entity.name.namespace, variable.other.readwrite.alias, meta.import#AEEA00bold
meta.block variable.other#F5F5F5
support.other.variable, string.other.link#F5F5F5
constant.numeric, constant.language, support.constant, constant.character, constant.escape, variable.parameter, keyword.other.unit, keyword.other#CDE87A
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#CDE87A
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#81C784
support.type#BDBDBD
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#26A69A
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#FF4D4F
variable.language#FF4D4Fitalic
entity.name.method.js#26A69Aitalic
meta.class-method.js entity.name.function.js, variable.function.constructor#26A69A
entity.other.attribute-name#26A69A
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name#CDE87Aitalic
entity.other.attribute-name.class#CDE87A
source.sass keyword.control#4CAF50
markup.inserted#26A69A
markup.deleted#FF4D4F
markup.changed#CDE87A
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#4CAF50italic
source.js constant.other.object.key.js string.unquoted.label.js#FF4D4Fitalic
source.json meta.structure.dictionary.json support.type.property-name.json#26A69A
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#CDE87A
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#4CAF50
text.html.markdown, punctuation.definition.list_item.markdown#F5F5F5
text.html.markdown markup.inline.raw.markdown#CDE87A
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown#B0B0B0
markdown.heading, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown#26A69Abold
markup.italic#CDE87Aitalic
markup.bold, markup.bold string#CDE87Abold
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#CDE87Abold
markup.underline#4CAF50underline
markup.quote punctuation.definition.blockquote.markdown#B0B0B0
markup.quoteitalic
string.other.link.title.markdown#4CAF50
string.other.link.description.title.markdown#26A69A
constant.other.reference.link.markdown#CDE87A
markup.raw.block#26A69A
markup.raw.block.fenced.markdown#F5F5F5
punctuation.definition.fenced.markdown#F5F5F5
markup.raw.block.fenced.markdown, variable.language.fenced.markdown, punctuation.section.class.end#F5F5F5
variable.language.fenced.markdown#B0B0B0
meta.separator#B0B0B0bold
markup.table#F5F5F5
Systemset Theme by Systemset Co - VS Code Theme