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#202224
  • activityBar.foreground#cccccc
  • activityBar.inactiveForeground#888888
  • editor.background#1d1f21
  • editor.findMatchBackground#81a2be
  • editor.foreground#c5c8c6
  • editor.selectionBackground#333537
  • editorCursor.background#81a2be
  • editorCursor.foreground#c5c8c6
  • editorGroup.border#0d0d0d
  • editorGutter.background#1d1f21
  • editorLineNumber.activeForeground#81a2be
  • editorLineNumber.foreground#3f4040
  • inlineChatInput.background#1f2124
  • inlineChatInput.foreground#c5c8c6
  • inlineChatInput.placeholderForeground#81a2be
  • input.background#1f2124
  • input.foreground#c5c8c6
  • input.placeholderForeground#81a2be
  • panel.background#1d1f21
  • sideBar.background#202224
  • statusBar.background#0f1011
  • statusBar.foreground#ffffff
  • statusBar.noFolderBackground#1d1f21
  • statusBarItem.remoteBackground#0f1011
  • statusBarItem.remoteForeground#ffffff

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#b294bb
comment#5a5b5a
markup.heading#81a2be
entity.name.tag#c5c8c6
entity.name.tag#b294bb
comment#5a5b5a
markup.underline.link#c9b4cf
keyword#f0c674
markup.fenced_code, markup.inline.raw
markup.list#cc6666
invalid#cc6666
keyword#f0c674
keyword#b5bd68
invalid.deprecated#f0c674
invalid.deprecated
markup.inserted#b5bd68
markup.inserted#909753
comment#b294bb
comment#b294bb
comment#de935f
comment#b5bd68
comment#c9b4cf
keyword#8abeb7
gitDecoration.addedResourceForeground#b5bd68
gitDecoration.untrackedResourceForeground#717171
gitDecoration.ignoredResourceForeground#5a5b5a
gitDecoration.renamedResourceForeground#717171
gitDecoration.modifiedResourceForeground#b294bb
breadcrumb.foreground, tree.tableColumnHeader.foreground#b5bd68
explorer.fileForeground#c5c8c6
explorer.directoryForeground#c5c8c6
comment.documentation#696969
editorSuggestWidget.highlightForeground#81a2be
editorSuggestWidget.selectedBackground
editorSuggestWidget.background#c5c8c6
invalid#FF0000
invalid#81a2be
invalid#f0c674
invalid#f0c674
invalid#b5bd68
invalid, invalid.deprecated#f0c674
invalid#cc6666
invalid.deprecated#f0c674
invalid#cc6666
invalid#cc6666
invalid.deprecated#f0c674
invalid#cc6666
invalid.deprecated#f0c674
invalid#cc6666
entity.name.type#b294bb
variable#FFA500
entity.name.function#4D4DDDDDDDDD
constant#FF1493
string#FFA500
comment.documentation#5a5b5a
diffEditor.insertedTextBackground#b5bd68
diffEditor.removedTextBackground#cc6666
invalid#FF0000
entity.name.function#8abeb7
diff.insertedTextBackground#b5bd68
diff.removedTextBackground#cc6666
meta.diff.header.file#81a2be
meta.diff.header#8abeb7
invalid.deprecated#cc6666
invalid.deprecated#f0c674
entity.name.function#cc6666
invalid.deprecated#f0c674
string#FFFFE0
invalid.deprecated#f0c674
invalid#cc6666
invalid.deprecated#f0c674
invalid#cc6666
variable#b5bd68
variable#c9b4cf
variable#5a5b5a
comment#5a5b5a
comment#c5c8c6
comment.documentation#b5bd68
editor.findMatchBackground#b5bd68
editor.findMatchHighlightBackground#ffffff
editor.findMatchBackground, editor.findMatchHighlightBackground#ffffff
string.regexp#c5c8c6
string.regexp#c5c8c6
string.regexp#b5bd68
meta.preprocessor, keyword.control.import#c5c8c6
invalid.deprecated#f0c674
invalid.deprecated#f0c674
constant, constant.language, support.constant#de935f
constant#de935f
storage.type, support.type, entity.name.type#f0c674
entity.name.type#f0c674
variable#cc6666
variable, variable.other#cc6666
variable#cc6666
entity.name.function#81a2be
entity.name.function, support.function#81a2be
entity.name.function#81a2be
support.function, support.class, support.type#81a2be
keyword, storage, keyword.control, storage.modifier#b294bb
keyword#b294bb
comment.documentation#de935f
comment.documentation, comment.block.documentation#717171
comment.documentation#717171
string, string.quoted, string.template#b5bd68
string#b5bd68
comment, punctuation.definition.comment#5a5b5a
comment#5a5b5a
comment, punctuation.definition.comment#5a5b5a
comment#5a5b5a
invalid#0d0d0d
invalid
invalid.illegal#0d0d0d
editor.wordHighlightStrongBackground#cc6666
invalid.deprecated#f0c674
invalid.illegal#cc6666
editorCursor.foreground
editorGutter.background#3f4040
editorGroup.border#0d0d0d
editorGroupHeader.tabsBackground#ffffff
statusBar.noFolderBackground#5a5b5a
statusBar.background, statusBar.foreground#ffffff
editorLineNumber.activeForeground
editorLineNumber.activeForeground#81a2be
editorLineNumber.foreground#3f4040
invalid.deprecated
editor.selectionHighlightBackground
editor.selectionBackground, editor.selectionForeground
editor.findMatchBackground#0d0d0d

Shiki preview

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

Loading...