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#42545e
  • activityBar.foreground#cccccc
  • activityBar.inactiveForeground#888888
  • editor.background#3c4c55
  • editor.findMatchBackground#7FC1CA
  • editor.foreground#c5d4dd
  • editor.selectionBackground#657781
  • editorCursor.background#7FC1CA
  • editorCursor.foreground#c5d4dd
  • editorGroup.border#4f5d65
  • editorGutter.background#3c4c55
  • editorLineNumber.activeForeground#7FC1CA
  • editorLineNumber.foreground#6c808d
  • inlineChatInput.background#41525c
  • inlineChatInput.foreground#ffffff
  • inlineChatInput.placeholderForeground#7FC1CA
  • input.background#41525c
  • input.foreground#ffffff
  • input.placeholderForeground#7FC1CA
  • panel.background#3c4c55
  • sideBar.background#42545e
  • statusBar.background#2f3f48
  • statusBar.foreground#83AFE5
  • statusBar.noFolderBackground#44545d
  • statusBarItem.remoteBackground#2f3f48
  • statusBarItem.remoteForeground#83AFE5

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#9A93E1
comment#899BA6
markup.heading#7FC1CA
entity.name.tag#A8CE93
entity.name.tag#9A93E1
comment#899BA6
markup.underline.link#D18EC2
keyword#A8CE93
markup.fenced_code, markup.inline.raw
markup.list#DF8C8C
invalid#DF8C8C
keyword#DADA93
keyword#7FC1CA
invalid.deprecated#DADA93
invalid.deprecated
markup.inserted#A8CE93
markup.inserted#86a475
comment#9A93E1
comment#9A93E1
comment#F2C38F
comment#A8CE93
comment#D18EC2
keyword#7FC1CA
gitDecoration.addedResourceForeground#A8CE93
gitDecoration.untrackedResourceForeground#94a4ae
gitDecoration.ignoredResourceForeground#899BA6
gitDecoration.renamedResourceForeground#94a4ae
gitDecoration.modifiedResourceForeground#9A93E1
breadcrumb.foreground, tree.tableColumnHeader.foreground#7FC1CA
explorer.fileForeground#c5d4dd
explorer.directoryForeground#c5d4dd
comment.documentation#696969
editorSuggestWidget.highlightForeground#7FC1CA
editorSuggestWidget.selectedBackground#e6eef3
editorSuggestWidget.background#c5d4dd
invalid#FF0000
invalid#83AFE5
invalid#A8CE93
invalid#A8CE93
invalid#A8CE93
invalid, invalid.deprecated#DADA93
invalid#DF8C8C
invalid.deprecated#DADA93
invalid#DF8C8C
invalid#DF8C8C
invalid.deprecated#DADA93
invalid#DF8C8C
invalid.deprecated#DADA93
invalid#DF8C8C
entity.name.type#9A93E1
variable#FFA500
entity.name.function#4D4DDDDDDDDD
constant#FF1493
string#FFA500
comment.documentation#899BA6
diffEditor.insertedTextBackground#A8CE93
diffEditor.removedTextBackground#DF8C8C
invalid#FF0000
entity.name.function#7FC1CA
diff.insertedTextBackground#A8CE93
diff.removedTextBackground#DF8C8C
meta.diff.header.file#83AFE5
meta.diff.header#7FC1CA
invalid.deprecated#DF8C8C
invalid.deprecated#DADA93
entity.name.function#DF8C8C
invalid.deprecated#DADA93
string#FFFFE0
invalid.deprecated#DADA93
invalid#DF8C8C
invalid.deprecated#DADA93
invalid#DF8C8C
variable#A8CE93
variable#D18EC2
variable#899BA6
comment#899BA6
comment#c5d4dd
comment.documentation#A8CE93
editor.findMatchBackground#A8CE93
editor.findMatchHighlightBackground#e6eef3
editor.findMatchBackground, editor.findMatchHighlightBackground#e6eef3
string.regexp#A8CE93
string.regexp#A8CE93
string.regexp#7FC1CA
meta.preprocessor, keyword.control.import#A8CE93
invalid.deprecated#DADA93
invalid.deprecated#DADA93
constant, constant.language, support.constant#7FC1CA
constant#7FC1CA
storage.type, support.type, entity.name.type#A8CE93
entity.name.type#A8CE93
variable#DF8C8C
variable, variable.other#DF8C8C
variable#DF8C8C
entity.name.function#83AFE5
entity.name.function, support.function#83AFE5
entity.name.function#83AFE5
support.function, support.class, support.type#83AFE5
keyword, storage, keyword.control, storage.modifier#9A93E1
keyword#9A93E1
comment.documentation#7FC1CA
comment.documentation, comment.block.documentation#94a4ae
comment.documentation#94a4ae
string, string.quoted, string.template#7FC1CA
string#7FC1CA
comment, punctuation.definition.comment#899BA6
comment#899BA6
comment, punctuation.definition.comment#899BA6
comment#899BA6
invalid#0d0f11
invalid
invalid.illegal#855454
editor.wordHighlightStrongBackground#DF8C8C
invalid.deprecated#DADA93
invalid.illegal#DF8C8C
editorCursor.foreground
editorGutter.background#6c808d
editorGroup.border#4f5d65
editorGroupHeader.tabsBackground#83AFE5
statusBar.noFolderBackground#8e989d
statusBar.background, statusBar.foreground#83AFE5
editorLineNumber.activeForeground
editorLineNumber.activeForeground#7FC1CA
editorLineNumber.foreground#6c808d
invalid.deprecated
editor.selectionHighlightBackground
editor.selectionBackground, editor.selectionForeground
editor.findMatchBackground#0d0f11

Shiki preview

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

Loading...