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#dedbd6
  • activityBar.foreground#333333
  • activityBar.inactiveForeground#666666
  • editor.background#f7f3ee
  • editor.findMatchBackground#7382a0
  • editor.foreground#605a52
  • editor.selectionBackground#d8d4cd
  • editorCursor.background#7382a0
  • editorCursor.foreground#605a52
  • editorGroup.border#c6bdb2
  • editorGutter.background#f7f3ee
  • editorLineNumber.activeForeground#1b2229
  • editorLineNumber.foreground#a39582
  • inlineChatInput.background#d9d6d1
  • inlineChatInput.foreground#302d29
  • inlineChatInput.placeholderForeground#7382a0
  • input.background#d9d6d1
  • input.foreground#302d29
  • input.placeholderForeground#7382a0
  • panel.background#f7f3ee
  • sideBar.background#dedbd6
  • statusBar.background#e4ddd2
  • statusBar.foreground#302d29
  • statusBar.noFolderBackground#dedad6
  • statusBarItem.remoteBackground#e4ddd2
  • statusBarItem.remoteForeground#302d29

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#614c61
comment#93836c
markup.heading#614c61
entity.name.tag#605a52
entity.name.tag#614c61
comment#b9a992
markup.underline.link#4c5361
keyword#605a52
markup.fenced_code, markup.inline.raw#5b5143
markup.list#605a52
invalid#955f5f
keyword#5b4343
keyword#525643
invalid.deprecated#957f5f
invalid.deprecated
markup.inserted#525643
markup.inserted#81895d
comment#9c739c
comment#955f5f
comment#957f5f
comment#81895d
comment#9c739c
keyword#5f8c7d
gitDecoration.addedResourceForeground#81895d
gitDecoration.untrackedResourceForeground#9d8f7c
gitDecoration.ignoredResourceForeground#b9a992
gitDecoration.renamedResourceForeground#9d8f7c
gitDecoration.modifiedResourceForeground#9c739c
breadcrumb.foreground, tree.tableColumnHeader.foreground#525643
explorer.fileForeground#605a52
explorer.directoryForeground#605a52
comment.documentation#696969
editorSuggestWidget.highlightForeground#7382a0
editorSuggestWidget.selectedBackground
editorSuggestWidget.background#605a52
invalid#FF0000
invalid#605a52
invalid#605a52
invalid#605a52
invalid#81895d
invalid, invalid.deprecated#957f5f
invalid#955f5f
invalid.deprecated#957f5f
invalid#955f5f
invalid#955f5f
invalid.deprecated#5b4343
invalid#955f5f
invalid.deprecated#957f5f
invalid#955f5f
entity.name.type#614c61
variable#B22222
entity.name.function#00008B
constant#FF1493
string#CD0000
comment.documentation#b9a992
diffEditor.insertedTextBackground#81895d
diffEditor.removedTextBackground#955f5f
invalid#FF0000
entity.name.function#5f8c7d
diff.insertedTextBackground#81895d
diff.removedTextBackground#955f5f
meta.diff.header.file#7382a0
meta.diff.header#5f8c7d
invalid.deprecated#955f5f
invalid.deprecated#957f5f
entity.name.function#4c5361
invalid.deprecated#957f5f
string#00008B
invalid.deprecated#957f5f
invalid#955f5f
invalid.deprecated#957f5f
invalid#955f5f
variable#81895d
variable#9c739c
variable#b9a992
comment#b9a992
comment#605a52
comment.documentation#81895d
editor.findMatchBackground#81895d
editor.findMatchHighlightBackground#4c5361
editor.findMatchBackground, editor.findMatchHighlightBackground#4c5361
string.regexp#605a52
string.regexp#605a52
string.regexp#525643
meta.preprocessor, keyword.control.import#605a52
invalid.deprecated#5b4343
invalid.deprecated#5b4343
constant, constant.language, support.constant#465953
constant#465953
storage.type, support.type, entity.name.type#605a52
entity.name.type#605a52
variable#4c5361
variable, variable.other#4c5361
variable#4c5361
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#614c61
keyword#614c61
comment.documentation#465953
comment.documentation, comment.block.documentation#9d8f7c
comment.documentation#9d8f7c
string, string.quoted, string.template#525643
string#525643
comment, punctuation.definition.comment#b9a992
comment#b9a992
comment, punctuation.definition.comment#b9a992
comment#b9a992
invalid#f1ece4
invalid
invalid.illegal#f1ece4
editor.wordHighlightStrongBackground#955f5f
invalid.deprecated#957f5f
invalid.illegal#955f5f
editorCursor.foreground
editorGutter.background#93836c
editorGroup.border#c6bdb2
editorGroupHeader.tabsBackground
statusBar.noFolderBackground#93836c
statusBar.background, statusBar.foreground
editorLineNumber.activeForeground
editorLineNumber.activeForeground#1b2229
editorLineNumber.foreground#a39582
invalid.deprecated
editor.selectionHighlightBackground
editor.selectionBackground, editor.selectionForeground
editor.findMatchBackground#f1ece4

Shiki preview

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

Loading...