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#4271ae
  • editor.foreground#4d4d4c
  • editor.selectionBackground#e4e4e4
  • editorCursor.background#4271ae
  • editorCursor.foreground#4d4d4c
  • editorGroup.border#d6d4d4
  • editorGutter.background#ffffff
  • editorLineNumber.activeForeground#000000
  • editorLineNumber.foreground#C0bfbf
  • inlineChatInput.background#e0e0e0
  • inlineChatInput.foreground#272726
  • inlineChatInput.placeholderForeground#4271ae
  • input.background#e0e0e0
  • input.foreground#272726
  • input.placeholderForeground#4271ae
  • panel.background#ffffff
  • sideBar.background#e6e6e6
  • statusBar.background#f7f7f7
  • statusBar.foreground#4d4d4c
  • statusBar.noFolderBackground#f4f4f4
  • statusBarItem.remoteBackground#f7f7f7
  • statusBarItem.remoteForeground#4d4d4c

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#8959a8
comment#8e908c
markup.heading#4271ae
entity.name.tag#4d4d4c
entity.name.tag#8959a8
comment#8e908c
markup.underline.link#c678dd
keyword#bb9200
markup.fenced_code, markup.inline.raw
markup.list#c82829
invalid#c82829
keyword#eab700
keyword#718c00
invalid.deprecated#eab700
invalid.deprecated
markup.inserted#a9ba66
markup.inserted#879451
comment#8959a8
comment#8959a8
comment#f5871f
comment#718c00
comment#c678dd
keyword#8abeb7
gitDecoration.addedResourceForeground#a9ba66
gitDecoration.untrackedResourceForeground#eab700
gitDecoration.ignoredResourceForeground#8e908c
gitDecoration.renamedResourceForeground#8e908c
gitDecoration.modifiedResourceForeground#8959a8
breadcrumb.foreground, tree.tableColumnHeader.foreground#718c00
explorer.fileForeground#4d4d4c
explorer.directoryForeground#4d4d4c
comment.documentation#696969
editorSuggestWidget.highlightForeground#4271ae
editorSuggestWidget.selectedBackground
editorSuggestWidget.background#4d4d4c
invalid#FF0000
invalid#4271ae
invalid#bb9200
invalid#bb9200
invalid#718c00
invalid, invalid.deprecated#eab700
invalid#c82829
invalid.deprecated#eab700
invalid#c82829
invalid#c82829
invalid.deprecated#eab700
invalid#c82829
invalid.deprecated#eab700
invalid#c82829
entity.name.type#8959a8
variable#B22222
entity.name.function#00008B
constant#FF1493
string#CD0000
comment.documentation#8e908c
diffEditor.insertedTextBackground#718c00
diffEditor.removedTextBackground#c82829
invalid#FF0000
entity.name.function#8abeb7
diff.insertedTextBackground#718c00
diff.removedTextBackground#c82829
meta.diff.header.file#4271ae
meta.diff.header#8abeb7
invalid.deprecated#c82829
invalid.deprecated#eab700
entity.name.function#c82829
invalid.deprecated#eab700
string#00008B
invalid.deprecated#eab700
invalid#c82829
invalid.deprecated#eab700
invalid#c82829
variable#718c00
variable#c678dd
variable#8e908c
comment#8e908c
comment#4d4d4c
comment.documentation#718c00
editor.findMatchBackground#718c00
editor.findMatchHighlightBackground#f2f2f2
editor.findMatchBackground, editor.findMatchHighlightBackground#f2f2f2
string.regexp#4d4d4c
string.regexp#4d4d4c
string.regexp#718c00
meta.preprocessor, keyword.control.import#4d4d4c
invalid.deprecated#eab700
invalid.deprecated#eab700
constant, constant.language, support.constant#f5871f
constant#f5871f
storage.type, support.type, entity.name.type#bb9200
entity.name.type#bb9200
variable#c82829
variable, variable.other#c82829
variable#c82829
entity.name.function#4271ae
entity.name.function, support.function#4271ae
entity.name.function#4271ae
support.function, support.class, support.type#4271ae
keyword, storage, keyword.control, storage.modifier#8959a8
keyword#8959a8
comment.documentation#f5871f
comment.documentation, comment.block.documentation#8e908c
comment.documentation#8e908c
string, string.quoted, string.template#718c00
string#718c00
comment, punctuation.definition.comment#8e908c
comment#8e908c
comment, punctuation.definition.comment#8e908c
comment#8e908c
invalid#f2f2f2
invalid
invalid.illegal#f2f2f2
editor.wordHighlightStrongBackground#c82829
invalid.deprecated#eab700
invalid.illegal#c82829
editorCursor.foreground
editorGutter.background#C0bfbf
editorGroup.border#d6d4d4
editorGroupHeader.tabsBackground#4d4d4c
statusBar.noFolderBackground#8e908c
statusBar.background, statusBar.foreground#4d4d4c
editorLineNumber.activeForeground
editorLineNumber.activeForeground#000000
editorLineNumber.foreground#C0bfbf
invalid.deprecated
editor.selectionHighlightBackground
editor.selectionBackground, editor.selectionForeground
editor.findMatchBackground#f2f2f2

Shiki preview

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

Loading...