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#2d2e35
  • activityBar.foreground#cccccc
  • activityBar.inactiveForeground#888888
  • editor.background#292A30
  • editor.findMatchBackground#5DD8FF
  • editor.foreground#FFFFFF
  • editor.selectionBackground#3e3f44
  • editorCursor.background#5DD8FF
  • editorCursor.foreground#FFFFFF
  • editorGroup.border#161616
  • editorGutter.background#292A30
  • editorLineNumber.activeForeground#FD8F3F
  • editorLineNumber.foreground#3f4040
  • inlineChatInput.background#2c2d34
  • inlineChatInput.foreground#FFFFFF
  • inlineChatInput.placeholderForeground#5DD8FF
  • input.background#2c2d34
  • input.foreground#FFFFFF
  • input.placeholderForeground#5DD8FF
  • panel.background#292A30
  • sideBar.background#2d2e35
  • statusBar.background#191a1c
  • statusBar.foreground#ffffff
  • statusBar.noFolderBackground#292A30
  • statusBarItem.remoteBackground#191a1c
  • statusBarItem.remoteForeground#ffffff

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#FC5FA3
comment#6C7986
markup.heading#5DD8FF
entity.name.tag#FD8F3F
entity.name.tag#FC5FA3
comment#6C7986
markup.underline.link#D0A8FF
keyword#5DD8FF
markup.fenced_code, markup.inline.raw
markup.list#FC6A5D
invalid#FC6A5D
keyword#D0BF68
keyword#FC6A5D
invalid.deprecated#D0BF68
invalid.deprecated
markup.inserted#67B7A4
markup.inserted#529283
comment#A167E6
comment#FC5FA3
comment#FD8F3F
comment#67B7A4
comment#D0A8FF
keyword#8abeb7
gitDecoration.addedResourceForeground#67B7A4
gitDecoration.untrackedResourceForeground#808b96
gitDecoration.ignoredResourceForeground#6C7986
gitDecoration.renamedResourceForeground#808b96
gitDecoration.modifiedResourceForeground#A167E6
breadcrumb.foreground, tree.tableColumnHeader.foreground#FC6A5D
explorer.fileForeground#FFFFFF
explorer.directoryForeground#FFFFFF
comment.documentation#696969
editorSuggestWidget.highlightForeground#5DD8FF
editorSuggestWidget.selectedBackground
editorSuggestWidget.background#FFFFFF
invalid#FF0000
invalid#D0A8FF
invalid#5DD8FF
invalid#5DD8FF
invalid#67B7A4
invalid, invalid.deprecated#D0BF68
invalid#FC6A5D
invalid.deprecated#D0BF68
invalid#FC6A5D
invalid#FC6A5D
invalid.deprecated#D0BF68
invalid#FC6A5D
invalid.deprecated#D0BF68
invalid#FC6A5D
entity.name.type#FC5FA3
variable#FFA500
entity.name.function#4D4DDDDDDDDD
constant#FF1493
string#FFA500
comment.documentation#6C7986
diffEditor.insertedTextBackground#67B7A4
diffEditor.removedTextBackground#FC6A5D
invalid#FF0000
entity.name.function#8abeb7
diff.insertedTextBackground#67B7A4
diff.removedTextBackground#FC6A5D
meta.diff.header.file#5DD8FF
meta.diff.header#8abeb7
invalid.deprecated#FC6A5D
invalid.deprecated#D0BF68
entity.name.function#41A1C0
invalid.deprecated#D0BF68
string#FFFFE0
invalid.deprecated#D0BF68
invalid#FC6A5D
invalid.deprecated#D0BF68
invalid#FC6A5D
variable#67B7A4
variable#D0A8FF
variable#6C7986
comment#6C7986
comment#FFFFFF
comment.documentation#67B7A4
editor.findMatchBackground#67B7A4
editor.findMatchHighlightBackground#ffffff
editor.findMatchBackground, editor.findMatchHighlightBackground#ffffff
string.regexp#FD8F3F
string.regexp#FD8F3F
string.regexp#FC6A5D
meta.preprocessor, keyword.control.import#FD8F3F
invalid.deprecated#D0BF68
invalid.deprecated#D0BF68
constant, constant.language, support.constant#A167E6
constant#A167E6
storage.type, support.type, entity.name.type#5DD8FF
entity.name.type#5DD8FF
variable#41A1C0
variable, variable.other#41A1C0
variable#41A1C0
entity.name.function#D0A8FF
entity.name.function, support.function#D0A8FF
entity.name.function#D0A8FF
support.function, support.class, support.type#9EF1DD
keyword, storage, keyword.control, storage.modifier#FC5FA3
keyword#FC5FA3
comment.documentation#A167E6
comment.documentation, comment.block.documentation#808b96
comment.documentation#808b96
string, string.quoted, string.template#FC6A5D
string#FC6A5D
comment, punctuation.definition.comment#6C7986
comment#6C7986
comment, punctuation.definition.comment#6C7986
comment#6C7986
invalid#0d0d0d
invalid
invalid.illegal#0d0d0d
editor.wordHighlightStrongBackground#FC6A5D
invalid.deprecated#D0BF68
invalid.illegal#FC6A5D
editorCursor.foreground
editorGutter.background#3f4040
editorGroup.border#161616
editorGroupHeader.tabsBackground#ffffff
statusBar.noFolderBackground#6C7986
statusBar.background, statusBar.foreground#ffffff
editorLineNumber.activeForeground
editorLineNumber.activeForeground#FD8F3F
editorLineNumber.foreground#3f4040
invalid.deprecated
editor.selectionHighlightBackground
editor.selectionBackground, editor.selectionForeground
editor.findMatchBackground#0d0d0d

Shiki preview

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

Loading...