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#282b35
  • activityBar.foreground#cccccc
  • activityBar.inactiveForeground#888888
  • editor.background#242730
  • editor.findMatchBackground#51afef
  • editor.foreground#bbc2cf
  • editor.selectionBackground#3d4451
  • editorCursor.background#51afef
  • editorCursor.foreground#bbc2cf
  • editorGroup.border#1c1f24
  • editorGutter.background#242730
  • editorLineNumber.activeForeground#51afef
  • editorLineNumber.foreground#484854
  • inlineChatInput.background#272a34
  • inlineChatInput.foreground#eaf3ff
  • inlineChatInput.placeholderForeground#51afef
  • input.background#272a34
  • input.foreground#eaf3ff
  • input.placeholderForeground#51afef
  • panel.background#242730
  • sideBar.background#282b35
  • statusBar.background#1e2128
  • statusBar.foreground#bbc2cf
  • statusBar.noFolderBackground#21242c
  • statusBarItem.remoteBackground#1e2128
  • statusBarItem.remoteForeground#bbc2cf

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#51afef
comment#62686E
markup.heading#ff665c
entity.name.tag#C57BDB
entity.name.tag#51afef
comment#62686E
markup.underline.link#C57BDB
keyword#FCCE7B
markup.fenced_code, markup.inline.raw
markup.list#ff665c
invalid#ff665c
keyword#FCCE7B
keyword#7bc275
invalid.deprecated#FCCE7B
invalid.deprecated
markup.inserted#7bc275
markup.inserted#629b5d
comment#a991f1
comment#51afef
comment#e69055
comment#7bc275
comment#C57BDB
keyword#5cEfFF
gitDecoration.addedResourceForeground#7bc275
gitDecoration.untrackedResourceForeground#7e7e87
gitDecoration.ignoredResourceForeground#62686E
gitDecoration.renamedResourceForeground#7e7e87
gitDecoration.modifiedResourceForeground#a991f1
breadcrumb.foreground, tree.tableColumnHeader.foreground#7bc275
explorer.fileForeground#bbc2cf
explorer.directoryForeground#bbc2cf
comment.documentation#696969
editorSuggestWidget.highlightForeground#51afef
editorSuggestWidget.selectedBackground
editorSuggestWidget.background#bbc2cf
invalid#FF0000
invalid#5cEfFF
invalid#FCCE7B
invalid#FCCE7B
invalid#7bc275
invalid, invalid.deprecated#FCCE7B
invalid#ff665c
invalid.deprecated#FCCE7B
invalid#ff665c
invalid#ff665c
invalid.deprecated#FCCE7B
invalid#ff665c
invalid.deprecated#FCCE7B
invalid#ff665c
entity.name.type#51afef
variable#FFA500
entity.name.function#4D4DDDDDDDDD
constant#FF1493
string#FFA500
comment.documentation#62686E
diffEditor.insertedTextBackground#7bc275
diffEditor.removedTextBackground#ff665c
invalid#FF0000
entity.name.function#5cEfFF
diff.insertedTextBackground#7bc275
diff.removedTextBackground#ff665c
meta.diff.header.file#51afef
meta.diff.header#5cEfFF
invalid.deprecated#ff665c
invalid.deprecated#FCCE7B
entity.name.function#dcafe9
invalid.deprecated#FCCE7B
string#FFFFE0
invalid.deprecated#FCCE7B
invalid#ff665c
invalid.deprecated#FCCE7B
invalid#ff665c
variable#7bc275
variable#C57BDB
variable#484854
comment#484854
comment#bbc2cf
comment.documentation#7bc275
editor.findMatchBackground#7bc275
editor.findMatchHighlightBackground#DFDFDF
editor.findMatchBackground, editor.findMatchHighlightBackground#DFDFDF
string.regexp#C57BDB
string.regexp#C57BDB
string.regexp#7bc275
meta.preprocessor, keyword.control.import#C57BDB
invalid.deprecated#FCCE7B
invalid.deprecated#FCCE7B
constant, constant.language, support.constant#a991f1
constant#a991f1
storage.type, support.type, entity.name.type#FCCE7B
entity.name.type#FCCE7B
variable#dcafe9
variable, variable.other#dcafe9
variable#dcafe9
entity.name.function#5cEfFF
entity.name.function, support.function#5cEfFF
entity.name.function#5cEfFF
support.function, support.class, support.type#C57BDB
keyword, storage, keyword.control, storage.modifier#51afef
keyword#51afef
comment.documentation#a991f1
comment.documentation, comment.block.documentation#7e7e87
comment.documentation#7e7e87
string, string.quoted, string.template#7bc275
string#7bc275
comment, punctuation.definition.comment#62686E
comment#62686E
comment, punctuation.definition.comment#62686E
comment#62686E
invalid#1c1f24
invalid
invalid.illegal#1c1f24
editor.wordHighlightStrongBackground#ff665c
invalid.deprecated#FCCE7B
invalid.illegal#ff665c
editorCursor.foreground
editorGutter.background#484854
editorGroup.border#1c1f24
editorGroupHeader.tabsBackground#bbc2cf
statusBar.noFolderBackground#495c73
statusBar.background, statusBar.foreground#bbc2cf
editorLineNumber.activeForeground
editorLineNumber.activeForeground#51afef
editorLineNumber.foreground#484854
invalid.deprecated
editor.selectionHighlightBackground
editor.selectionBackground, editor.selectionForeground
editor.findMatchBackground#1c1f24

Shiki preview

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

Loading...