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#191919
  • activityBar.foreground#cccccc
  • activityBar.inactiveForeground#888888
  • editor.background#171717
  • editor.findMatchBackground#8AC6F2
  • editor.foreground#F6F3E8
  • editor.selectionBackground#434343
  • editorCursor.background#8AC6F2
  • editorCursor.foreground#F6F3E8
  • editorGroup.border#3c3847
  • editorGutter.background#171717
  • editorLineNumber.activeForeground#F6F3E8
  • editorLineNumber.foreground#656868
  • inlineChatInput.background#191919
  • inlineChatInput.foreground#F6F3E8
  • inlineChatInput.placeholderForeground#8AC6F2
  • input.background#191919
  • input.foreground#F6F3E8
  • input.placeholderForeground#8AC6F2
  • panel.background#171717
  • sideBar.background#191919
  • statusBar.background#272727
  • statusBar.foreground#F6F3E8
  • statusBar.noFolderBackground#2a2a2a
  • statusBarItem.remoteBackground#272727
  • statusBarItem.remoteForeground#F6F3E8

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#8AC6F2
comment#656868
markup.heading#E2434C
entity.name.tag#635770
entity.name.tag#8AC6F2
comment#656868
markup.underline.link#E18Cbb
keyword#C7B299
markup.fenced_code, markup.inline.raw
markup.list#E2434C
invalid#E2434C
keyword#E0D063
keyword#86B187
invalid.deprecated#E0D063
invalid.deprecated
markup.inserted#86B187
markup.inserted#6b8d6c
comment#BF93C3
comment#8AC6F2
comment#EA9847
comment#86B187
comment#E18Cbb
keyword#00FFFF
gitDecoration.addedResourceForeground#86B187
gitDecoration.untrackedResourceForeground#8b8d8d
gitDecoration.ignoredResourceForeground#656868
gitDecoration.renamedResourceForeground#8b8d8d
gitDecoration.modifiedResourceForeground#E0D063
breadcrumb.foreground, tree.tableColumnHeader.foreground#8AC6F2
explorer.fileForeground#DFDFDF
explorer.directoryForeground#656868
comment.documentation#696969
editorSuggestWidget.highlightForeground#8AC6F2
editorSuggestWidget.selectedBackground
editorSuggestWidget.background#F6F3E8
invalid#FF0000
invalid#EA9847
invalid#C7B299
invalid#C7B299
invalid#86B187
invalid, invalid.deprecated#E0D063
invalid#E2434C
invalid.deprecated#E0D063
invalid#E2434C
invalid#E2434C
invalid.deprecated#E0D063
invalid#E2434C
invalid.deprecated#E0D063
invalid#E2434C
entity.name.type#8AC6F2
variable#FFA500
entity.name.function#4D4DDDDDDDDD
constant#FF1493
string#FFA500
comment.documentation#656868
diffEditor.insertedTextBackground#86B187
diffEditor.removedTextBackground#E2434C
invalid#FF0000
entity.name.function#00FFFF
diff.insertedTextBackground#86B187
diff.removedTextBackground#E2434C
meta.diff.header.file#8AC6F2
meta.diff.header#00FFFF
invalid.deprecated#E2434C
invalid.deprecated#E0D063
entity.name.function#BF93C3
invalid.deprecated#E0D063
string#FFFFE0
invalid.deprecated#E0D063
invalid#E2434C
invalid.deprecated#E0D063
invalid#E2434C
variable#86B187
variable#E18Cbb
variable#433F4f
comment#433F4f
comment#F6F3E8
comment.documentation#86B187
editor.findMatchBackground#86B187
editor.findMatchHighlightBackground#DFDFDF
editor.findMatchBackground, editor.findMatchHighlightBackground#DFDFDF
string.regexp#C7B299
string.regexp#C7B299
string.regexp#86B187
meta.preprocessor, keyword.control.import#C7B299
invalid.deprecated#E0D063
invalid.deprecated#E0D063
constant, constant.language, support.constant#635770
constant#635770
storage.type, support.type, entity.name.type#C7B299
entity.name.type#C7B299
variable#BF93C3
variable, variable.other#BF93C3
variable#BF93C3
entity.name.function#EA9847
entity.name.function, support.function#EA9847
entity.name.function#EA9847
support.function, support.class, support.type#F28B86
keyword, storage, keyword.control, storage.modifier#8AC6F2
keyword#8AC6F2
comment.documentation#635770
comment.documentation, comment.block.documentation#8b8d8d
comment.documentation#8b8d8d
string, string.quoted, string.template#86B187
string#86B187
comment, punctuation.definition.comment#656868
comment#656868
comment, punctuation.definition.comment#656868
comment#656868
invalid#1D1D1D
invalid
invalid.illegal#1D1D1D
editor.wordHighlightStrongBackground#E2434C
invalid.deprecated#E0D063
invalid.illegal#E2434C
editorCursor.foreground
editorGutter.background#433F4f
editorGroup.border#3c3847
editorGroupHeader.tabsBackground#F6F3E8
statusBar.noFolderBackground#635770
statusBar.background, statusBar.foreground#F6F3E8
editorLineNumber.activeForeground
editorLineNumber.activeForeground#F6F3E8
editorLineNumber.foreground#656868
invalid.deprecated
editor.selectionHighlightBackground
editor.selectionBackground, editor.selectionForeground
editor.findMatchBackground#1D1D1D

Shiki preview

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

Loading...