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#2d2f33
  • activityBar.foreground#cccccc
  • activityBar.inactiveForeground#888888
  • editor.background#292b2e
  • editor.findMatchBackground#444155
  • editor.foreground#b2b2b2
  • editor.selectionBackground#444155
  • editorCursor.background#e3dedd
  • editorCursor.foreground#b2b2b2
  • editorGroup.border#5d4d7a
  • editorGutter.background#212026
  • editorLineNumber.activeForeground#b2b2b2
  • editorLineNumber.foreground#44505c
  • inlineChatInput.background#2c2e32
  • inlineChatInput.foreground#ffffff
  • inlineChatInput.placeholderForeground#4f97d7
  • input.background#2c2e32
  • input.foreground#ffffff
  • input.placeholderForeground#4f97d7
  • panel.background#292b2e
  • sideBar.background#2d2f33
  • statusBar.background#222226
  • statusBar.foreground#b2b2b2
  • statusBar.noFolderBackground#292b2e
  • statusBarItem.remoteBackground#222226
  • statusBarItem.remoteForeground#b2b2b2

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#4f97d7
comment#7590db
markup.heading#bc6ec5
entity.name.tag#686868
entity.name.tag#ce537a
comment#2aa1ae
markup.underline.link#2d9574
keyword#ce537a
markup.list#686868
invalid#ADD8E6
keyword#dc752f
keyword#2d9574
invalid.deprecated#dc752f
invalid.deprecated
markup.inserted#cceecc
markup.inserted#ddffdd
comment#2d9574
comment#4f97d7
comment#4f97d7
comment#2d9574
comment#4f97d7
keyword#2d9574
gitDecoration.addedResourceForeground#67b11d
gitDecoration.untrackedResourceForeground#2d9574
gitDecoration.ignoredResourceForeground#b1951d
gitDecoration.renamedResourceForeground#9f8766
gitDecoration.modifiedResourceForeground#4f97d7
breadcrumb.foreground, tree.tableColumnHeader.foreground#a45bad
explorer.fileForeground#b2b2b2
explorer.directoryForeground#bc6ec5
comment.documentation#696969
editorSuggestWidget.highlightForeground#4f97d7
editorSuggestWidget.selectedBackground#b2b2b2
editorSuggestWidget.background#9a9aba
invalid#292b2e
invalid#4f97d7
invalid#ce537a
invalid#ce537a
invalid#bc6ec5
invalid#86dc2f
invalid, invalid.deprecated#dc752f
invalid#e0211d
invalid.deprecated#dc752f
invalid#e0211d
invalid#88090B
invalid.deprecated#dc752f
invalid#e0211d
invalid.deprecated#dc752f
invalid#e0211d
entity.name.type#4f97d7
variable#FFA500
entity.name.function#4D4DDDDDDDDD
constant#FF1493
string#2d9574
comment.documentation#2d9574
diffEditor.insertedTextBackground
diffEditor.removedTextBackground
invalid#FF0000
entity.name.function#bc6ec5
diff.insertedTextBackground
diff.removedTextBackground
meta.diff.header.file#cbc1d5
meta.diff.header#bc6ec5
invalid.deprecated#e0211d
invalid.deprecated#dc752f
entity.name.function#7590db
invalid.deprecated#dc752f
string#FFFFE0
invalid.deprecated#dc752f
invalid#e0211d
invalid.deprecated#dc752f
invalid#e0211d
variable#ADD8E6
variable#ADD8E6
comment#CCCCCC
comment
comment.documentation#32CD32
entity.name.function#86dc2f
editor.findMatchBackground#86dc2f
editor.findMatchHighlightBackground
editor.findMatchBackground, editor.findMatchHighlightBackground#292b2e
string.regexp#2d9574
meta.preprocessor, keyword.control.import#bc6ec5
invalid.deprecated#dc752f
invalid.deprecated#dc752f
constant, constant.language, support.constant#a45bad
constant#a45bad
storage.type, support.type, entity.name.type#ce537a
entity.name.type#ce537a
variable#7590db
variable, variable.other#7590db
variable#7590db
entity.name.function#bc6ec5
entity.name.function, support.function#bc6ec5
entity.name.function#bc6ec5
support.function, support.class, support.type#4f97d7
keyword, storage, keyword.control, storage.modifier#4f97d7
keyword#4f97d7
comment.documentation#a45bad
comment.documentation, comment.block.documentation#9f8766
comment.documentation#9f8766
string, string.quoted, string.template#2d9574
string#2d9574
comment, punctuation.definition.comment#2aa1ae
comment#2aa1ae
comment, punctuation.definition.comment#2aa1ae
comment#2aa1ae
invalid#b2b2b2
invalid
invalid.illegal#e0211d
editor.wordHighlightStrongBackground#86dc2f
invalid.deprecated#dc752f
invalid.illegal#e0211d
editorCursor.foreground
editorGutter.background#b2b2b2
editorGroup.border#5d4d7a
editorGroupHeader.tabsBackground
statusBar.noFolderBackground#b2b2b2
statusBar.background, statusBar.foreground#b2b2b2
editorLineNumber.activeForeground
editorLineNumber.activeForeground#b2b2b2
editorLineNumber.foreground#44505c
invalid.deprecated
editor.selectionHighlightBackground
editor.selectionBackground, editor.selectionForeground
editor.findMatchBackground#b2b2b2

Shiki preview

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

Loading...