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#e2dfd7
  • activityBar.foreground#333333
  • activityBar.inactiveForeground#666666
  • editor.background#fbf8ef
  • editor.findMatchBackground#d3d3e7
  • editor.foreground#655370
  • editor.selectionBackground#d3d3e7
  • editorCursor.background#100a14
  • editorCursor.foreground#655370
  • editorGroup.border#b3b9be
  • editorGutter.background#efeae9
  • editorLineNumber.activeForeground#655370
  • editorLineNumber.foreground#a8a8bf
  • inlineChatInput.background#dddad2
  • inlineChatInput.foreground#332a38
  • inlineChatInput.placeholderForeground#3a81c3
  • input.background#dddad2
  • input.foreground#332a38
  • input.placeholderForeground#3a81c3
  • panel.background#fbf8ef
  • sideBar.background#e2dfd7
  • statusBar.background#e7e5eb
  • statusBar.foreground#655370
  • statusBar.noFolderBackground#fbf8ef
  • statusBarItem.remoteBackground#e7e5eb
  • statusBarItem.remoteForeground#655370

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#3a81c3
comment#715ab1
markup.heading#6c3163
entity.name.tag#a094a2
entity.name.tag#ba2f59
comment#2aa1ae
markup.underline.link#2d9574
keyword#ba2f59
markup.list#a094a2
invalid#ADD8E6
keyword#dc752f
keyword#2d9574
invalid.deprecated#dc752f
invalid.deprecated
markup.inserted#22aa22
markup.inserted#22aa22
comment#2d9574
comment#3a81c3
comment#3a81c3
comment#2d9574
comment#3a81c3
keyword#2d9574
gitDecoration.addedResourceForeground#67b11d
gitDecoration.untrackedResourceForeground#2d9574
gitDecoration.ignoredResourceForeground#b1951d
gitDecoration.renamedResourceForeground#da8b55
gitDecoration.modifiedResourceForeground#3a81c3
breadcrumb.foreground, tree.tableColumnHeader.foreground#4e3163
explorer.fileForeground#655370
explorer.directoryForeground#6c3163
comment.documentation#696969
editorSuggestWidget.highlightForeground#3a81c3
editorSuggestWidget.selectedBackground#655370
editorSuggestWidget.background#8c799f
invalid#fbf8ef
invalid#3a81c3
invalid#ba2f59
invalid#ba2f59
invalid#6c3163
invalid#42ae2c
invalid, invalid.deprecated#dc752f
invalid#e0211d
invalid.deprecated#dc752f
invalid#e0211d
invalid#88090B
invalid.deprecated#dc752f
invalid#e0211d
invalid.deprecated#dc752f
invalid#e0211d
entity.name.type#3a81c3
variable#B22222
entity.name.function#00008B
constant#FF1493
string#2d9574
comment.documentation#2d9574
diffEditor.insertedTextBackground
diffEditor.removedTextBackground
invalid#FF0000
entity.name.function#6c3163
diff.insertedTextBackground
diff.removedTextBackground
meta.diff.header.file#655370
meta.diff.header#6c3163
invalid.deprecated#e0211d
invalid.deprecated#dc752f
entity.name.function#715ab1
invalid.deprecated#dc752f
string#00008B
invalid.deprecated#dc752f
invalid#e0211d
invalid.deprecated#dc752f
invalid#e0211d
variable#0000FF
variable#0000FF
comment#00008B
comment
comment.documentation#006400
entity.name.function#ba2f59
editor.findMatchBackground#ba2f59
editor.findMatchHighlightBackground
editor.findMatchBackground, editor.findMatchHighlightBackground#fbf8ef
string.regexp#2d9574
meta.preprocessor, keyword.control.import#6c3163
invalid.deprecated#dc752f
invalid.deprecated#dc752f
constant, constant.language, support.constant#4e3163
constant#4e3163
storage.type, support.type, entity.name.type#ba2f59
entity.name.type#ba2f59
variable#715ab1
variable, variable.other#715ab1
variable#715ab1
entity.name.function#6c3163
entity.name.function, support.function#6c3163
entity.name.function#6c3163
support.function, support.class, support.type#3a81c3
keyword, storage, keyword.control, storage.modifier#3a81c3
keyword#3a81c3
comment.documentation#4e3163
comment.documentation, comment.block.documentation#da8b55
comment.documentation#da8b55
string, string.quoted, string.template#2d9574
string#2d9574
comment, punctuation.definition.comment#2aa1ae
comment#2aa1ae
comment, punctuation.definition.comment#2aa1ae
comment#2aa1ae
invalid#655370
invalid
invalid.illegal#e0211d
editor.wordHighlightStrongBackground#ba2f59
invalid.deprecated#dc752f
invalid.illegal#e0211d
editorCursor.foreground
editorGutter.background#655370
editorGroup.border#b3b9be
editorGroupHeader.tabsBackground
statusBar.noFolderBackground#655370
statusBar.background, statusBar.foreground#655370
editorLineNumber.activeForeground
editorLineNumber.activeForeground#655370
editorLineNumber.foreground#a8a8bf
invalid.deprecated
editor.selectionHighlightBackground
editor.selectionBackground, editor.selectionForeground
editor.findMatchBackground#655370

Shiki preview

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

Loading...