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#151f2f
  • activityBar.foreground#cccccc
  • activityBar.inactiveForeground#888888
  • editor.background#131c2b
  • editor.findMatchBackground#684d54
  • editor.foreground#eaedef
  • editor.selectionBackground#183c65
  • editorCursor.background#8fdfff
  • editorCursor.foreground#eaedef
  • editorGroup.border#595a63
  • editorGutter.background#131c2b
  • editorLineNumber.activeForeground#12b4ff
  • editorLineNumber.foreground#969faf
  • inlineChatInput.background#151e2e
  • inlineChatInput.foreground#eaedef
  • inlineChatInput.placeholderForeground#70a0ff
  • input.background#151e2e
  • input.foreground#eaedef
  • input.placeholderForeground#70a0ff
  • panel.background#131c2b
  • sideBar.background#151f2f
  • statusBar.background#2f527b
  • statusBar.foreground#ecf0ff
  • statusBar.noFolderBackground#2a3644
  • statusBarItem.remoteBackground#2f527b
  • statusBarItem.remoteForeground#ecf0ff

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#eaa4a4—
comment#d4aaf0—
entity.name.tag#969faf—
entity.name.tag#41bf4f—
comment#eaa4a4—
markup.underline.link#90a0dc—
keyword#969faf—
markup.fenced_code, markup.inline.raw——
markup.list#969faf—
invalid#ff7a5f—
keyword#f0c060—
keyword#70a0ff—
invalid.deprecated#f0c060—
invalid.deprecated——
markup.inserted#a0e0a0—
markup.inserted#a0e0a0—
comment#eaa4a4—
comment#2fd0db—
comment#eaa4a4—
comment#12b4ff—
comment#7fce5f—
comment#12b4ff—
keyword#70a0ff—
gitDecoration.addedResourceForeground#30c489—
gitDecoration.untrackedResourceForeground#30c489—
gitDecoration.ignoredResourceForeground#969faf—
gitDecoration.modifiedResourceForeground#f0c060—
breadcrumb.foreground, tree.tableColumnHeader.foreground#12b4ff—
explorer.fileForeground#eaedef—
explorer.directoryForeground#12b4ff—
comment.documentation#696969—
editorSuggestWidget.highlightForeground#12b4ff—
editorSuggestWidget.selectedBackground——
editorSuggestWidget.background——
invalid#FF0000—
invalid#7fce5f—
invalid#41bf4f—
invalid#41bf4f—
invalid#30c489—
invalid, invalid.deprecated#f0c060—
invalid#ff7a5f—
invalid.deprecated#f0c060—
invalid#ff7a5f—
invalid#ff7a5f—
invalid.deprecated#f0c060—
invalid#ffa9bf—
invalid.deprecated#F3EA98—
invalid#FC5C94—
entity.name.type#70a0ff—
variable#2fd0db—
entity.name.function#7fce5f—
constant#12b4ff—
string#65d5a8—
comment.documentation#969faf—
diffEditor.insertedTextBackground#a0e0a0—
diffEditor.removedTextBackground#ffbfbf—
invalid#ff7a5f—
entity.name.function——
diff.insertedTextBackground#a0e0a0—
diff.removedTextBackground#ffbfbf—
invalid.deprecated#ff7a5f—
invalid.deprecated#f0c060—
entity.name.function#f0c060—
invalid.deprecated#f0c060—
string#65d5a8—
invalid.deprecated#f0c060—
invalid#ff7a5f—
invalid.deprecated#f0c060—
invalid#ff7a5f—
variable#2fd0db—
variable#969faf—
comment#eaa4a4—
comment#eaa4a4—
comment.documentation#99bfcf—
entity.name.function#f0c060—
editor.findMatchBackground#eaedef—
editor.findMatchHighlightBackground#eaedef—
editor.findMatchBackground, editor.findMatchHighlightBackground#eaedef—
string.regexp#ff6f6f—
string.regexp#f59acf—
string.regexp#65d5a8—
meta.preprocessor, keyword.control.import#cf90ff—
invalid.deprecated#f0c060—
invalid.deprecated#f0c060—
constant, constant.language, support.constant#12b4ff—
constant#12b4ff—
storage.type, support.type, entity.name.type#41bf4f—
entity.name.type#41bf4f—
variable#99bfcf—
variable, variable.other#2fd0db—
variable#2fd0db—
entity.name.function#a9c99f—
entity.name.function, support.function#7fce5f—
entity.name.function#7fce5f—
support.function, support.class, support.type#d4aaf0—
keyword, storage, keyword.control, storage.modifier#70a0ff—
keyword#70a0ff—
comment.documentation#d4aaf0—
comment.documentation, comment.block.documentation#99bfcf—
comment.documentation#99bfcf—
string, string.quoted, string.template#65d5a8—
string#65d5a8—
comment, punctuation.definition.comment#eaa4a4—
comment#eaa4a4—
comment, punctuation.definition.comment#eaa4a4—
comment#eaa4a4—
invalid#eaedef—
invalid#ff7a5f—
invalid.illegal#ff7a5f—
editor.wordHighlightStrongBackground#eaedef—
invalid.deprecated#f0c060—
invalid.illegal#ff7a5f—
editorCursor.foreground——
editorGutter.background#eaedef—
editorGroup.border#595a63—
editorGroupHeader.tabsBackground——
statusBar.noFolderBackground#969faf—
statusBar.background, statusBar.foreground#ecf0ff—
editorLineNumber.activeForeground#12b4ff—
editorLineNumber.activeForeground#12b4ff—
editorLineNumber.foreground#969faf—
invalid.deprecated——
editor.selectionHighlightBackground#eaedef—
editor.selectionBackground, editor.selectionForeground——
editor.findMatchBackground#eaedef—