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#242424
  • activityBar.foreground#cccccc
  • activityBar.inactiveForeground#888888
  • editor.background#212121
  • editor.findMatchBackground#c792ea
  • editor.foreground#EEFFFF
  • editor.selectionBackground#406562
  • editor.selectionForeground#80cbc4
  • editorCursor.background#ffcb6b
  • editorCursor.foreground#EEFFFF
  • editorGroup.border#303030
  • editorGutter.background#212121
  • editorLineNumber.activeForeground#89DDFF
  • editorLineNumber.foreground#585858
  • inlineChatInput.background#242424
  • inlineChatInput.foreground#EEFFFF
  • inlineChatInput.placeholderForeground#ffcb6b
  • input.background#242424
  • input.foreground#EEFFFF
  • input.placeholderForeground#ffcb6b
  • panel.background#212121
  • sideBar.background#242424
  • statusBar.background#303030
  • statusBar.foreground#A8A8A8
  • statusBar.noFolderBackground#202020
  • statusBarItem.remoteBackground#303030
  • statusBarItem.remoteForeground#A8A8A8

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#89DDFF
comment#626262
markup.heading#c792ea
entity.name.tag#89DDFF
entity.name.tag#89DDFF
comment#626262
markup.underline.link#c792ea
keyword#c792ea
markup.fenced_code, markup.inline.raw
markup.list#f57373
invalid#f57373
keyword#ffcb6b
keyword#c3e88d
invalid.deprecated#ffcb6b
invalid.deprecated
markup.inserted#c3e88d
markup.inserted#9cb970
comment#bb80b3
comment#89DDFF
comment#F78C6C
comment#c3e88d
comment#c792ea
keyword#89DDFF
gitDecoration.addedResourceForeground#c3e88d
gitDecoration.untrackedResourceForeground#626262
gitDecoration.ignoredResourceForeground#626262
gitDecoration.renamedResourceForeground#626262
gitDecoration.modifiedResourceForeground#82aaff
breadcrumb.foreground, tree.tableColumnHeader.foreground#c3e88d
explorer.fileForeground#EEFFFF
explorer.directoryForeground#EEFFFF
comment.documentation#696969
editorSuggestWidget.highlightForeground#c792ea
editorSuggestWidget.selectedBackground
editorSuggestWidget.background#EEFFFF
invalid#FF0000
invalid#82aaff
invalid#c792ea
invalid#c792ea
invalid#c3e88d
invalid, invalid.deprecated#ffcb6b
invalid#f57373
invalid.deprecated#ffcb6b
invalid#f57373
invalid#f57373
invalid.deprecated#ffcb6b
invalid#f57373
invalid.deprecated#ffcb6b
invalid#f57373
entity.name.type#89DDFF
variable#FFA500
entity.name.function#4D4DDDDDDDDD
constant#FF1493
string#FFA500
comment.documentation#626262
diffEditor.insertedTextBackground#c3e88d
diffEditor.removedTextBackground#f57373
invalid#FF0000
entity.name.function#89DDFF
diff.insertedTextBackground#c3e88d
diff.removedTextBackground#f57373
meta.diff.header.file#82aaff
meta.diff.header#89DDFF
invalid.deprecated#f57373
invalid.deprecated#ffcb6b
entity.name.function#ffcb6b
invalid.deprecated#ffcb6b
string#FFFFE0
invalid.deprecated#ffcb6b
invalid#f57373
invalid.deprecated#ffcb6b
invalid#f57373
variable#c3e88d
variable#c792ea
variable#585858
comment#585858
comment#EEFFFF
comment.documentation#c3e88d
editor.findMatchBackground#c3e88d
editor.findMatchHighlightBackground#c3e88d
editor.findMatchBackground, editor.findMatchHighlightBackground#c3e88d
string.regexp#89DDFF
string.regexp#89DDFF
string.regexp#c3e88d
meta.preprocessor, keyword.control.import#89DDFF
invalid.deprecated#ffcb6b
invalid.deprecated#ffcb6b
constant, constant.language, support.constant#F78C6C
constant#F78C6C
storage.type, support.type, entity.name.type#c792ea
entity.name.type#c792ea
variable#ffcb6b
variable, variable.other#ffcb6b
variable#ffcb6b
entity.name.function#82aaff
entity.name.function, support.function#82aaff
entity.name.function#82aaff
support.function, support.class, support.type#82aaff
keyword, storage, keyword.control, storage.modifier#89DDFF
keyword#89DDFF
comment.documentation#F78C6C
comment.documentation, comment.block.documentation#626262
comment.documentation#626262
string, string.quoted, string.template#c3e88d
string#c3e88d
comment, punctuation.definition.comment#626262
comment#626262
comment, punctuation.definition.comment#626262
comment#626262
invalid#171F24
invalid#80cbc4
invalid.illegal#171F24
editor.wordHighlightStrongBackground#f57373
invalid.deprecated#ffcb6b
invalid.illegal#f57373
editorCursor.foreground
editorGutter.background#4a4a4a
editorGroup.border#303030
editorGroupHeader.tabsBackground#A8A8A8
statusBar.noFolderBackground#626262
statusBar.background, statusBar.foreground#A8A8A8
editorLineNumber.activeForeground
editorLineNumber.activeForeground#89DDFF
editorLineNumber.foreground#585858
invalid.deprecated
editor.selectionHighlightBackground
editor.selectionBackground, editor.selectionForeground#80cbc4
editor.findMatchBackground#171F24

Shiki preview

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

Loading...