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#2c2e3b
  • activityBar.foreground#cccccc
  • activityBar.inactiveForeground#888888
  • editor.background#282a36
  • editor.findMatchBackground#57c7ff
  • editor.foreground#f9f9f9
  • editor.selectionBackground#44464f
  • editorCursor.background#57c7ff
  • editorCursor.foreground#f9f9f9
  • editorGroup.border#2e2f37
  • editorGutter.background#282a36
  • editorLineNumber.activeForeground#f9f9f9
  • editorLineNumber.foreground#3a3d4d
  • inlineChatInput.background#2b2d3a
  • inlineChatInput.foreground#ffffff
  • inlineChatInput.placeholderForeground#57c7ff
  • input.background#2b2d3a
  • input.foreground#ffffff
  • input.placeholderForeground#57c7ff
  • panel.background#282a36
  • sideBar.background#2c2e3b
  • statusBar.background#1e2029
  • statusBar.foreground#f9f9f9
  • statusBar.noFolderBackground#20222c
  • statusBarItem.remoteBackground#1e2029
  • statusBarItem.remoteForeground#f9f9f9

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#ffb86c
comment#606580
markup.heading#57c7ff
entity.name.tag#ff6ac1
entity.name.tag#ffb86c
comment#606580
markup.underline.link#ff6ac1
keyword#9aedfe
markup.fenced_code, markup.inline.raw
markup.list#ff5c57
invalid#ff5c57
keyword#f3f99d
keyword#f3f99d
invalid.deprecated#f3f99d
invalid.deprecated
markup.inserted#5af78e
markup.inserted#48c571
comment#bd93f9
comment#ffb86c
comment#ffb86c
comment#5af78e
comment#ff6ac1
keyword#9aedfe
gitDecoration.addedResourceForeground#5af78e
gitDecoration.untrackedResourceForeground#f5fab5
gitDecoration.ignoredResourceForeground#606580
gitDecoration.renamedResourceForeground#f5fab5
gitDecoration.modifiedResourceForeground#bd93f9
breadcrumb.foreground, tree.tableColumnHeader.foreground#f3f99d
explorer.fileForeground#f9f9f9
explorer.directoryForeground#f9f9f9
comment.documentation#696969
editorSuggestWidget.highlightForeground#57c7ff
editorSuggestWidget.selectedBackground
editorSuggestWidget.background#f9f9f9
invalid#FF0000
invalid#57c7ff
invalid#9aedfe
invalid#9aedfe
invalid#5af78e
invalid, invalid.deprecated#f3f99d
invalid#ff5c57
invalid.deprecated#f3f99d
invalid#ff5c57
invalid#ff5c57
invalid.deprecated#f3f99d
invalid#ff5c57
invalid.deprecated#f3f99d
invalid#ff5c57
entity.name.type#ffb86c
variable#FFA500
entity.name.function#4D4DDDDDDDDD
constant#FF1493
string#FFA500
comment.documentation#606580
diffEditor.insertedTextBackground#5af78e
diffEditor.removedTextBackground#ff5c57
invalid#FF0000
entity.name.function#9aedfe
diff.insertedTextBackground#5af78e
diff.removedTextBackground#ff5c57
meta.diff.header.file#57c7ff
meta.diff.header#9aedfe
invalid.deprecated#ff5c57
invalid.deprecated#f3f99d
entity.name.function#ff5c57
invalid.deprecated#f3f99d
string#FFFFE0
invalid.deprecated#f3f99d
invalid#ff5c57
invalid.deprecated#f3f99d
invalid#ff5c57
variable#5af78e
variable#ff6ac1
variable#848688
comment#848688
comment#f9f9f9
comment.documentation#5af78e
editor.findMatchBackground#5af78e
editor.findMatchHighlightBackground#ff5c57
editor.findMatchBackground, editor.findMatchHighlightBackground#ff5c57
string.regexp#ff6ac1
string.regexp#ff6ac1
string.regexp#f3f99d
meta.preprocessor, keyword.control.import#ff6ac1
invalid.deprecated#f3f99d
invalid.deprecated#f3f99d
constant, constant.language, support.constant#5af78e
constant#5af78e
storage.type, support.type, entity.name.type#9aedfe
entity.name.type#9aedfe
variable#ff5c57
variable, variable.other#ff5c57
variable#ff5c57
entity.name.function#57c7ff
entity.name.function, support.function#57c7ff
entity.name.function#57c7ff
support.function, support.class, support.type#ff6ac1
keyword, storage, keyword.control, storage.modifier#ffb86c
keyword#ffb86c
comment.documentation#5af78e
comment.documentation, comment.block.documentation#f5fab5
comment.documentation#f5fab5
string, string.quoted, string.template#f3f99d
string#f3f99d
comment, punctuation.definition.comment#606580
comment#606580
comment, punctuation.definition.comment#606580
comment#606580
invalid#282a36
invalid
invalid.illegal#282a36
editor.wordHighlightStrongBackground#ff5c57
invalid.deprecated#f3f99d
invalid.illegal#ff5c57
editorCursor.foreground
editorGutter.background#a5a5a9
editorGroup.border#2e2f37
editorGroupHeader.tabsBackground
statusBar.noFolderBackground#e2e4e5
statusBar.background, statusBar.foreground
editorLineNumber.activeForeground
editorLineNumber.activeForeground#f9f9f9
editorLineNumber.foreground#3a3d4d
invalid.deprecated
editor.selectionHighlightBackground
editor.selectionBackground, editor.selectionForeground
editor.findMatchBackground#282a36

Shiki preview

TypeScript sample highlighted with this variant's colors and tokenColors.

Loading...