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#bd93f9
  • editor.foreground#f8f8f2
  • editor.selectionBackground#44475a
  • editorCursor.background#bd93f9
  • editorCursor.foreground#f8f8f2
  • editorGroup.border#242530
  • editorGutter.background#282a36
  • editorLineNumber.activeForeground#f8f8f2
  • editorLineNumber.foreground#6272a4
  • inlineChatInput.background#2b2d3a
  • inlineChatInput.foreground#ffffff
  • inlineChatInput.placeholderForeground#bd93f9
  • input.background#2b2d3a
  • input.foreground#ffffff
  • input.placeholderForeground#bd93f9
  • panel.background#282a36
  • sideBar.background#2c2e3b
  • statusBar.background#22232d
  • statusBar.foreground#f8f8f2
  • statusBar.noFolderBackground#252631
  • statusBarItem.remoteBackground#22232d
  • statusBarItem.remoteForeground#f8f8f2

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#ff79c6
comment#6272a4
markup.heading#ff5555
entity.name.tag#6272a4
entity.name.tag#ff79c6
comment#6272a4
markup.underline.link#ff79c6
keyword#bd93f9
markup.fenced_code, markup.inline.raw
markup.list#ff5555
invalid#ff5555
keyword#f1fa8c
keyword#f1fa8c
invalid.deprecated#f1fa8c
invalid.deprecated
markup.inserted#50fa7b
markup.inserted#40c862
comment#bd93f9
comment#ff79c6
comment#ffb86c
comment#50fa7b
comment#ff79c6
keyword#8be9fd
gitDecoration.addedResourceForeground#50fa7b
gitDecoration.untrackedResourceForeground#8995ba
gitDecoration.ignoredResourceForeground#6272a4
gitDecoration.renamedResourceForeground#8995ba
gitDecoration.modifiedResourceForeground#bd93f9
breadcrumb.foreground, tree.tableColumnHeader.foreground#f1fa8c
explorer.fileForeground#f8f8f2
explorer.directoryForeground#f8f8f2
comment.documentation#696969
editorSuggestWidget.highlightForeground#bd93f9
editorSuggestWidget.selectedBackground
editorSuggestWidget.background#f8f8f2
invalid#FF0000
invalid#50fa7b
invalid#bd93f9
invalid#bd93f9
invalid#50fa7b
invalid, invalid.deprecated#f1fa8c
invalid#ff5555
invalid.deprecated#f1fa8c
invalid#ff5555
invalid#ff5555
invalid.deprecated#f1fa8c
invalid#ff5555
invalid.deprecated#f1fa8c
invalid#ff5555
entity.name.type#ff79c6
variable#FFA500
entity.name.function#4D4DDDDDDDDD
constant#FF1493
string#FFA500
comment.documentation#6272a4
diffEditor.insertedTextBackground#50fa7b
diffEditor.removedTextBackground#ff5555
invalid#FF0000
entity.name.function#8be9fd
diff.insertedTextBackground#50fa7b
diff.removedTextBackground#ff5555
meta.diff.header.file#61bfff
meta.diff.header#8be9fd
invalid.deprecated#ff5555
invalid.deprecated#f1fa8c
entity.name.function#ffc9e8
invalid.deprecated#f1fa8c
string#FFFFE0
invalid.deprecated#f1fa8c
invalid#ff5555
invalid.deprecated#f1fa8c
invalid#ff5555
variable#50fa7b
variable#ff79c6
variable#565761
comment#565761
comment#f8f8f2
comment.documentation#50fa7b
editor.findMatchBackground#50fa7b
editor.findMatchHighlightBackground#f8f8f2
editor.findMatchBackground, editor.findMatchHighlightBackground#f8f8f2
string.regexp#bd93f9
string.regexp#bd93f9
string.regexp#f1fa8c
meta.preprocessor, keyword.control.import#bd93f9
invalid.deprecated#f1fa8c
invalid.deprecated#f1fa8c
constant, constant.language, support.constant#8be9fd
constant#8be9fd
storage.type, support.type, entity.name.type#bd93f9
entity.name.type#bd93f9
variable#ffc9e8
variable, variable.other#ffc9e8
variable#ffc9e8
entity.name.function#50fa7b
entity.name.function, support.function#50fa7b
entity.name.function#50fa7b
support.function, support.class, support.type#ffb86c
keyword, storage, keyword.control, storage.modifier#ff79c6
keyword#ff79c6
comment.documentation#8be9fd
comment.documentation, comment.block.documentation#8995ba
comment.documentation#8995ba
string, string.quoted, string.template#f1fa8c
string#f1fa8c
comment, punctuation.definition.comment#6272a4
comment#6272a4
comment, punctuation.definition.comment#6272a4
comment#6272a4
invalid#1E2029
invalid
invalid.illegal#1E2029
editor.wordHighlightStrongBackground#ff5555
invalid.deprecated#f1fa8c
invalid.illegal#ff5555
editorCursor.foreground
editorGutter.background#565761
editorGroup.border#242530
editorGroupHeader.tabsBackground
statusBar.noFolderBackground#6272a4
statusBar.background, statusBar.foreground
editorLineNumber.activeForeground
editorLineNumber.activeForeground#f8f8f2
editorLineNumber.foreground#6272a4
invalid.deprecated
editor.selectionHighlightBackground
editor.selectionBackground, editor.selectionForeground
editor.findMatchBackground#1E2029

Shiki preview

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

Loading...