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#24273d
  • activityBar.foreground#cccccc
  • activityBar.inactiveForeground#888888
  • editor.background#212337
  • editor.findMatchBackground#82aaff
  • editor.foreground#c8d3f5
  • editor.selectionBackground#383e5c
  • editorCursor.background#82aaff
  • editorCursor.foreground#c8d3f5
  • editorGroup.border#161a2a
  • editorGutter.background#1f2033
  • editorLineNumber.activeForeground#c8d3f5
  • editorLineNumber.foreground#444a73
  • inlineChatInput.background#24263b
  • inlineChatInput.foreground#dce8ff
  • inlineChatInput.placeholderForeground#82aaff
  • input.background#24263b
  • input.foreground#dce8ff
  • input.placeholderForeground#82aaff
  • panel.background#212337
  • sideBar.background#24273d
  • statusBar.background#1b1c2b
  • statusBar.foreground#b4c2f0
  • statusBar.noFolderBackground#1d1f31
  • statusBarItem.remoteBackground#1b1c2b
  • statusBarItem.remoteForeground#b4c2f0

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#c099ff
comment#7a88cf
markup.heading#ffc777
entity.name.tag#86e1fc
entity.name.tag#c099ff
comment#7a88cf
markup.underline.link#ff995e
keyword#ffc777
markup.fenced_code, markup.inline.raw
markup.list#ff757f
invalid#ff757f
keyword#ffc777
keyword#c3e88d
invalid.deprecated#ffc777
invalid.deprecated
markup.inserted#77e0c6
markup.inserted#5fb39e
comment#f989d3
comment#c099ff
comment#ff995e
comment#c3e88d
comment#c099ff
keyword#b4f9f8
gitDecoration.addedResourceForeground#77e0c6
gitDecoration.untrackedResourceForeground#9ba5db
gitDecoration.ignoredResourceForeground#7a88cf
gitDecoration.renamedResourceForeground#9ba5db
gitDecoration.modifiedResourceForeground#82aaff
breadcrumb.foreground, tree.tableColumnHeader.foreground#c3e88d
explorer.fileForeground#c8d3f5
explorer.directoryForeground#82aaff
comment.documentation#696969
editorSuggestWidget.highlightForeground#82aaff
editorSuggestWidget.selectedBackground
editorSuggestWidget.background#c8d3f5
invalid#FF0000
invalid#82aaff
invalid#ffc777
invalid#ffc777
invalid#c3e88d
invalid, invalid.deprecated#ffc777
invalid#ff757f
invalid.deprecated#ffc777
invalid#ff757f
invalid#ff757f
invalid.deprecated#ffc777
invalid#ff757f
invalid.deprecated#ffc777
invalid#ff757f
entity.name.type#c099ff
variable#FFA500
entity.name.function#4D4DDDDDDDDD
constant#FF1493
string#FFA500
comment.documentation#7a88cf
diffEditor.insertedTextBackground#c3e88d
diffEditor.removedTextBackground#ff757f
invalid#FF0000
entity.name.function#b4f9f8
diff.insertedTextBackground#c3e88d
diff.removedTextBackground#ff757f
meta.diff.header.file#82aaff
meta.diff.header#b4f9f8
invalid.deprecated#ff757f
invalid.deprecated#ffc777
entity.name.function#ff98a4
invalid.deprecated#ffc777
string#FFFFE0
invalid.deprecated#ffc777
invalid#ff757f
invalid.deprecated#ffc777
invalid#ff757f
variable#c3e88d
variable#c099ff
variable#444a73
comment#444a73
comment#c8d3f5
comment.documentation#c3e88d
editor.findMatchBackground#c3e88d
editor.findMatchHighlightBackground#c8d3f5
editor.findMatchBackground, editor.findMatchHighlightBackground#c8d3f5
string.regexp#86e1fc
string.regexp#86e1fc
string.regexp#c3e88d
meta.preprocessor, keyword.control.import#86e1fc
invalid.deprecated#ffc777
invalid.deprecated#ffc777
constant, constant.language, support.constant#ff995e
constant#ff995e
storage.type, support.type, entity.name.type#ffc777
entity.name.type#ffc777
variable#ff98a4
variable, variable.other#ff98a4
variable#ff98a4
entity.name.function#82aaff
entity.name.function, support.function#82aaff
entity.name.function#82aaff
support.function, support.class, support.type#c099ff
keyword, storage, keyword.control, storage.modifier#c099ff
keyword#c099ff
comment.documentation#ff995e
comment.documentation, comment.block.documentation#9ba5db
comment.documentation#9ba5db
string, string.quoted, string.template#c3e88d
string#c3e88d
comment, punctuation.definition.comment#7a88cf
comment#7a88cf
comment, punctuation.definition.comment#7a88cf
comment#7a88cf
invalid#161a2a
invalid
invalid.illegal#161a2a
editor.wordHighlightStrongBackground#ff757f
invalid.deprecated#ffc777
invalid.illegal#ff757f
editorCursor.foreground
editorGutter.background#2f334d
editorGroup.border#161a2a
editorGroupHeader.tabsBackground#b4c2f0
statusBar.noFolderBackground#7a88cf
statusBar.background, statusBar.foreground#b4c2f0
editorLineNumber.activeForeground
editorLineNumber.activeForeground#c8d3f5
editorLineNumber.foreground#444a73
invalid.deprecated
editor.selectionHighlightBackground
editor.selectionBackground, editor.selectionForeground
editor.findMatchBackground#161a2a

Shiki preview

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

Loading...