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#476e82
  • activityBar.foreground#d3d096
  • activityBar.inactiveForeground#cfcfcf
  • editor.background#f5f5f5
  • editor.foreground#333333
  • editorGroupHeader.tabsBackground#e6e6e6
  • editorSuggestWidget.background#f5f3f3
  • editorSuggestWidget.border#222222
  • editorSuggestWidget.focusHighlightForeground#2e4cc6
  • editorSuggestWidget.foreground#000000
  • editorSuggestWidget.highlightForeground#3a5bdf
  • editorSuggestWidget.selectedBackground#d7e6f6
  • editorSuggestWidget.selectedForeground#312525
  • editorSuggestWidget.selectedIconForeground#194fd7
  • gitDecoration.addedResourceForeground#7b5c13
  • gitDecoration.conflictingResourceForeground#F44336
  • gitDecoration.deletedResourceForeground#E91E63
  • gitDecoration.ignoredResourceForeground#808080
  • gitDecoration.modifiedResourceForeground#2f6f57
  • gitDecoration.stageDeletedResourceForeground#D32F2F
  • gitDecoration.stageModifiedResourceForeground#207c2a
  • gitDecoration.untrackedResourceForeground#316d47
  • list.activeSelectionBackground#b6d8e9
  • list.activeSelectionForeground#1f2550
  • list.activeSelectionIconForeground#fff
  • list.focusAndSelectionOutline#9dbece80
  • list.hoverBackground#c2dceb
  • list.hoverForeground#161844
  • list.inactiveFocusOutline#9dbece80
  • list.inactiveSelectionBackground#c3d1d7
  • list.inactiveSelectionForeground#000000
  • sideBar.background#e6e8ea
  • sideBar.foreground#000000
  • statusBar.background#a44848
  • tab.activeBackground#f8f1f1
  • tab.activeForeground#000000
  • tab.border#c5cbce
  • tab.hoverBackground#c5c7c9
  • tab.hoverForeground#000000
  • tab.inactiveBackground#e0e0e7
  • tab.inactiveForeground#902f2f

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#7b8283
comment.block.preprocessor#AAAAAA
comment.documentation, comment.block.documentation#448C27
invalid.illegal#660000
keyword.operator#777777
keyword, storage#0c00ecb0bold
storage.type, support.type#7A3E9D
constant.language, support.constant, variable.language#AB6526
variable, support.variable#29274f
entity.name.function, support.function#AA3731bold
entity.name.type, entity.other.inherited-class, support.class#7A3E9Dbold
entity.name.exception#660000
entity.name.sectionbold
constant.numeric#213bd1
constant.character, constant#f20000bold
string#0f7d00
constant.character.escape#777777
string.regexp#4B83CD
constant.other.symbol#AB6526
punctuation#3b46d5
meta.tag.sgml.doctype, meta.tag.sgml.doctype string, meta.tag.sgml.doctype entity.name.tag, meta.tag.sgml punctuation.definition.tag.html#AAAAAA
meta.tag, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html#50316d
entity.name.tag#114c99bold
meta.tag entity.other.attribute-name, entity.other.attribute-name.html#5b5a7a
constant.character.entity, punctuation.definition.entity#AB6526
meta.selector, meta.selector entity, meta.selector entity punctuation, entity.name.tag.css#206f7bbold
meta.property-name, support.type.property-name#ca7a35
meta.property-value, meta.property-value constant.other, support.constant.property-value#ca3b40
keyword.other.importantbold
markup.changed#000000
markup.deleted#000000
markup.italicitalic
markup.error#660000
markup.inserted#000000
meta.link#4B83CD
markup.output, markup.raw#777777
markup.prompt#777777
markup.heading#AA3731
markup.boldbold
markup.traceback#660000
markup.underlineunderline
markup.quote#7A3E9D
markup.list#4B83CD
markup.bold, markup.italic#448C27
markup.inline.raw#AB6526
meta.diff.range, meta.diff.index, meta.separator#434343
meta.diff.header.from-file#434343
meta.diff.header.to-file#434343
support.type.property-name#000000
4u2c by pelagecha - VS Code Theme