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#1e2021
  • activityBar.foreground#cccccc
  • activityBar.inactiveForeground#888888
  • editor.background#1b1d1e
  • editor.findMatchBackground#fc20bb
  • editor.foreground#dddddd
  • editor.selectionBackground#464849
  • editorCursor.background#fc20bb
  • editorCursor.foreground#dddddd
  • editorGroup.border#303030
  • editorGutter.background#1b1d1e
  • editorLineNumber.activeForeground#20bbfc
  • editorLineNumber.foreground#505050
  • inlineChatInput.background#1d1f20
  • inlineChatInput.foreground#dddddd
  • inlineChatInput.placeholderForeground#fc20bb
  • input.background#1d1f20
  • input.foreground#dddddd
  • input.placeholderForeground#fc20bb
  • panel.background#1b1d1e
  • sideBar.background#1e2021
  • statusBar.background#222424
  • statusBar.foreground#dddddd
  • statusBar.noFolderBackground#262829
  • statusBarItem.remoteBackground#222424
  • statusBarItem.remoteForeground#dddddd

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#6c9ef8
comment#808080
markup.heading#dddddd
entity.name.tag#d02b61
entity.name.tag#6c9ef8
comment#808080
markup.underline.link#505050
keyword#00aa80
markup.fenced_code, markup.inline.raw
markup.list#b77fdb
invalid#d02b61
keyword#d08928
keyword#d08928
invalid.deprecated#d08928
invalid.deprecated
markup.inserted#60aa00
markup.inserted#4c8800
comment#a9a1e1
comment#6c9ef8
comment#da8548
comment#60aa00
comment#b77fdb
keyword#00aa80
gitDecoration.addedResourceForeground#60aa00
gitDecoration.untrackedResourceForeground#9f9f9f
gitDecoration.ignoredResourceForeground#808080
gitDecoration.renamedResourceForeground#9f9f9f
gitDecoration.modifiedResourceForeground#a9a1e1
breadcrumb.foreground, tree.tableColumnHeader.foreground#d08928
explorer.fileForeground#dddddd
explorer.directoryForeground#dddddd
comment.documentation#696969
editorSuggestWidget.highlightForeground#fc20bb
editorSuggestWidget.selectedBackground#fc20bb
editorSuggestWidget.background#dddddd
invalid#FF0000
invalid#b77fdb
invalid#00aa80
invalid#00aa80
invalid#60aa00
invalid, invalid.deprecated#d08928
invalid#d02b61
invalid.deprecated#d08928
invalid#d02b61
invalid#d02b61
invalid.deprecated#d08928
invalid#d02b61
invalid.deprecated#d08928
invalid#d02b61
entity.name.type#6c9ef8
variable#FFA500
entity.name.function#4D4DDDDDDDDD
constant#FF1493
string#FFA500
comment.documentation#808080
diffEditor.insertedTextBackground#60aa00
diffEditor.removedTextBackground#d02b61
invalid#FF0000
entity.name.function#00aa80
diff.insertedTextBackground#60aa00
diff.removedTextBackground#d02b61
meta.diff.header.file#6c9ef8
meta.diff.header#00aa80
invalid.deprecated#d02b61
invalid.deprecated#d08928
entity.name.function#5699AF
invalid.deprecated#d08928
string#FFFFE0
invalid.deprecated#d08928
invalid#d02b61
invalid.deprecated#d08928
invalid#d02b61
variable#60aa00
variable#b77fdb
variable#505050
comment#505050
comment#dddddd
comment.documentation#60aa00
editor.findMatchBackground#60aa00
editor.findMatchHighlightBackground#1b1d1e
editor.findMatchBackground, editor.findMatchHighlightBackground#1b1d1e
string.regexp#6c9ef8
string.regexp#6c9ef8
string.regexp#d08928
meta.preprocessor, keyword.control.import#6c9ef8
invalid.deprecated#d08928
invalid.deprecated#d08928
constant, constant.language, support.constant#60aa00
constant#60aa00
storage.type, support.type, entity.name.type#00aa80
entity.name.type#00aa80
variable#5699AF
variable, variable.other#5699AF
variable#5699AF
entity.name.function#b77fdb
entity.name.function, support.function#b77fdb
entity.name.function#b77fdb
support.function, support.class, support.type#b77fdb
keyword, storage, keyword.control, storage.modifier#6c9ef8
keyword#6c9ef8
comment.documentation#60aa00
comment.documentation, comment.block.documentation#9f9f9f
comment.documentation#9f9f9f
string, string.quoted, string.template#d08928
string#d08928
comment, punctuation.definition.comment#808080
comment#808080
comment, punctuation.definition.comment#808080
comment#808080
invalid#1b1d1e
invalid
invalid.illegal#1b1d1e
editor.wordHighlightStrongBackground#fc20bb
invalid.deprecated#d08928
invalid.illegal#d02b61
editorCursor.foreground
editorGutter.background#505050
editorGroup.border#303030
editorGroupHeader.tabsBackground
statusBar.noFolderBackground#808080
statusBar.background, statusBar.foreground
editorLineNumber.activeForeground
editorLineNumber.activeForeground#20bbfc
editorLineNumber.foreground#505050
invalid.deprecated
editor.selectionHighlightBackground
editor.selectionBackground, editor.selectionForeground
editor.findMatchBackground#1b1d1e

Shiki preview

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

Loading...