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#dbd5c9
  • activityBar.foreground#333333
  • activityBar.inactiveForeground#666666
  • editor.background#f3eddf
  • editor.findMatchBackground#ddc97f
  • editor.foreground#4f204f
  • editor.selectionBackground#e0d0ba
  • editorCursor.background#9d5744
  • editorCursor.foreground#4f204f
  • editorGroup.border#c5afb6
  • editorGutter.background#f3eddf
  • editorLineNumber.activeForeground#87591f
  • editorLineNumber.foreground#6f6877
  • inlineChatInput.background#d6d1c4
  • inlineChatInput.foreground#3f1a3f
  • inlineChatInput.placeholderForeground#9f4e74
  • input.background#d6d1c4
  • input.foreground#3f1a3f
  • input.placeholderForeground#9f4e74
  • panel.background#f3eddf
  • sideBar.background#dbd5c9
  • statusBar.background#d1b0df
  • statusBar.foreground#523044
  • statusBar.noFolderBackground#d9cac8
  • statusBarItem.remoteBackground#d1b0df
  • statusBarItem.remoteForeground#523044

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#475d80
comment#906045
entity.name.tag#6f6877
entity.name.tag#426340
comment#475d80
markup.underline.link#55447f
keyword#6f6877
markup.fenced_code, markup.inline.raw
markup.list#6f6877
invalid#a73080
keyword#a05900
keyword#906045
invalid.deprecated#a05900
invalid.deprecated
markup.inserted#0f443f
markup.inserted#0f443f
comment#475d80
comment#a73080
comment#475d80
comment#87591f
comment#ba2d2f
comment#87591f
keyword#906045
gitDecoration.addedResourceForeground#3060af
gitDecoration.untrackedResourceForeground#3060af
gitDecoration.ignoredResourceForeground#6f6877
gitDecoration.modifiedResourceForeground#a05900
breadcrumb.foreground, tree.tableColumnHeader.foreground#87591f
explorer.fileForeground#4f204f
explorer.directoryForeground#87591f
comment.documentation#696969
editorSuggestWidget.highlightForeground#87591f
editorSuggestWidget.selectedBackground
editorSuggestWidget.background
invalid#FF0000
invalid#4f60a0
invalid#426340
invalid#426340
invalid#3060af
invalid, invalid.deprecated#a05900
invalid#a73080
invalid.deprecated#a05900
invalid#a73080
invalid#a73080
invalid.deprecated#a05900
invalid#7f0000
invalid.deprecated#F3EA98
invalid#FC5C94
entity.name.type#906045
variable#9f4e74
entity.name.function#4f60a0
constant#5059c0
string#a04650
comment.documentation#6f6877
diffEditor.insertedTextBackground#0f443f
diffEditor.removedTextBackground#801530
invalid#a73080
entity.name.function
diff.insertedTextBackground#0f443f
diff.removedTextBackground#801530
invalid.deprecated#a73080
invalid.deprecated#a05900
entity.name.function#a05900
invalid.deprecated#a05900
string#a04650
invalid.deprecated#a05900
invalid#a73080
invalid.deprecated#a05900
invalid#a73080
variable#9f4e74
variable#6f6877
comment#475d80
comment#475d80
comment.documentation#7a5c50
entity.name.function#a05900
editor.findMatchBackground#4f204f
editor.findMatchHighlightBackground#4f204f
editor.findMatchBackground, editor.findMatchHighlightBackground#4f204f
string.regexp#b21f00
string.regexp#9f4e74
string.regexp#a04650
meta.preprocessor, keyword.control.import#0b6e8a
invalid.deprecated#a05900
invalid.deprecated#a05900
constant, constant.language, support.constant#5059c0
constant#5059c0
storage.type, support.type, entity.name.type#426340
entity.name.type#426340
variable#97508f
variable, variable.other#9f4e74
variable#9f4e74
entity.name.function#456b82
entity.name.function, support.function#4f60a0
entity.name.function#4f60a0
support.function, support.class, support.type#97508f
keyword, storage, keyword.control, storage.modifier#906045
keyword#906045
comment.documentation#97508f
comment.documentation, comment.block.documentation#7a5c50
comment.documentation#7a5c50
string, string.quoted, string.template#a04650
string#a04650
comment, punctuation.definition.comment#475d80
comment#475d80
comment, punctuation.definition.comment#475d80
comment#475d80
invalid#4f204f
invalid#a73080
invalid.illegal#a73080
editor.wordHighlightStrongBackground#4f204f
invalid.deprecated#a05900
invalid.illegal#a73080
editorCursor.foreground
editorGutter.background#4f204f
editorGroup.border#c5afb6
editorGroupHeader.tabsBackground
statusBar.noFolderBackground#6f6877
statusBar.background, statusBar.foreground#523044
editorLineNumber.activeForeground#87591f
editorLineNumber.activeForeground#87591f
editorLineNumber.foreground#6f6877
invalid.deprecated
editor.selectionHighlightBackground#4f204f
editor.selectionBackground, editor.selectionForeground
editor.findMatchBackground#4f204f

Shiki preview

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

Loading...