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#212121
  • activityBar.foreground#cccccc
  • activityBar.inactiveForeground#888888
  • editor.background#1e1e1e
  • editor.findMatchBackground#237AD3
  • editor.foreground#d4d4d4
  • editor.selectionBackground#113d69
  • editorCursor.background#237AD3
  • editorCursor.foreground#d4d4d4
  • editorGroup.border#252526
  • editorGutter.background#1e1e1e
  • editorLineNumber.activeForeground#d4d4d4
  • editorLineNumber.foreground#37474F
  • inlineChatInput.background#202020
  • inlineChatInput.foreground#d4d4d4
  • inlineChatInput.placeholderForeground#237AD3
  • input.background#202020
  • input.foreground#d4d4d4
  • input.placeholderForeground#237AD3
  • panel.background#1e1e1e
  • sideBar.background#212121
  • statusBar.background#68217A
  • statusBar.foreground#f4f4f4
  • statusBar.noFolderBackground#1d1d1d
  • statusBarItem.remoteBackground#68217A
  • statusBarItem.remoteForeground#f4f4f4

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#339CDB
comment#579C4C
markup.heading#237AD3
entity.name.tag#85DDFF
entity.name.tag#339CDB
comment#579C4C
markup.underline.link#C586C0
keyword#35CDAF
markup.fenced_code, markup.inline.raw
markup.list#D16969
invalid#D16969
keyword#D7BA7D
keyword#DB8E73
invalid.deprecated#D7BA7D
invalid.deprecated
markup.inserted#579C4C
markup.inserted#457c3c
comment#BB80B3
comment#339CDB
comment#DB8E73
comment#579C4C
comment#C586C0
keyword#85DDFF
gitDecoration.addedResourceForeground#579C4C
gitDecoration.untrackedResourceForeground#777778
gitDecoration.ignoredResourceForeground#579C4C
gitDecoration.renamedResourceForeground#777778
gitDecoration.modifiedResourceForeground#339CDB
breadcrumb.foreground, tree.tableColumnHeader.foreground#d4d4d4
explorer.fileForeground#d4d4d4
explorer.directoryForeground#d4d4d4
comment.documentation#696969
editorSuggestWidget.highlightForeground#237AD3
editorSuggestWidget.selectedBackground
editorSuggestWidget.background#d4d4d4
invalid#FF0000
invalid#D9DAA2
invalid#35CDAF
invalid#35CDAF
invalid#579C4C
invalid, invalid.deprecated#D7BA7D
invalid#D16969
invalid.deprecated#D7BA7D
invalid#D16969
invalid#D16969
invalid.deprecated#D7BA7D
invalid#D16969
invalid.deprecated#D7BA7D
invalid#D16969
entity.name.type#339CDB
variable#FFA500
entity.name.function#4D4DDDDDDDDD
constant#FF1493
string#FFA500
comment.documentation#579C4C
diffEditor.insertedTextBackground#579C4C
diffEditor.removedTextBackground#D16969
invalid#FF0000
entity.name.function#85DDFF
diff.insertedTextBackground#579C4C
diff.removedTextBackground#D16969
meta.diff.header.file#339CDB
meta.diff.header#85DDFF
invalid.deprecated#D16969
invalid.deprecated#D7BA7D
entity.name.function#85DDFF
invalid.deprecated#D7BA7D
string#FFFFE0
invalid.deprecated#D7BA7D
invalid#D16969
invalid.deprecated#D7BA7D
invalid#D16969
variable#579C4C
variable#C586C0
variable#777778
comment#777778
comment#d4d4d4
comment.documentation#579C4C
editor.findMatchBackground#579C4C
editor.findMatchHighlightBackground#d4d4d4
editor.findMatchBackground, editor.findMatchHighlightBackground#d4d4d4
string.regexp#85DDFF
string.regexp#85DDFF
string.regexp#DB8E73
meta.preprocessor, keyword.control.import#85DDFF
invalid.deprecated#D7BA7D
invalid.deprecated#D7BA7D
constant, constant.language, support.constant#339CDB
constant#339CDB
storage.type, support.type, entity.name.type#35CDAF
entity.name.type#35CDAF
variable#85DDFF
variable, variable.other#85DDFF
variable#85DDFF
entity.name.function#D9DAA2
entity.name.function, support.function#D9DAA2
entity.name.function#D9DAA2
support.function, support.class, support.type#C586C0
keyword, storage, keyword.control, storage.modifier#339CDB
keyword#339CDB
comment.documentation#339CDB
comment.documentation, comment.block.documentation#777778
comment.documentation#777778
string, string.quoted, string.template#DB8E73
string#DB8E73
comment, punctuation.definition.comment#579C4C
comment#579C4C
comment, punctuation.definition.comment#579C4C
comment#579C4C
invalid#171F24
invalid
invalid.illegal#171F24
editor.wordHighlightStrongBackground#D16969
invalid.deprecated#D7BA7D
invalid.illegal#D16969
editorCursor.foreground
editorGutter.background#4b474c
editorGroup.border#252526
editorGroupHeader.tabsBackground#f4f4f4
statusBar.noFolderBackground#339CDB
statusBar.background, statusBar.foreground#f4f4f4
editorLineNumber.activeForeground
editorLineNumber.activeForeground#d4d4d4
editorLineNumber.foreground#37474F
invalid.deprecated
editor.selectionHighlightBackground
editor.selectionBackground, editor.selectionForeground
editor.findMatchBackground#171F24

Shiki preview

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

Loading...