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#292034
  • activityBar.foreground#cccccc
  • activityBar.inactiveForeground#888888
  • editor.background#251D2F
  • editor.findMatchBackground#9783b1
  • editor.foreground#c4b8d3
  • editor.selectionBackground#3c3842
  • editorCursor.background#9783b1
  • editorCursor.foreground#c4b8d3
  • editorGroup.border#110d15
  • editorGutter.background#251D2F
  • editorLineNumber.activeForeground#9783b1
  • editorLineNumber.foreground#503F65
  • inlineChatInput.background#281f33
  • inlineChatInput.foreground#d8cae8
  • inlineChatInput.placeholderForeground#9783b1
  • input.background#281f33
  • input.foreground#d8cae8
  • input.placeholderForeground#9783b1
  • panel.background#251D2F
  • sideBar.background#292034
  • statusBar.background#17121d
  • statusBar.foreground#c4b8d3
  • statusBar.noFolderBackground#1A1521
  • statusBarItem.remoteBackground#17121d
  • statusBarItem.remoteForeground#c4b8d3

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#9783b1
comment#503F65
markup.heading#ff6c6b
entity.name.tag#503F65
entity.name.tag#9783b1
comment#503F65
markup.underline.link#7A619A
keyword#1abc9c
markup.fenced_code, markup.inline.raw
markup.list#ff6c6b
invalid#ff6c6b
keyword#ECBE7B
keyword#98be65
invalid.deprecated#ECBE7B
invalid.deprecated
markup.inserted#98be65
markup.inserted#799850
comment#9783b1
comment#9783b1
comment#da8548
comment#98be65
comment#7A619A
keyword#7dcfff
gitDecoration.addedResourceForeground#98be65
gitDecoration.untrackedResourceForeground#7b6f8b
gitDecoration.ignoredResourceForeground#503F65
gitDecoration.renamedResourceForeground#7b6f8b
gitDecoration.modifiedResourceForeground#9783b1
breadcrumb.foreground, tree.tableColumnHeader.foreground#1abc9c
explorer.fileForeground#c4b8d3
explorer.directoryForeground#c4b8d3
comment.documentation#696969
editorSuggestWidget.highlightForeground#9783b1
editorSuggestWidget.selectedBackground
editorSuggestWidget.background#c4b8d3
invalid#FF0000
invalid#51afef
invalid#1abc9c
invalid#1abc9c
invalid#98be65
invalid, invalid.deprecated#ECBE7B
invalid#ff6c6b
invalid.deprecated#ECBE7B
invalid#ff6c6b
invalid#ff6c6b
invalid.deprecated#ECBE7B
invalid#ff6c6b
invalid.deprecated#ECBE7B
invalid#ff6c6b
entity.name.type#9783b1
variable#FFA500
entity.name.function#4D4DDDDDDDDD
constant#FF1493
string#FFA500
comment.documentation#503F65
diffEditor.insertedTextBackground#98be65
diffEditor.removedTextBackground#ff6c6b
invalid#FF0000
entity.name.function#7dcfff
diff.insertedTextBackground#98be65
diff.removedTextBackground#ff6c6b
meta.diff.header.file#51afef
meta.diff.header#7dcfff
invalid.deprecated#ff6c6b
invalid.deprecated#ECBE7B
entity.name.function#b1e2ff
invalid.deprecated#ECBE7B
string#FFFFE0
invalid.deprecated#ECBE7B
invalid#ff6c6b
invalid.deprecated#ECBE7B
invalid#ff6c6b
variable#98be65
variable#7A619A
variable#342942
comment#342942
comment#c4b8d3
comment.documentation#98be65
editor.findMatchBackground#98be65
editor.findMatchHighlightBackground#D3CADE
editor.findMatchBackground, editor.findMatchHighlightBackground#D3CADE
string.regexp#1abc9c
string.regexp#1abc9c
string.regexp#98be65
meta.preprocessor, keyword.control.import#1abc9c
invalid.deprecated#ECBE7B
invalid.deprecated#ECBE7B
constant, constant.language, support.constant#da8548
constant#da8548
storage.type, support.type, entity.name.type#1abc9c
entity.name.type#1abc9c
variable#b1e2ff
variable, variable.other#b1e2ff
variable#b1e2ff
entity.name.function#51afef
entity.name.function, support.function#51afef
entity.name.function#51afef
support.function, support.class, support.type#7A619A
keyword, storage, keyword.control, storage.modifier#9783b1
keyword#9783b1
comment.documentation#da8548
comment.documentation, comment.block.documentation#7b6f8b
comment.documentation#7b6f8b
string, string.quoted, string.template#98be65
string#98be65
comment, punctuation.definition.comment#503F65
comment#503F65
comment, punctuation.definition.comment#503F65
comment#503F65
invalid#0F0C13
invalid
invalid.illegal#0F0C13
editor.wordHighlightStrongBackground#ff6c6b
invalid.deprecated#ECBE7B
invalid.illegal#ff6c6b
editorCursor.foreground
editorGutter.background#342942
editorGroup.border#110d15
editorGroupHeader.tabsBackground#c4b8d3
statusBar.noFolderBackground#503F65
statusBar.background, statusBar.foreground#c4b8d3
editorLineNumber.activeForeground
editorLineNumber.activeForeground#9783b1
editorLineNumber.foreground#503F65
invalid.deprecated
editor.selectionHighlightBackground
editor.selectionBackground, editor.selectionForeground
editor.findMatchBackground#0F0C13

Shiki preview

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

Loading...