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#374556
  • activityBar.foreground#cccccc
  • activityBar.inactiveForeground#888888
  • editor.background#323f4e
  • editor.findMatchBackground#87DFEB
  • editor.foreground#f8f8f2
  • editor.selectionBackground#1e262d
  • editorCursor.background#87DFEB
  • editorCursor.foreground#f8f8f2
  • editorGroup.border#28323e
  • editorGutter.background#323f4e
  • editorLineNumber.activeForeground#92b6f4
  • editorLineNumber.foreground#3d4c5f
  • inlineChatInput.background#364454
  • inlineChatInput.foreground#ffffff
  • inlineChatInput.placeholderForeground#87DFEB
  • input.background#364454
  • input.foreground#ffffff
  • input.placeholderForeground#87DFEB
  • panel.background#323f4e
  • sideBar.background#374556
  • statusBar.background#323f4e
  • statusBar.foreground#f8f8f2
  • statusBar.noFolderBackground#2a3542
  • statusBarItem.remoteBackground#323f4e
  • statusBarItem.remoteForeground#f8f8f2

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#f1fa8c
comment#56687e
markup.heading#f48fb1
entity.name.tag#92b6f4
entity.name.tag#f1fa8c
comment#56687e
markup.underline.link#BD99FF
keyword#c574dd
markup.fenced_code, markup.inline.raw#a1efd3
markup.list#f48fb1
invalid#f2a272
keyword#f1fa8c
keyword#f48fb1
invalid.deprecated#f1fa8c
invalid.deprecated
markup.inserted#92b6f4
markup.inserted#7491c3
comment#8897f4
comment#f1fa8c
comment#f2a272
comment#53e2ae
comment#BD99FF
keyword#79e6f3
gitDecoration.addedResourceForeground#92b6f4
gitDecoration.untrackedResourceForeground#56687e
gitDecoration.ignoredResourceForeground#56687e
gitDecoration.renamedResourceForeground#56687e
gitDecoration.modifiedResourceForeground#8897f4
breadcrumb.foreground, tree.tableColumnHeader.foreground#f48fb1
explorer.fileForeground#f8f8f2
explorer.directoryForeground#f8f8f2
comment.documentation#696969
editorSuggestWidget.highlightForeground#8897f4
editorSuggestWidget.selectedBackground#f48fb1
editorSuggestWidget.background#f8f8f2
invalid#FF0000
invalid#87DFEB
invalid#79e6f3
invalid#79e6f3
invalid#53e2ae
invalid, invalid.deprecated#f1fa8c
invalid#f2a272
invalid.deprecated#f1fa8c
invalid#f2a272
invalid#f2a272
invalid.deprecated#f1fa8c
invalid#f2a272
invalid.deprecated#f1fa8c
invalid#f2a272
entity.name.type#f1fa8c
variable#FFA500
entity.name.function#4D4DDDDDDDDD
constant#FF1493
string#FFA500
comment.documentation#56687e
diffEditor.insertedTextBackground#53e2ae
diffEditor.removedTextBackground#f48fb1
invalid#FF0000
entity.name.function#79e6f3
diff.insertedTextBackground#53e2ae
diff.removedTextBackground#f48fb1
meta.diff.header.file#92b6f4
meta.diff.header#79e6f3
invalid.deprecated#f2a272
invalid.deprecated#f1fa8c
entity.name.function#e7c7f1
invalid.deprecated#f1fa8c
string#FFFFE0
invalid.deprecated#f1fa8c
invalid#f2a272
invalid.deprecated#f1fa8c
invalid#f2a272
variable#53e2ae
variable#BD99FF
variable#3d4c5f
comment#3d4c5f
comment#f8f8f2
comment.documentation#53e2ae
editor.findMatchBackground#53e2ae
editor.findMatchHighlightBackground#ebedef
editor.findMatchBackground, editor.findMatchHighlightBackground#ebedef
string.regexp#92b6f4
string.regexp#92b6f4
string.regexp#f48fb1
meta.preprocessor, keyword.control.import#92b6f4
invalid.deprecated#f1fa8c
invalid.deprecated#f1fa8c
constant, constant.language, support.constant#985EFF
constant#985EFF
storage.type, support.type, entity.name.type#79e6f3
entity.name.type#79e6f3
variable#e7c7f1
variable, variable.other#e7c7f1
variable#e7c7f1
entity.name.function#87DFEB
entity.name.function, support.function#87DFEB
entity.name.function#87DFEB
support.function, support.class, support.type#f1fa8c
keyword, storage, keyword.control, storage.modifier#f1fa8c
keyword#f1fa8c
comment.documentation#985EFF
comment.documentation, comment.block.documentation#56687e
comment.documentation#56687e
string, string.quoted, string.template#f48fb1
string#f48fb1
comment, punctuation.definition.comment#56687e
comment#56687e
comment, punctuation.definition.comment#56687e
comment#56687e
invalid#181e26
invalid
invalid.illegal#2a3542
editor.wordHighlightStrongBackground#f48fb1
invalid.deprecated#f1fa8c
invalid.illegal#f2a272
editorCursor.foreground
editorGutter.background#323f4e
editorGroup.border#28323e
editorGroupHeader.tabsBackground#f8f8f2
statusBar.noFolderBackground#56687e
statusBar.background, statusBar.foreground#f8f8f2
editorLineNumber.activeForeground
editorLineNumber.activeForeground#92b6f4
editorLineNumber.foreground#3d4c5f
invalid.deprecated
editor.selectionHighlightBackground
editor.selectionBackground, editor.selectionForeground
editor.findMatchBackground#181e26

Shiki preview

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

Loading...