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#e6dadb
  • activityBar.foreground#333333
  • activityBar.inactiveForeground#666666
  • editor.background#fff2f3
  • editor.findMatchBackground#b4cfff
  • editor.foreground#4f4073
  • editor.selectionBackground#eecfff
  • editorCursor.background#cf0090
  • editorCursor.foreground#4f4073
  • editorGroup.border#c6bbc6
  • editorGutter.background#fff2f3
  • editorLineNumber.activeForeground#8e44f3
  • editorLineNumber.foreground#786e74
  • inlineChatInput.background#e0d5d6
  • inlineChatInput.foreground#28203a
  • inlineChatInput.placeholderForeground#cb1aaa
  • input.background#e0d5d6
  • input.foreground#28203a
  • input.placeholderForeground#cb1aaa
  • panel.background#fff2f3
  • sideBar.background#e6dadb
  • statusBar.background#ffa4dc
  • statusBar.foreground#341f58
  • statusBar.noFolderBackground#efd3e4
  • statusBarItem.remoteBackground#ffa4dc
  • statusBarItem.remoteForeground#341f58

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#9a5f6a
comment#a45392
entity.name.tag#786e74
entity.name.tag#3f6faf
comment#9a5f6a
markup.underline.link#af4988
keyword#786e74
markup.fenced_code, markup.inline.raw
markup.list#786e74
invalid#e00033
keyword#a45f22
keyword#8e44f3
invalid.deprecated#a45f22
invalid.deprecated
markup.inserted#005000
markup.inserted#005000
comment#9a5f6a
comment#0f7b8f
comment#9a5f6a
comment#8e44f3
comment#a45f22
comment#8e44f3
keyword#8e44f3
gitDecoration.addedResourceForeground#007f68
gitDecoration.untrackedResourceForeground#007f68
gitDecoration.ignoredResourceForeground#786e74
gitDecoration.modifiedResourceForeground#a45f22
breadcrumb.foreground, tree.tableColumnHeader.foreground#8e44f3
explorer.fileForeground#4f4073
explorer.directoryForeground#8e44f3
comment.documentation#696969
editorSuggestWidget.highlightForeground#8e44f3
editorSuggestWidget.selectedBackground
editorSuggestWidget.background
invalid#FF0000
invalid#cb1aaa
invalid#3f6faf
invalid#3f6faf
invalid#007f68
invalid, invalid.deprecated#a45f22
invalid#e00033
invalid.deprecated#a45f22
invalid#e00033
invalid#e00033
invalid.deprecated#a45f22
invalid#7f0000
invalid.deprecated#F3EA98
invalid#FC5C94
entity.name.type#8e44f3
variable#5250ef
entity.name.function#cb1aaa
constant#d50f7f
string#b6532f
comment.documentation#786e74
diffEditor.insertedTextBackground#005000
diffEditor.removedTextBackground#8f1313
invalid#e00033
entity.name.function
diff.insertedTextBackground#005000
diff.removedTextBackground#8f1313
invalid.deprecated#e00033
invalid.deprecated#a45f22
entity.name.function#a45f22
invalid.deprecated#a45f22
string#b6532f
invalid.deprecated#a45f22
invalid#e00033
invalid.deprecated#a45f22
invalid#e00033
variable#5250ef
variable#786e74
comment#9a5f6a
comment#9a5f6a
comment.documentation#5f60bf
entity.name.function#a45f22
editor.findMatchBackground#4f4073
editor.findMatchHighlightBackground#4f4073
editor.findMatchBackground, editor.findMatchHighlightBackground#4f4073
string.regexp#d50f7f
string.regexp#ba35af
string.regexp#b6532f
meta.preprocessor, keyword.control.import#007f68
invalid.deprecated#a45f22
invalid.deprecated#a45f22
constant, constant.language, support.constant#d50f7f
constant#d50f7f
storage.type, support.type, entity.name.type#3f6faf
entity.name.type#3f6faf
variable#6060d0
variable, variable.other#5250ef
variable#5250ef
entity.name.function#a45392
entity.name.function, support.function#cb1aaa
entity.name.function#cb1aaa
support.function, support.class, support.type#ba35af
keyword, storage, keyword.control, storage.modifier#8e44f3
keyword#8e44f3
comment.documentation#a45392
comment.documentation, comment.block.documentation#5f60bf
comment.documentation#5f60bf
string, string.quoted, string.template#b6532f
string#b6532f
comment, punctuation.definition.comment#9a5f6a
comment#9a5f6a
comment, punctuation.definition.comment#9a5f6a
comment#9a5f6a
invalid#4f4073
invalid#e00033
invalid.illegal#e00033
editor.wordHighlightStrongBackground#4f4073
invalid.deprecated#a45f22
invalid.illegal#e00033
editorCursor.foreground
editorGutter.background#4f4073
editorGroup.border#c6bbc6
editorGroupHeader.tabsBackground
statusBar.noFolderBackground#786e74
statusBar.background, statusBar.foreground#341f58
editorLineNumber.activeForeground#8e44f3
editorLineNumber.activeForeground#8e44f3
editorLineNumber.foreground#786e74
invalid.deprecated
editor.selectionHighlightBackground#4f4073
editor.selectionBackground, editor.selectionForeground
editor.findMatchBackground#4f4073

Shiki preview

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

Loading...