Skip to main content
Coding Theme

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#8FCF8F
  • activityBar.foreground#2E5D2E
  • activityBar.inactiveForeground#5A8A5A
  • button.background#F1C40F
  • button.hoverBackground#F39C12
  • editor.background#E8F5E8
  • editor.foreground#2E5D2E
  • editor.selectionBackground#B8E6B8
  • editorCursor.foreground#FF4757
  • editorLineNumber.foreground#7AC17A
  • editorWhitespace.foreground#B8E6B8
  • extensionButton.prominentBackground#F1C40F
  • extensionButton.prominentHoverBackground#F39C12
  • focusBorder#F1C40F
  • gitDecoration.modifiedResourceForeground#E67E22
  • gitDecoration.untrackedResourceForeground#E67E22
  • input.background#F8FDF8
  • input.border#F1C40F
  • input.foreground#2E5D2E
  • inputOption.activeBackground#FFF59D
  • inputOption.activeBorder#F1C40F
  • list.activeSelectionBackground#B8E6B8
  • list.activeSelectionForeground#2E5D2E
  • list.activeSelectionIconForeground#2E5D2E
  • list.focusBackground#B8E6B8
  • list.highlightForeground#FF4757
  • list.hoverBackground#D8F5D8
  • list.inactiveSelectionBackground#C8E6C8
  • list.inactiveSelectionForeground#2E5D2E
  • sideBar.background#A8D5A8
  • statusBar.background#000000
  • statusBar.foreground#FFFFFF
  • statusBar.noFolderBackground#E91E63
  • statusBarItem.remoteBackground#E91E63
  • statusBarItem.remoteForeground#FFFFFF
  • tab.activeBackground#E8F5E8
  • tab.activeModifiedBorder#E67E22
  • tab.inactiveBackground#A8D5A8
  • tab.inactiveModifiedBorder#E67E22
  • tab.unfocusedActiveBackground#E8F5E8
  • tab.unfocusedActiveModifiedBorder#E67E22
  • tab.unfocusedInactiveBackground#A8D5A8
  • tab.unfocusedInactiveModifiedBorder#E67E22
  • terminal.background#E91E63
  • terminal.foreground#1A1A1A
  • titleBar.activeBackground#C8E6C8
  • titleBar.activeForeground#2E5D2E

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#7AC17Aitalic
comment.block.preprocessor#5A8A5A
comment.documentation, comment.block.documentation#6BB76B
invalid.illegal#D32F2F
keyword.operator#F39C12
keyword, storage#FF4757
storage.type, support.type#4CAF50
constant.language, support.constant, variable.language#B8860B
variable, support.variable#2E7D32
entity.name.function, support.function#B8860Bbold
entity.name.type, entity.other.inherited-class, support.class#388E3Cbold
entity.name.exception#D32F2F
entity.name.sectionbold
constant.numeric, constant.character, constant#B8860B
string#1B5E20
constant.character.escape#F39C12
string.regexp#8B4513
constant.other.symbol#B8860B
punctuation#F39C12
meta.tag.sgml.doctype, meta.tag.sgml.doctype string, meta.tag.sgml.doctype entity.name.tag, meta.tag.sgml punctuation.definition.tag.html#5A8A5A
meta.tag, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html#8B4513
entity.name.tag#B8860B
meta.tag entity.other.attribute-name, entity.other.attribute-name.html#8B4513italic
constant.character.entity, punctuation.definition.entity#B8860B
meta.selector, meta.selector entity, meta.selector entity punctuation, entity.name.tag.css#388E3C
meta.property-name, support.type.property-name#B8860B
meta.property-value, meta.property-value constant.other, support.constant.property-value#2E7D32
keyword.other.importantbold
markup.changed#B8860B
markup.deleted#FF4757
markup.italicitalic
markup.error#D32F2F
markup.inserted#4CAF50
meta.link#8B4513
markup.output, markup.raw#F39C12
markup.prompt#F39C12
markup.heading#FF4757
markup.boldbold
markup.traceback#D32F2F
markup.underlineunderline
markup.quote#388E3C
markup.list#8B4513
markup.bold, markup.italic#2E7D32
markup.inline.raw#B8860B
meta.diff.range, meta.diff.index, meta.separator#6BB76B
meta.diff.header.from-file#6BB76B
meta.diff.header.to-file#6BB76B
aquamelon by Avital Tamir - VS Code Theme