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#e3e2e0
  • activityBar.foreground#333333
  • activityBar.inactiveForeground#666666
  • editor.background#FCFBF9
  • editor.findMatchBackground#7686A9
  • editor.foreground#605A52
  • editor.selectionBackground#F4EAEE
  • editor.selectionForeground#605A52
  • editorCursor.background#7686A9
  • editorCursor.foreground#605A52
  • editorGroup.border#CDCBC7
  • editorGutter.background#FCFBF9
  • editorLineNumber.activeForeground#8F8A84
  • editorLineNumber.foreground#AEABA6
  • inlineChatInput.background#dedddb
  • inlineChatInput.foreground#302d29
  • inlineChatInput.placeholderForeground#7686A9
  • input.background#dedddb
  • input.foreground#302d29
  • input.placeholderForeground#7686A9
  • panel.background#FCFBF9
  • sideBar.background#e3e2e0
  • statusBar.background#DDDBD8
  • statusBar.foreground#302d29
  • statusBar.noFolderBackground#ECEBE8
  • statusBarItem.remoteBackground#DDDBD8
  • statusBarItem.remoteForeground#302d29

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#83577D
comment#9E9A95
markup.heading#83577D
entity.name.tag#605A52
entity.name.tag#83577D
comment#9E9A95
markup.underline.link#556995
keyword#605A52
markup.fenced_code, markup.inline.raw#886A44
markup.list#605A52
invalid#8F5652
keyword#8F5652
keyword#747B4D
invalid.deprecated#886A44
invalid.deprecated
markup.inserted#747B4D
markup.inserted#747B4D
comment#83577D
comment#83577D
comment#886A44
comment#747B4D
comment#83577D
keyword#477A7B
gitDecoration.addedResourceForeground#8F956F
gitDecoration.untrackedResourceForeground#9E9A95
gitDecoration.ignoredResourceForeground#9E9A95
gitDecoration.renamedResourceForeground#9E9A95
gitDecoration.modifiedResourceForeground#83577D
breadcrumb.foreground, tree.tableColumnHeader.foreground#747B4D
explorer.fileForeground#605A52
explorer.directoryForeground#605A52
comment.documentation#696969
editorSuggestWidget.highlightForeground#83577D
editorSuggestWidget.selectedBackground
editorSuggestWidget.background#605A52
invalid#FF0000
invalid#605A52
invalid#605A52
invalid#605A52
invalid#747B4D
invalid, invalid.deprecated#886A44
invalid#8F5652
invalid.deprecated#886A44
invalid#8F5652
invalid#8F5652
invalid.deprecated#8F5652
invalid#8F5652
invalid.deprecated#886A44
invalid#8F5652
entity.name.type#83577D
variable#B22222
entity.name.function#00008B
constant#FF1493
string#CD0000
comment.documentation#9E9A95
diffEditor.insertedTextBackground#FCFBF9
diffEditor.removedTextBackground#F1EBE8
invalid#FF0000
entity.name.function#477A7B
diff.insertedTextBackground#747B4D
diff.removedTextBackground#8F5652
meta.diff.header.file#556995
meta.diff.header#477A7B
invalid.deprecated#8F5652
invalid.deprecated#886A44
entity.name.function#556995
invalid.deprecated#886A44
string#00008B
invalid.deprecated#886A44
invalid#8F5652
invalid.deprecated#886A44
invalid#8F5652
variable#747B4D
variable#83577D
variable#9E9A95
comment#9E9A95
comment#605A52
comment.documentation#747B4D
editor.findMatchBackground#747B4D
editor.findMatchHighlightBackground#4C4741
editor.findMatchBackground, editor.findMatchHighlightBackground#4C4741
string.regexp#605A52
string.regexp#605A52
string.regexp#747B4D
meta.preprocessor, keyword.control.import#886A44
invalid.deprecated#8F5652
invalid.deprecated#8F5652
constant, constant.language, support.constant#477A7B
constant#477A7B
storage.type, support.type, entity.name.type#605A52
entity.name.type#605A52
variable#556995
variable, variable.other#556995
variable#556995
entity.name.function#605A52
entity.name.function, support.function#605A52
entity.name.function#605A52
support.function, support.class, support.type#605A52
keyword, storage, keyword.control, storage.modifier#83577D
keyword#83577D
comment.documentation#477A7B
comment.documentation, comment.block.documentation#9E9A95
comment.documentation#9E9A95
string, string.quoted, string.template#747B4D
string#747B4D
comment, punctuation.definition.comment#9E9A95
comment#9E9A95
comment, punctuation.definition.comment#9E9A95
comment#9E9A95
invalid#fcfbf9
invalid#605A52
invalid.illegal#BEBBB6
editor.wordHighlightStrongBackground
invalid.deprecated#886A44
invalid.illegal#8F5652
editorCursor.foreground
editorGutter.background#AEABA6
editorGroup.border#CDCBC7
editorGroupHeader.tabsBackground
statusBar.noFolderBackground#9E9A95
statusBar.background, statusBar.foreground
editorLineNumber.activeForeground
editorLineNumber.activeForeground#8F8A84
editorLineNumber.foreground#AEABA6
invalid.deprecated
editor.selectionHighlightBackground
editor.selectionBackground, editor.selectionForeground#605A52
editor.findMatchBackground#fcfbf9

Shiki preview

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

Loading...