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#e6d3c2
  • activityBar.foreground#333333
  • activityBar.inactiveForeground#666666
  • editor.background#ffead8
  • editor.findMatchBackground#afdeaf
  • editor.foreground#393330
  • editor.selectionBackground#dbe0c0
  • editorCursor.background#208f10
  • editorCursor.foreground#393330
  • editorGroup.border#c0b4a6
  • editorGutter.background#ffead8
  • editorLineNumber.activeForeground#007000
  • editorLineNumber.foreground#6e678f
  • inlineChatInput.background#e0cebe
  • inlineChatInput.foreground#25211f
  • inlineChatInput.placeholderForeground#8f2f30
  • input.background#e0cebe
  • input.foreground#25211f
  • input.placeholderForeground#8f2f30
  • panel.background#ffead8
  • sideBar.background#e6d3c2
  • statusBar.background#e9a0a0
  • statusBar.foreground#40231f
  • statusBar.noFolderBackground#e7d2cb
  • statusBarItem.remoteBackground#e9a0a0
  • statusBarItem.remoteForeground#40231f

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#6e678f
comment#845592
entity.name.tag#6e678f
entity.name.tag#b0000f
comment#6e678f
markup.underline.link#8a5f4a
keyword#6e678f
markup.fenced_code, markup.inline.raw
markup.list#6e678f
invalid#b20f00
keyword#906200
keyword#8f2f30
invalid.deprecated#906200
invalid.deprecated
markup.inserted#005000
markup.inserted#005000
comment#6e678f
comment#3f69af
comment#6e678f
comment#007000
comment#b0000f
comment#007000
keyword#8f2f30
gitDecoration.addedResourceForeground#007000
gitDecoration.untrackedResourceForeground#007000
gitDecoration.ignoredResourceForeground#6e678f
gitDecoration.modifiedResourceForeground#906200
breadcrumb.foreground, tree.tableColumnHeader.foreground#007000
explorer.fileForeground#393330
explorer.directoryForeground#007000
comment.documentation#696969
editorSuggestWidget.highlightForeground#007000
editorSuggestWidget.selectedBackground
editorSuggestWidget.background
invalid#FF0000
invalid#007000
invalid#b0000f
invalid#b0000f
invalid#007000
invalid, invalid.deprecated#906200
invalid#b20f00
invalid.deprecated#906200
invalid#b20f00
invalid#b20f00
invalid.deprecated#906200
invalid#7f0000
invalid.deprecated#F3EA98
invalid#FC5C94
entity.name.type#8f2f30
variable#aa184f
entity.name.function#007000
constant#a23ea4
string#557000
comment.documentation#6e678f
diffEditor.insertedTextBackground#005000
diffEditor.removedTextBackground#8f1313
invalid#b20f00
entity.name.function
diff.insertedTextBackground#005000
diff.removedTextBackground#8f1313
invalid.deprecated#b20f00
invalid.deprecated#906200
entity.name.function#906200
invalid.deprecated#906200
string#557000
invalid.deprecated#906200
invalid#b20f00
invalid.deprecated#906200
invalid#b20f00
variable#aa184f
variable#6e678f
comment#6e678f
comment#6e678f
comment.documentation#8d6068
entity.name.function#906200
editor.findMatchBackground#393330
editor.findMatchHighlightBackground#393330
editor.findMatchBackground, editor.findMatchHighlightBackground#393330
string.regexp#0f7688
string.regexp#a23ea4
string.regexp#557000
meta.preprocessor, keyword.control.import#0f7688
invalid.deprecated#906200
invalid.deprecated#906200
constant, constant.language, support.constant#a23ea4
constant#a23ea4
storage.type, support.type, entity.name.type#b0000f
entity.name.type#b0000f
variable#8f2f30
variable, variable.other#aa184f
variable#aa184f
entity.name.function#3f712f
entity.name.function, support.function#007000
entity.name.function#007000
support.function, support.class, support.type#00704f
keyword, storage, keyword.control, storage.modifier#8f2f30
keyword#8f2f30
comment.documentation#845592
comment.documentation, comment.block.documentation#8d6068
comment.documentation#8d6068
string, string.quoted, string.template#557000
string#557000
comment, punctuation.definition.comment#6e678f
comment#6e678f
comment, punctuation.definition.comment#6e678f
comment#6e678f
invalid#393330
invalid#b20f00
invalid.illegal#b20f00
editor.wordHighlightStrongBackground#393330
invalid.deprecated#906200
invalid.illegal#b20f00
editorCursor.foreground
editorGutter.background#393330
editorGroup.border#c0b4a6
editorGroupHeader.tabsBackground
statusBar.noFolderBackground#6e678f
statusBar.background, statusBar.foreground#40231f
editorLineNumber.activeForeground#007000
editorLineNumber.activeForeground#007000
editorLineNumber.foreground#6e678f
invalid.deprecated
editor.selectionHighlightBackground#393330
editor.selectionBackground, editor.selectionForeground
editor.findMatchBackground#393330

Shiki preview

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

Loading...