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#d5ddcb
  • activityBar.foreground#333333
  • activityBar.inactiveForeground#666666
  • editor.background#edf5e2
  • editor.findMatchBackground#dfbac0
  • editor.foreground#221321
  • editor.selectionBackground#d9d2ef
  • editorCursor.background#770080
  • editorCursor.foreground#221321
  • editorGroup.border#a5aaaf
  • editorGutter.background#edf5e2
  • editorLineNumber.activeForeground#007047
  • editorLineNumber.foreground#676470
  • inlineChatInput.background#d1d8c7
  • inlineChatInput.foreground#221321
  • inlineChatInput.placeholderForeground#9f356a
  • input.background#d1d8c7
  • input.foreground#221321
  • input.placeholderForeground#9f356a
  • panel.background#edf5e2
  • sideBar.background#d5ddcb
  • statusBar.background#a5c67f
  • statusBar.foreground#142810
  • statusBar.noFolderBackground#d0d7ca
  • statusBarItem.remoteBackground#a5c67f
  • statusBarItem.remoteForeground#142810

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#7f4f4a
comment#6a4a9f
entity.name.tag#676470
entity.name.tag#162f8f
comment#7f4f4a
markup.underline.link#5f5f1f
keyword#676470
markup.fenced_code, markup.inline.raw
markup.list#676470
invalid#d00000
keyword#b04300
keyword#894852
invalid.deprecated#b04300
invalid.deprecated
markup.inserted#005000
markup.inserted#005000
comment#7f4f4a
comment#5032aa
comment#7f4f4a
comment#007047
comment#9f356a
comment#007047
keyword#894852
gitDecoration.addedResourceForeground#007047
gitDecoration.untrackedResourceForeground#007047
gitDecoration.ignoredResourceForeground#676470
gitDecoration.modifiedResourceForeground#b04300
breadcrumb.foreground, tree.tableColumnHeader.foreground#007047
explorer.fileForeground#221321
explorer.directoryForeground#007047
comment.documentation#696969
editorSuggestWidget.highlightForeground#007047
editorSuggestWidget.selectedBackground
editorSuggestWidget.background
invalid#FF0000
invalid#355500
invalid#162f8f
invalid#162f8f
invalid#007047
invalid, invalid.deprecated#b04300
invalid#d00000
invalid.deprecated#b04300
invalid#d00000
invalid#d00000
invalid.deprecated#b04300
invalid#7f0000
invalid.deprecated#F3EA98
invalid#FC5C94
entity.name.type#894852
variable#80308f
entity.name.function#355500
constant#5032aa
string#007047
comment.documentation#676470
diffEditor.insertedTextBackground#005000
diffEditor.removedTextBackground#8f1313
invalid#d00000
entity.name.function
diff.insertedTextBackground#005000
diff.removedTextBackground#8f1313
invalid.deprecated#d00000
invalid.deprecated#b04300
entity.name.function#b04300
invalid.deprecated#b04300
string#007047
invalid.deprecated#b04300
invalid#d00000
invalid.deprecated#b04300
invalid#d00000
variable#80308f
variable#676470
comment#7f4f4a
comment#7f4f4a
comment.documentation#4f677f
entity.name.function#b04300
editor.findMatchBackground#221321
editor.findMatchHighlightBackground#221321
editor.findMatchBackground, editor.findMatchHighlightBackground#221321
string.regexp#c3303a
string.regexp#80308f
string.regexp#007047
meta.preprocessor, keyword.control.import#9f356a
invalid.deprecated#b04300
invalid.deprecated#b04300
constant, constant.language, support.constant#5032aa
constant#5032aa
storage.type, support.type, entity.name.type#162f8f
entity.name.type#162f8f
variable#6a4a9f
variable, variable.other#80308f
variable#80308f
entity.name.function#306630
entity.name.function, support.function#355500
entity.name.function#355500
support.function, support.class, support.type#6a4a9f
keyword, storage, keyword.control, storage.modifier#894852
keyword#894852
comment.documentation#6a4a9f
comment.documentation, comment.block.documentation#4f677f
comment.documentation#4f677f
string, string.quoted, string.template#007047
string#007047
comment, punctuation.definition.comment#7f4f4a
comment#7f4f4a
comment, punctuation.definition.comment#7f4f4a
comment#7f4f4a
invalid#221321
invalid#d00000
invalid.illegal#d00000
editor.wordHighlightStrongBackground#221321
invalid.deprecated#b04300
invalid.illegal#d00000
editorCursor.foreground
editorGutter.background#221321
editorGroup.border#a5aaaf
editorGroupHeader.tabsBackground
statusBar.noFolderBackground#676470
statusBar.background, statusBar.foreground#142810
editorLineNumber.activeForeground#007047
editorLineNumber.activeForeground#007047
editorLineNumber.foreground#676470
invalid.deprecated
editor.selectionHighlightBackground#221321
editor.selectionBackground, editor.selectionForeground
editor.findMatchBackground#221321

Shiki preview

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

Loading...