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#2c3039
  • activityBar.foreground#cccccc
  • activityBar.inactiveForeground#888888
  • editor.background#282c34
  • editor.findMatchBackground#51afef
  • editor.foreground#bbc2cf
  • editor.selectionBackground#42444a
  • editorCursor.background#51afef
  • editorCursor.foreground#bbc2cf
  • editorGroup.border#191b20
  • editorGutter.background#282c34
  • editorLineNumber.activeForeground#bbc2cf
  • editorLineNumber.foreground#3f444a
  • inlineChatInput.background#2b3038
  • inlineChatInput.foreground#ffffff
  • inlineChatInput.placeholderForeground#51afef
  • input.background#2b3038
  • input.foreground#ffffff
  • input.placeholderForeground#51afef
  • panel.background#282c34
  • sideBar.background#2c3039
  • statusBar.background#1d2026
  • statusBar.foreground#bbc2cf
  • statusBar.noFolderBackground#21242b
  • statusBarItem.remoteBackground#1d2026
  • statusBarItem.remoteForeground#bbc2cf

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#51afef
comment#5B6268
markup.heading#ff6c6b
entity.name.tag#5B6268
entity.name.tag#51afef
comment#5B6268
markup.underline.link#c678dd
keyword#ECBE7B
markup.fenced_code, markup.inline.raw
markup.list#ff6c6b
invalid#ff6c6b
keyword#ECBE7B
keyword#98be65
invalid.deprecated#ECBE7B
invalid.deprecated
markup.inserted#98be65
markup.inserted#799850
comment#a9a1e1
comment#51afef
comment#da8548
comment#98be65
comment#c678dd
keyword#46D9FF
gitDecoration.addedResourceForeground#98be65
gitDecoration.untrackedResourceForeground#83898d
gitDecoration.ignoredResourceForeground#5B6268
gitDecoration.renamedResourceForeground#83898d
gitDecoration.modifiedResourceForeground#a9a1e1
breadcrumb.foreground, tree.tableColumnHeader.foreground#98be65
explorer.fileForeground#bbc2cf
explorer.directoryForeground#bbc2cf
comment.documentation#696969
editorSuggestWidget.highlightForeground#51afef
editorSuggestWidget.selectedBackground
editorSuggestWidget.background#bbc2cf
invalid#FF0000
invalid#c678dd
invalid#ECBE7B
invalid#ECBE7B
invalid#98be65
invalid, invalid.deprecated#ECBE7B
invalid#ff6c6b
invalid.deprecated#ECBE7B
invalid#ff6c6b
invalid#ff6c6b
invalid.deprecated#ECBE7B
invalid#ff6c6b
invalid.deprecated#ECBE7B
invalid#ff6c6b
entity.name.type#51afef
variable#FFA500
entity.name.function#4D4DDDDDDDDD
constant#FF1493
string#FFA500
comment.documentation#5B6268
diffEditor.insertedTextBackground#98be65
diffEditor.removedTextBackground#ff6c6b
invalid#FF0000
entity.name.function#46D9FF
diff.insertedTextBackground#98be65
diff.removedTextBackground#ff6c6b
meta.diff.header.file#51afef
meta.diff.header#46D9FF
invalid.deprecated#ff6c6b
invalid.deprecated#ECBE7B
entity.name.function#dcaeea
invalid.deprecated#ECBE7B
string#FFFFE0
invalid.deprecated#ECBE7B
invalid#ff6c6b
invalid.deprecated#ECBE7B
invalid#ff6c6b
variable#98be65
variable#c678dd
variable#3f444a
comment#3f444a
comment#bbc2cf
comment.documentation#98be65
editor.findMatchBackground#98be65
editor.findMatchHighlightBackground#DFDFDF
editor.findMatchBackground, editor.findMatchHighlightBackground#DFDFDF
string.regexp#51afef
string.regexp#51afef
string.regexp#98be65
meta.preprocessor, keyword.control.import#51afef
invalid.deprecated#ECBE7B
invalid.deprecated#ECBE7B
constant, constant.language, support.constant#a9a1e1
constant#a9a1e1
storage.type, support.type, entity.name.type#ECBE7B
entity.name.type#ECBE7B
variable#dcaeea
variable, variable.other#dcaeea
variable#dcaeea
entity.name.function#c678dd
entity.name.function, support.function#c678dd
entity.name.function#c678dd
support.function, support.class, support.type#c678dd
keyword, storage, keyword.control, storage.modifier#51afef
keyword#51afef
comment.documentation#a9a1e1
comment.documentation, comment.block.documentation#83898d
comment.documentation#83898d
string, string.quoted, string.template#98be65
string#98be65
comment, punctuation.definition.comment#5B6268
comment#5B6268
comment, punctuation.definition.comment#5B6268
comment#5B6268
invalid#1B2229
invalid
invalid.illegal#1B2229
editor.wordHighlightStrongBackground#ff6c6b
invalid.deprecated#ECBE7B
invalid.illegal#ff6c6b
editorCursor.foreground
editorGutter.background#3f444a
editorGroup.border#191b20
editorGroupHeader.tabsBackground#bbc2cf
statusBar.noFolderBackground#5B6268
statusBar.background, statusBar.foreground#bbc2cf
editorLineNumber.activeForeground
editorLineNumber.activeForeground#bbc2cf
editorLineNumber.foreground#3f444a
invalid.deprecated
editor.selectionHighlightBackground
editor.selectionBackground, editor.selectionForeground
editor.findMatchBackground#1B2229

Shiki preview

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

Loading...