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#dfdde6
  • activityBar.foreground#333333
  • activityBar.inactiveForeground#666666
  • editor.background#f8f5ff
  • editor.findMatchBackground#aaeccf
  • editor.foreground#4f3363
  • editor.selectionBackground#eed0ff
  • editorCursor.background#4f45ff
  • editorCursor.foreground#4f3363
  • editorGroup.border#c6bac5
  • editorGutter.background#f8f5ff
  • editorLineNumber.activeForeground#c035aa
  • editorLineNumber.foreground#786e74
  • inlineChatInput.background#dad8e0
  • inlineChatInput.foreground#2f1f3b
  • inlineChatInput.placeholderForeground#065fbf
  • input.background#dad8e0
  • input.foreground#2f1f3b
  • input.placeholderForeground#065fbf
  • panel.background#f8f5ff
  • sideBar.background#dfdde6
  • statusBar.background#ddb4ff
  • statusBar.foreground#241f48
  • statusBar.noFolderBackground#e3e0e9
  • statusBarItem.remoteBackground#ddb4ff
  • statusBarItem.remoteForeground#241f48

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#a05b5f
comment#a24568
entity.name.tag#786e74
entity.name.tag#0f7a9d
comment#a05b5f
markup.underline.link#3f7668
keyword#786e74
markup.fenced_code, markup.inline.raw
markup.list#786e74
invalid#d03033
keyword#b8532f
keyword#ad45ba
invalid.deprecated#b8532f
invalid.deprecated
markup.inserted#005000
markup.inserted#005000
comment#a05b5f
comment#5165e4
comment#a05b5f
comment#c035aa
comment#007f6f
comment#c035aa
keyword#ad45ba
gitDecoration.addedResourceForeground#057800
gitDecoration.untrackedResourceForeground#057800
gitDecoration.ignoredResourceForeground#786e74
gitDecoration.modifiedResourceForeground#b8532f
breadcrumb.foreground, tree.tableColumnHeader.foreground#c035aa
explorer.fileForeground#4f3363
explorer.directoryForeground#c035aa
comment.documentation#696969
editorSuggestWidget.highlightForeground#c035aa
editorSuggestWidget.selectedBackground
editorSuggestWidget.background
invalid#FF0000
invalid#5165e4
invalid#0f7a9d
invalid#0f7a9d
invalid#057800
invalid, invalid.deprecated#b8532f
invalid#d03033
invalid.deprecated#b8532f
invalid#d03033
invalid#d03033
invalid.deprecated#b8532f
invalid#7f0000
invalid.deprecated#F3EA98
invalid#FC5C94
entity.name.type#ad45ba
variable#3f6faf
entity.name.function#5165e4
constant#c035aa
string#007f6f
comment.documentation#786e74
diffEditor.insertedTextBackground#005000
diffEditor.removedTextBackground#8f1313
invalid#d03033
entity.name.function
diff.insertedTextBackground#005000
diff.removedTextBackground#8f1313
invalid.deprecated#d03033
invalid.deprecated#b8532f
entity.name.function#b8532f
invalid.deprecated#b8532f
string#007f6f
invalid.deprecated#b8532f
invalid#d03033
invalid.deprecated#b8532f
invalid#d03033
variable#3f6faf
variable#786e74
comment#a05b5f
comment#a05b5f
comment.documentation#804fb0
entity.name.function#b8532f
editor.findMatchBackground#4f3363
editor.findMatchHighlightBackground#4f3363
editor.findMatchBackground, editor.findMatchHighlightBackground#4f3363
string.regexp#c3303a
string.regexp#ad45ba
string.regexp#007f6f
meta.preprocessor, keyword.control.import#c01f5f
invalid.deprecated#b8532f
invalid.deprecated#b8532f
constant, constant.language, support.constant#c035aa
constant#c035aa
storage.type, support.type, entity.name.type#0f7a9d
entity.name.type#0f7a9d
variable#5f60bf
variable, variable.other#3f6faf
variable#3f6faf
entity.name.function#6060d0
entity.name.function, support.function#5165e4
entity.name.function#5165e4
support.function, support.class, support.type#705ae3
keyword, storage, keyword.control, storage.modifier#ad45ba
keyword#ad45ba
comment.documentation#804fb0
comment.documentation, comment.block.documentation#804fb0
comment.documentation#804fb0
string, string.quoted, string.template#007f6f
string#007f6f
comment, punctuation.definition.comment#a05b5f
comment#a05b5f
comment, punctuation.definition.comment#a05b5f
comment#a05b5f
invalid#4f3363
invalid#d03033
invalid.illegal#d03033
editor.wordHighlightStrongBackground#4f3363
invalid.deprecated#b8532f
invalid.illegal#d03033
editorCursor.foreground
editorGutter.background#4f3363
editorGroup.border#c6bac5
editorGroupHeader.tabsBackground
statusBar.noFolderBackground#786e74
statusBar.background, statusBar.foreground#241f48
editorLineNumber.activeForeground#c035aa
editorLineNumber.activeForeground#c035aa
editorLineNumber.foreground#786e74
invalid.deprecated
editor.selectionHighlightBackground#4f3363
editor.selectionBackground, editor.selectionForeground
editor.findMatchBackground#4f3363

Shiki preview

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

Loading...