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#1d1e2a
  • activityBar.foreground#cccccc
  • activityBar.inactiveForeground#888888
  • editor.background#1a1b26
  • editor.findMatchBackground#b4f9f8
  • editor.foreground#a9b1d6
  • editor.selectionBackground#414868
  • editorCursor.background#b4f9f8
  • editorCursor.foreground#a9b1d6
  • editorGroup.border#252630
  • editorGutter.background#191a25
  • editorLineNumber.activeForeground#c0caf5
  • editorLineNumber.foreground#51587a
  • inlineChatInput.background#1c1d29
  • inlineChatInput.foreground#bac3eb
  • inlineChatInput.placeholderForeground#b4f9f8
  • input.background#1c1d29
  • input.foreground#bac3eb
  • input.placeholderForeground#b4f9f8
  • panel.background#1a1b26
  • sideBar.background#1d1e2a
  • statusBar.background#161620
  • statusBar.foreground#a9b1d6
  • statusBar.noFolderBackground#171822
  • statusBarItem.remoteBackground#161620
  • statusBarItem.remoteForeground#a9b1d6

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#bb9af7
comment#51587a
markup.heading#7dcfff
entity.name.tag#9aa5ce
entity.name.tag#bb9af7
comment#51587a
markup.underline.link#bb9af7
keyword#c0caf5
markup.fenced_code, markup.inline.raw#7dcfff
markup.list#f7768e
invalid#f7768e
keyword#e0af68
keyword#9ece6a
invalid.deprecated#e0af68
invalid.deprecated
markup.inserted#73daca
markup.inserted#5caea1
comment#9aa5ce
comment#bb9af7
comment#ff9e64
comment#73daca
comment#bb9af7
keyword#b4f9f8
gitDecoration.addedResourceForeground#73daca
gitDecoration.untrackedResourceForeground#7c819b
gitDecoration.ignoredResourceForeground#51587a
gitDecoration.renamedResourceForeground#e0af68
gitDecoration.modifiedResourceForeground#73daca
breadcrumb.foreground, tree.tableColumnHeader.foreground#bb9af7
explorer.fileForeground#a9b1d6
explorer.directoryForeground#c0caf5
comment.documentation#696969
editorSuggestWidget.highlightForeground#b4f9f8
editorSuggestWidget.selectedBackground
editorSuggestWidget.background#a9b1d6
invalid#FF0000
invalid#7aa2f7
invalid#c0caf5
invalid#c0caf5
invalid#b4f9f8
invalid#73daca
invalid, invalid.deprecated#e0af68
invalid#f7768e
invalid.deprecated#e0af68
invalid#f7768e
invalid#f7768e
invalid.deprecated#e0af68
invalid#f7768e
invalid.deprecated#e0af68
invalid#f7768e
entity.name.type#bb9af7
variable#FFA500
entity.name.function#4D4DDDDDDDDD
constant#FF1493
string#FFA500
comment.documentation#51587a
diffEditor.insertedTextBackground#73daca
diffEditor.removedTextBackground#f7768e
invalid#FF0000
entity.name.function#b4f9f8
diff.insertedTextBackground#73daca
diff.removedTextBackground#f7768e
meta.diff.header.file#7aa2f7
meta.diff.header#b4f9f8
invalid.deprecated#f7768e
invalid.deprecated#e0af68
entity.name.function#c0caf5
invalid.deprecated#e0af68
string#FFFFE0
invalid.deprecated#e0af68
invalid#f7768e
invalid.deprecated#e0af68
invalid#f7768e
variable#73daca
variable#bb9af7
variable#8189af
comment#8189af
comment#a9b1d6
comment.documentation#73daca
editor.findMatchBackground#73daca
editor.findMatchHighlightBackground#c0caf5
editor.findMatchBackground, editor.findMatchHighlightBackground#c0caf5
string.regexp#7dcfff
string.regexp#7dcfff
string.regexp#9ece6a
meta.preprocessor, keyword.control.import#7dcfff
invalid.deprecated#e0af68
invalid.deprecated#e0af68
constant, constant.language, support.constant#ff9e64
constant#ff9e64
storage.type, support.type, entity.name.type#c0caf5
entity.name.type#c0caf5
variable#c0caf5
variable, variable.other#c0caf5
variable#c0caf5
entity.name.function#7aa2f7
entity.name.function, support.function#7aa2f7
entity.name.function#7aa2f7
support.function, support.class, support.type#f7768e
keyword, storage, keyword.control, storage.modifier#bb9af7
keyword#bb9af7
comment.documentation#ff9e64
comment.documentation, comment.block.documentation#7c819b
comment.documentation#7c819b
string, string.quoted, string.template#9ece6a
string#9ece6a
comment, punctuation.definition.comment#51587a
comment#51587a
comment, punctuation.definition.comment#51587a
comment#51587a
invalid#414868
invalid
invalid.illegal#414868
editor.wordHighlightStrongBackground#f7768e
invalid.deprecated#e0af68
invalid.illegal#f7768e
editorCursor.foreground
editorGutter.background#8189af
editorGroup.border#252630
editorGroupHeader.tabsBackground
statusBar.noFolderBackground#9099c0
statusBar.background, statusBar.foreground
editorLineNumber.activeForeground
editorLineNumber.activeForeground#c0caf5
editorLineNumber.foreground#51587a
invalid.deprecated
editor.selectionHighlightBackground
editor.selectionBackground, editor.selectionForeground
editor.findMatchBackground#414868

Shiki preview

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

Loading...