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#e6e6e6
  • activityBar.foreground#333333
  • activityBar.inactiveForeground#666666
  • editor.background#FFFFFF
  • editor.findMatchBackground#B6D6FD
  • editor.foreground#333333
  • editor.selectionBackground#8ED3FF
  • editorCursor.background#21BDFF
  • editorCursor.foreground#333333
  • editorGutter.background#FFFFFF
  • editorLineNumber.activeForeground#7F7F7F
  • editorLineNumber.foreground#7F7F7F
  • inlineChatInput.background#e0e0e0
  • inlineChatInput.foreground#262626
  • inlineChatInput.placeholderForeground#000000
  • input.background#e0e0e0
  • input.foreground#262626
  • input.placeholderForeground#000000
  • panel.background#FFFFFF
  • sideBar.background#e6e6e6
  • statusBar.background#335EA8
  • statusBar.foreground#85CEEB
  • statusBar.noFolderBackground#9B9C97
  • statusBarItem.remoteBackground#335EA8
  • statusBarItem.remoteForeground#85CEEB

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#0000FF
comment#999999
markup.heading#006699
entity.name.tag#7F7F7F
entity.name.tag#6434A3
comment#A0A1A7
markup.underline.link#006DAF
markup.list#7F7F7F
invalid#ADD8E6
keyword#FF0000
keyword#008000
invalid.deprecated#FFA500
invalid.deprecated#E8E8E8
markup.inserted#22aa22
markup.inserted#22aa22
comment#000000
comment#008000
comment#0000FF
comment#4A708B
comment#6E8B3D
comment#4A708B
keyword#008000
gitDecoration.addedResourceForeground#6434A3
gitDecoration.untrackedResourceForeground#008000
gitDecoration.ignoredResourceForeground#A0A1A7
gitDecoration.renamedResourceForeground#036A07
gitDecoration.modifiedResourceForeground#BA36A5
breadcrumb.foreground, tree.tableColumnHeader.foreground#D0372D
explorer.fileForeground#333333
explorer.directoryForeground#006699
comment.documentation#696969
editorSuggestWidget.highlightForeground#0474B6
editorSuggestWidget.selectedBackground#000000
editorSuggestWidget.background#000000
invalid#FF0000
invalid#006699
invalid#6434A3
invalid#6434A3
invalid#FFFFFF
invalid#A535AE
invalid#008B00
invalid, invalid.deprecated#FFA500
invalid#FF0000
invalid.deprecated#F4A939
invalid#FE251E
invalid.deprecated
invalid
invalid#88090B
invalid.deprecated#FF0000
invalid#FF0000
invalid.deprecated#F3EA98
invalid#FC5C94
entity.name.type#0000FF
variable#B22222
entity.name.function#00008B
constant#FF1493
string#008000
comment.documentation#A0A1A7
diffEditor.insertedTextBackground
diffEditor.removedTextBackground
invalid#FF0000
entity.name.function#CC99CC
diff.insertedTextBackground
diff.removedTextBackground
meta.diff.header.file#800000
meta.diff.header#800000
invalid.deprecated#FF0000
invalid.deprecated#FFA500
entity.name.function#BA36A5
invalid.deprecated#FF0000
string#00008B
invalid.deprecated#FFA500
invalid#FF0000
invalid.deprecated#FFA500
invalid#FF0000
variable#0000FF
variable#0000FF
comment#00008B
comment
comment.documentation#008B00
entity.name.function#FF0000
editor.findMatchBackground
editor.findMatchHighlightBackground#000000
editor.findMatchBackground, editor.findMatchHighlightBackground#FFFFFF
string.regexp#008000
meta.preprocessor, keyword.control.import#808080
invalid.deprecated#FF0000
invalid.deprecated#FF0000
constant, constant.language, support.constant#D0372D
constant#D0372D
storage.type, support.type, entity.name.type#6434A3
entity.name.type#6434A3
variable#BA36A5
variable, variable.other#BA36A5
variable#BA36A5
entity.name.function#006699
entity.name.function, support.function#006699
entity.name.function#006699
support.function, support.class, support.type#006FE0
keyword, storage, keyword.control, storage.modifier#0000FF
keyword#0000FF
comment.documentation#D0372D
comment.documentation, comment.block.documentation#036A07
comment.documentation#036A07
string, string.quoted, string.template#008000
string#008000
comment, punctuation.definition.comment#8D8D84
comment#8D8D84
comment, punctuation.definition.comment#A0A1A7
comment#A0A1A7
invalid
invalid#FFFFFF
invalid.illegal#000000
editor.wordHighlightStrongBackground
invalid.deprecated#FFA500
invalid.illegal#FF0000
editorCursor.foreground
editorGutter.background#4C9ED9
editorGroupHeader.tabsBackground#000000
statusBar.noFolderBackground#F0F0EF
statusBar.background, statusBar.foreground#85CEEB
editorLineNumber.activeForeground
editorLineNumber.activeForeground#7F7F7F
editorLineNumber.foreground#7F7F7F
invalid.deprecated#E8E8E8
editor.selectionHighlightBackground
editor.selectionBackground, editor.selectionForeground
editor.findMatchBackground

Shiki preview

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

Loading...