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#272329
  • activityBar.foreground#cccccc
  • activityBar.inactiveForeground#888888
  • editor.background#232025
  • editor.findMatchBackground#957856
  • editor.foreground#efd5c5
  • editor.selectionBackground#544a50
  • editorCursor.background#f3c09a
  • editorCursor.foreground#efd5c5
  • editorGroup.border#635850
  • editorGutter.background#232025
  • editorLineNumber.activeForeground#deb07a
  • editorLineNumber.foreground#8f8886
  • inlineChatInput.background#262328
  • inlineChatInput.foreground#efd5c5
  • inlineChatInput.placeholderForeground#ffaacf
  • input.background#262328
  • input.foreground#efd5c5
  • input.placeholderForeground#ffaacf
  • panel.background#232025
  • sideBar.background#272329
  • statusBar.background#675072
  • statusBar.foreground#fedeff
  • statusBar.noFolderBackground#3b393e
  • statusBarItem.remoteBackground#675072
  • statusBarItem.remoteForeground#fedeff

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#a0a0cf
comment#deb07a
entity.name.tag#8f8886
entity.name.tag#a9c99f
comment#a0a0cf
markup.underline.link#b0a0cf
keyword#8f8886
markup.fenced_code, markup.inline.raw
markup.list#8f8886
invalid#f498c0
keyword#d09950
keyword#deb07a
invalid.deprecated#d09950
invalid.deprecated
markup.inserted#a0d0f0
markup.inserted#a0d0f0
comment#a0a0cf
comment#f498c0
comment#a0a0cf
comment#deb07a
comment#e47980
comment#deb07a
keyword#deb07a
gitDecoration.addedResourceForeground#6fb3c0
gitDecoration.untrackedResourceForeground#6fb3c0
gitDecoration.ignoredResourceForeground#8f8886
gitDecoration.modifiedResourceForeground#d09950
breadcrumb.foreground, tree.tableColumnHeader.foreground#deb07a
explorer.fileForeground#efd5c5
explorer.directoryForeground#deb07a
comment.documentation#696969
editorSuggestWidget.highlightForeground#deb07a
editorSuggestWidget.selectedBackground
editorSuggestWidget.background
invalid#FF0000
invalid#8fcfd0
invalid#a9c99f
invalid#a9c99f
invalid#6fb3c0
invalid, invalid.deprecated#d09950
invalid#f498c0
invalid.deprecated#d09950
invalid#f498c0
invalid#f498c0
invalid.deprecated#d09950
invalid#ffa9bf
invalid.deprecated#F3EA98
invalid#FC5C94
entity.name.type#deb07a
variable#ffaacf
entity.name.function#8fcfd0
constant#80aadf
string#f3a0a0
comment.documentation#8f8886
diffEditor.insertedTextBackground#a0d0f0
diffEditor.removedTextBackground#f0bfcf
invalid#f498c0
entity.name.function
diff.insertedTextBackground#a0d0f0
diff.removedTextBackground#f0bfcf
invalid.deprecated#f498c0
invalid.deprecated#d09950
entity.name.function#d09950
invalid.deprecated#d09950
string#f3a0a0
invalid.deprecated#d09950
invalid#f498c0
invalid.deprecated#d09950
invalid#f498c0
variable#ffaacf
variable#8f8886
comment#a0a0cf
comment#a0a0cf
comment.documentation#caa89f
entity.name.function#d09950
editor.findMatchBackground#efd5c5
editor.findMatchHighlightBackground#efd5c5
editor.findMatchBackground, editor.findMatchHighlightBackground#efd5c5
string.regexp#e47980
string.regexp#ffaacf
string.regexp#f3a0a0
meta.preprocessor, keyword.control.import#65c5a8
invalid.deprecated#d09950
invalid.deprecated#d09950
constant, constant.language, support.constant#80aadf
constant#80aadf
storage.type, support.type, entity.name.type#a9c99f
entity.name.type#a9c99f
variable#e3b0c0
variable, variable.other#ffaacf
variable#ffaacf
entity.name.function#99bfcf
entity.name.function, support.function#8fcfd0
entity.name.function#8fcfd0
support.function, support.class, support.type#e3b0c0
keyword, storage, keyword.control, storage.modifier#deb07a
keyword#deb07a
comment.documentation#e3b0c0
comment.documentation, comment.block.documentation#caa89f
comment.documentation#caa89f
string, string.quoted, string.template#f3a0a0
string#f3a0a0
comment, punctuation.definition.comment#a0a0cf
comment#a0a0cf
comment, punctuation.definition.comment#a0a0cf
comment#a0a0cf
invalid#efd5c5
invalid#f498c0
invalid.illegal#f498c0
editor.wordHighlightStrongBackground#efd5c5
invalid.deprecated#d09950
invalid.illegal#f498c0
editorCursor.foreground
editorGutter.background#efd5c5
editorGroup.border#635850
editorGroupHeader.tabsBackground
statusBar.noFolderBackground#8f8886
statusBar.background, statusBar.foreground#fedeff
editorLineNumber.activeForeground#deb07a
editorLineNumber.activeForeground#deb07a
editorLineNumber.foreground#8f8886
invalid.deprecated
editor.selectionHighlightBackground#efd5c5
editor.selectionBackground, editor.selectionForeground
editor.findMatchBackground#efd5c5

Shiki preview

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

Loading...