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#170611
  • activityBar.foreground#cccccc
  • activityBar.inactiveForeground#888888
  • editor.background#15050f
  • editor.findMatchBackground#00405f
  • editor.foreground#dfd0d5
  • editor.selectionBackground#293140
  • editorCursor.background#fd3333
  • editorCursor.foreground#dfd0d5
  • editorGroup.border#555564
  • editorGutter.background#15050f
  • editorLineNumber.activeForeground#3fafcf
  • editorLineNumber.foreground#908890
  • inlineChatInput.background#170510
  • inlineChatInput.foreground#dfd0d5
  • inlineChatInput.placeholderForeground#3fafcf
  • input.background#170510
  • input.foreground#dfd0d5
  • input.placeholderForeground#3fafcf
  • panel.background#15050f
  • sideBar.background#170611
  • statusBar.background#671822
  • statusBar.foreground#ffffff
  • statusBar.noFolderBackground#352f2f
  • statusBarItem.remoteBackground#671822
  • statusBarItem.remoteForeground#ffffff

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#b07f7f
comment#c590af
entity.name.tag#908890
entity.name.tag#3f9aaf
comment#b07f7f
markup.underline.link#afdaef
keyword#908890
markup.fenced_code, markup.inline.raw
markup.list#908890
invalid#df4f4f
keyword#c560aa
keyword#cf4f5f
invalid.deprecated#c560aa
invalid.deprecated
markup.inserted#cbdfff
markup.inserted#cbdfff
comment#b07f7f
comment#3f9aaf
comment#b07f7f
comment#3fafcf
comment#cf4f5f
comment#3fafcf
keyword#cf4f5f
gitDecoration.addedResourceForeground#3fafcf
gitDecoration.untrackedResourceForeground#3fafcf
gitDecoration.ignoredResourceForeground#908890
gitDecoration.modifiedResourceForeground#c560aa
breadcrumb.foreground, tree.tableColumnHeader.foreground#3fafcf
explorer.fileForeground#dfd0d5
explorer.directoryForeground#3fafcf
comment.documentation#696969
editorSuggestWidget.highlightForeground#3fafcf
editorSuggestWidget.selectedBackground
editorSuggestWidget.background
invalid#FF0000
invalid#a6699f
invalid#3f9aaf
invalid#3f9aaf
invalid#3fafcf
invalid, invalid.deprecated#c560aa
invalid#df4f4f
invalid.deprecated#c560aa
invalid#df4f4f
invalid#df4f4f
invalid.deprecated#c560aa
invalid#ff7fbf
invalid.deprecated#F3EA98
invalid#FC5C94
entity.name.type#cf4f5f
variable#4fafaf
entity.name.function#a6699f
constant#d24f7f
string#3fafcf
comment.documentation#908890
diffEditor.insertedTextBackground#cbdfff
diffEditor.removedTextBackground#ffbfbf
invalid#df4f4f
entity.name.function
diff.insertedTextBackground#cbdfff
diff.removedTextBackground#ffbfbf
invalid.deprecated#df4f4f
invalid.deprecated#c560aa
entity.name.function#c560aa
invalid.deprecated#c560aa
string#3fafcf
invalid.deprecated#c560aa
invalid#df4f4f
invalid.deprecated#c560aa
invalid#df4f4f
variable#4fafaf
variable#908890
comment#b07f7f
comment#b07f7f
comment.documentation#82a0af
entity.name.function#c560aa
editor.findMatchBackground#dfd0d5
editor.findMatchHighlightBackground#dfd0d5
editor.findMatchBackground, editor.findMatchHighlightBackground#dfd0d5
string.regexp#cf4f5f
string.regexp#b0648f
string.regexp#3fafcf
meta.preprocessor, keyword.control.import#a6699f
invalid.deprecated#c560aa
invalid.deprecated#c560aa
constant, constant.language, support.constant#d24f7f
constant#d24f7f
storage.type, support.type, entity.name.type#3f9aaf
entity.name.type#3f9aaf
variable#82a0af
variable, variable.other#4fafaf
variable#4fafaf
entity.name.function#c590af
entity.name.function, support.function#a6699f
entity.name.function#a6699f
support.function, support.class, support.type#b0648f
keyword, storage, keyword.control, storage.modifier#cf4f5f
keyword#cf4f5f
comment.documentation#c590af
comment.documentation, comment.block.documentation#82a0af
comment.documentation#82a0af
string, string.quoted, string.template#3fafcf
string#3fafcf
comment, punctuation.definition.comment#b07f7f
comment#b07f7f
comment, punctuation.definition.comment#b07f7f
comment#b07f7f
invalid#dfd0d5
invalid#df4f4f
invalid.illegal#df4f4f
editor.wordHighlightStrongBackground#dfd0d5
invalid.deprecated#c560aa
invalid.illegal#df4f4f
editorCursor.foreground
editorGutter.background#dfd0d5
editorGroup.border#555564
editorGroupHeader.tabsBackground
statusBar.noFolderBackground#908890
statusBar.background, statusBar.foreground#ffffff
editorLineNumber.activeForeground#3fafcf
editorLineNumber.activeForeground#3fafcf
editorLineNumber.foreground#908890
invalid.deprecated
editor.selectionHighlightBackground#dfd0d5
editor.selectionBackground, editor.selectionForeground
editor.findMatchBackground#dfd0d5

Shiki preview

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

Loading...