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#2c2c2c
  • activityBar.foreground#cccccc
  • activityBar.inactiveForeground#888888
  • editor.background#282828
  • editor.findMatchBackground#fabd2f
  • editor.foreground#ebdbb2
  • editor.selectionBackground#504945
  • editorCursor.background#FFFFFF
  • editorCursor.foreground#ebdbb2
  • editorGroup.border#504945
  • editorGutter.background#282828
  • editorLineNumber.activeForeground#fabd2f
  • editorLineNumber.foreground#7c6f64
  • inlineChatInput.background#2b2b2b
  • inlineChatInput.foreground#fff1c4
  • inlineChatInput.placeholderForeground#8ec07c
  • input.background#2b2b2b
  • input.foreground#fff1c4
  • input.placeholderForeground#8ec07c
  • panel.background#282828
  • sideBar.background#2c2c2c
  • statusBar.background#37302f
  • statusBar.foreground#dfd2b8
  • statusBar.noFolderBackground#282828
  • statusBarItem.remoteBackground#37302f
  • statusBarItem.remoteForeground#dfd2b8

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#fb4934
comment#928374
markup.heading#b8bb26
entity.name.tag#ebdbb2
entity.name.tag#fb4934
comment#928374
markup.underline.link#d3869b
keyword#fabd2f
markup.fenced_code, markup.inline.raw
markup.list#928374
invalid#fb4934
keyword#fabd2f
keyword#b8bb26
invalid.deprecated#fabd2f
invalid.deprecated
markup.inserted#9c9e20
markup.inserted#7c7e19
comment#d3869b
comment#fb4934
comment#fe8019
comment#b8bb26
comment#b16286
keyword#8ec07c
gitDecoration.addedResourceForeground#9c9e20
gitDecoration.untrackedResourceForeground#dfd2b8
gitDecoration.ignoredResourceForeground#928374
gitDecoration.renamedResourceForeground#dfd2b8
gitDecoration.modifiedResourceForeground#d3869b
breadcrumb.foreground, tree.tableColumnHeader.foreground#b8bb26
explorer.fileForeground#ebdbb2
explorer.directoryForeground#ebdbb2
comment.documentation#696969
editorSuggestWidget.highlightForeground#8ec07c
editorSuggestWidget.selectedBackground
editorSuggestWidget.background#ebdbb2
invalid#FF0000
invalid#b8bb26
invalid#fabd2f
invalid#fabd2f
invalid#b8bb26
invalid, invalid.deprecated#fabd2f
invalid#fb4934
invalid.deprecated#fabd2f
invalid#fb4934
invalid.deprecated
invalid
invalid#fb4934
invalid.deprecated#fabd2f
invalid#fb4934
invalid.deprecated#fabd2f
invalid#fb4934
entity.name.type#fb4934
variable#FFA500
entity.name.function#4D4DDDDDDDDD
constant#FF1493
string#FFA500
comment.documentation#928374
diffEditor.insertedTextBackground#b8bb26
diffEditor.removedTextBackground#fb4934
invalid#FF0000
entity.name.function#8ec07c
diff.insertedTextBackground#b8bb26
diff.removedTextBackground#fb4934
meta.diff.header.file#83a598
meta.diff.header#8ec07c
invalid.deprecated#fb4934
invalid.deprecated#fabd2f
entity.name.function#83a598
invalid.deprecated#fabd2f
string#FFFFE0
invalid.deprecated#fabd2f
invalid#fb4934
invalid.deprecated#fabd2f
invalid#fb4934
variable#b8bb26
variable#b16286
variable#928374
comment#928374
comment#ebdbb2
comment.documentation#b8bb26
editor.findMatchBackground#b8bb26
editor.findMatchHighlightBackground#0d1011
editor.findMatchBackground, editor.findMatchHighlightBackground#0d1011
string.regexp#ebdbb2
string.regexp#ebdbb2
string.regexp#b8bb26
meta.preprocessor, keyword.control.import#ebdbb2
invalid.deprecated#fabd2f
invalid.deprecated#fabd2f
constant, constant.language, support.constant#d3869b
constant#d3869b
storage.type, support.type, entity.name.type#fabd2f
entity.name.type#fabd2f
variable#83a598
variable, variable.other#83a598
variable#83a598
entity.name.function#b8bb26
entity.name.function, support.function#b8bb26
entity.name.function#b8bb26
support.function, support.class, support.type#fe8019
keyword, storage, keyword.control, storage.modifier#fb4934
keyword#fb4934
comment.documentation#d3869b
comment.documentation, comment.block.documentation#dfd2b8
comment.documentation#dfd2b8
string, string.quoted, string.template#b8bb26
string#b8bb26
comment, punctuation.definition.comment#928374
comment#928374
comment, punctuation.definition.comment#928374
comment#928374
invalid#0d1011
invalid
invalid.illegal
editor.wordHighlightStrongBackground
invalid.deprecated#fabd2f
invalid.illegal#fb4934
editorCursor.foreground
editorGutter.background#665c54
editorGroup.border#504945
editorGroupHeader.tabsBackground#dfd2b8
statusBar.noFolderBackground#665c54
statusBar.background, statusBar.foreground#dfd2b8
editorLineNumber.activeForeground
editorLineNumber.activeForeground#fabd2f
editorLineNumber.foreground#7c6f64
invalid.deprecated
editor.selectionHighlightBackground
editor.selectionBackground, editor.selectionForeground
editor.findMatchBackground#0d1011

Shiki preview

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

Loading...