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#e6e6e6
  • activityBar.foreground#333333
  • activityBar.inactiveForeground#666666
  • editor.background#ffffff
  • editor.findMatchBackground#444444
  • editor.foreground#282a2e
  • editor.selectionBackground#e7e7e7
  • editorCursor.background#444444
  • editorCursor.foreground#282a2e
  • editorGroup.border#c5c8c6
  • editorGutter.background#ffffff
  • editorLineNumber.activeForeground#444444
  • editorLineNumber.foreground#cccccc
  • inlineChatInput.background#e0e0e0
  • inlineChatInput.foreground#242629
  • inlineChatInput.placeholderForeground#444444
  • input.background#e0e0e0
  • input.foreground#242629
  • input.placeholderForeground#444444
  • panel.background#ffffff
  • sideBar.background#e6e6e6
  • statusBar.background#cecece
  • statusBar.foreground#282a2e
  • statusBar.noFolderBackground#dadada
  • statusBarItem.remoteBackground#cecece
  • statusBarItem.remoteForeground#282a2e

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#282a2e
comment#c5c8c6
markup.heading#444444
entity.name.tag#282a2e
entity.name.tag#282a2e
comment#c5c8c6
markup.underline.link#282a2e
keyword#282a2e
markup.fenced_code, markup.inline.raw
markup.list#282a2e
keyword#969896
invalid.deprecated
markup.inserted#282a2e
markup.inserted#989899
comment#282a2e
comment#282a2e
comment#282a2e
comment#282a2e
comment#282a2e
keyword#282a2e
gitDecoration.addedResourceForeground#bebfc0
gitDecoration.untrackedResourceForeground#c5c8c6
gitDecoration.ignoredResourceForeground#c5c8c6
gitDecoration.renamedResourceForeground#c5c8c6
gitDecoration.modifiedResourceForeground#282a2e
breadcrumb.foreground, tree.tableColumnHeader.foreground#969896
explorer.fileForeground#282a2e
explorer.directoryForeground#282a2e
comment.documentation#696969
editorSuggestWidget.highlightForeground#444444
editorSuggestWidget.selectedBackground
editorSuggestWidget.background#282a2e
invalid#FF0000
invalid#282a2e
invalid#282a2e
invalid#282a2e
invalid#282a2e
invalid.deprecated#444444
invalid#a91012
invalid#a91012
entity.name.type#282a2e
variable#B22222
entity.name.function#00008B
constant#FF1493
string#CD0000
comment.documentation#c5c8c6
diffEditor.insertedTextBackground#282a2e
diffEditor.removedTextBackground#282a2e
invalid#FF0000
entity.name.function#282a2e
diff.insertedTextBackground#282a2e
diff.removedTextBackground#282a2e
meta.diff.header.file#282a2e
meta.diff.header#282a2e
entity.name.function#969896
invalid.deprecated#444444
string#00008B
variable#282a2e
variable#282a2e
variable#282a2e
comment#282a2e
comment#282a2e
comment.documentation#282a2e
editor.findMatchBackground#282a2e
editor.findMatchHighlightBackground#969896
editor.findMatchBackground, editor.findMatchHighlightBackground#969896
string.regexp#282a2e
string.regexp#282a2e
string.regexp#969896
meta.preprocessor, keyword.control.import#282a2e
constant, constant.language, support.constant#969896
constant#969896
storage.type, support.type, entity.name.type#282a2e
entity.name.type#282a2e
variable#969896
variable, variable.other#969896
variable#969896
entity.name.function#282a2e
entity.name.function, support.function#282a2e
entity.name.function#282a2e
support.function, support.class, support.type#969896
keyword, storage, keyword.control, storage.modifier#282a2e
keyword#282a2e
comment.documentation#969896
comment.documentation, comment.block.documentation#c5c8c6
comment.documentation#c5c8c6
string, string.quoted, string.template#969896
string#969896
comment, punctuation.definition.comment#c5c8c6
comment#c5c8c6
comment, punctuation.definition.comment#c5c8c6
comment#c5c8c6
invalid#969896
invalid
invalid.illegal#969896
editor.wordHighlightStrongBackground#282a2e
editorCursor.foreground
editorGutter.background#e7e7e7
editorGroup.border#c5c8c6
editorGroupHeader.tabsBackground#282a2e
statusBar.noFolderBackground#8d8d8d
statusBar.background, statusBar.foreground#282a2e
editorLineNumber.activeForeground
editorLineNumber.activeForeground#444444
editorLineNumber.foreground#cccccc
invalid.deprecated
editor.selectionHighlightBackground
editor.selectionBackground, editor.selectionForeground
editor.findMatchBackground#969896

Shiki preview

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

Loading...