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#33393b
  • activityBar.foreground#cccccc
  • activityBar.inactiveForeground#888888
  • editor.background#2e3436
  • editor.findMatchBackground#c0c000
  • editor.foreground#eeeeec
  • editor.selectionBackground#555753
  • editorCursor.background#fce94f
  • editorCursor.foreground#eeeeec
  • editorGutter.background#2e3436
  • editorLineNumber.activeForeground#B3B3B3
  • editorLineNumber.foreground#B3B3B3
  • inlineChatInput.background#32383a
  • inlineChatInput.foreground#ffffff
  • inlineChatInput.placeholderForeground#b4fa70
  • input.background#32383a
  • input.foreground#ffffff
  • input.placeholderForeground#b4fa70
  • panel.background#2e3436
  • sideBar.background#33393b
  • statusBar.background#d3d7cf
  • statusBar.foreground#2e3436
  • statusBar.noFolderBackground#555753
  • statusBarItem.remoteBackground#d3d7cf
  • statusBarItem.remoteForeground#2e3436

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#b4fa70
comment#666666
markup.heading#fce94f
entity.name.tag#B3B3B3
entity.name.tag#8cc4ff
comment#73d216
markup.underline.link#e9b96e
keyword#8cc4ff
markup.list#B3B3B3
invalid#ADD8E6
keyword#ff4b4b
keyword#e9b96e
invalid.deprecated#fcaf3e
invalid.deprecated
markup.inserted#cceecc
markup.inserted#ddffdd
comment#e9b96e
comment#b4fa70
comment#B0E2FF
comment#B4EEB4
comment#B0E2FF
keyword#e9b96e
gitDecoration.addedResourceForeground#8cc4ff
gitDecoration.untrackedResourceForeground#e9b96e
gitDecoration.ignoredResourceForeground#73d216
gitDecoration.renamedResourceForeground#e9b96e
gitDecoration.modifiedResourceForeground#fcaf3e
breadcrumb.foreground, tree.tableColumnHeader.foreground#e9b2e3
explorer.fileForeground#eeeeec
explorer.directoryForeground#fce94f
comment.documentation#696969
editorSuggestWidget.highlightForeground#AFEEEE
editorSuggestWidget.selectedBackground
editorSuggestWidget.background
invalid#FF0000
invalid#fce94f
invalid#8cc4ff
invalid#8cc4ff
invalid#8ae234
invalid, invalid.deprecated#fcaf3e
invalid#ff4b4b
invalid.deprecated#fcaf3e
invalid#ff4b4b
invalid#88090B
invalid.deprecated#ff4b4b
invalid#ff4b4b
invalid.deprecated#F3EA98
invalid#FC5C94
entity.name.type#b4fa70
variable#FFA500
entity.name.function#4D4DDDDDDDDD
constant#FF1493
string#FFA500
comment.documentation#73d216
diffEditor.insertedTextBackground
diffEditor.removedTextBackground
invalid#FF0000
entity.name.function
diff.insertedTextBackground
diff.removedTextBackground
meta.diff.header.file
meta.diff.header
invalid.deprecated#ff4b4b
invalid.deprecated#fcaf3e
entity.name.function#fcaf3e
invalid.deprecated#ff4b4b
string#FFFFE0
invalid.deprecated#fcaf3e
invalid#ff4b4b
invalid.deprecated#fcaf3e
invalid#ff4b4b
variable#ADD8E6
variable#ADD8E6
comment#CCCCCC
comment
comment.documentation#32CD32
editor.findMatchBackground
editor.findMatchHighlightBackground
editor.findMatchBackground, editor.findMatchHighlightBackground#eeeeec
string.regexp#e9b96e
meta.preprocessor, keyword.control.import#e090d7
invalid.deprecated#ff4b4b
invalid.deprecated#ff4b4b
constant, constant.language, support.constant#e9b2e3
constant#e9b2e3
storage.type, support.type, entity.name.type#8cc4ff
entity.name.type#8cc4ff
variable#fcaf3e
variable, variable.other#fcaf3e
variable#fcaf3e
entity.name.function#fce94f
entity.name.function, support.function#fce94f
entity.name.function#fce94f
support.function, support.class, support.type#e090d7
keyword, storage, keyword.control, storage.modifier#b4fa70
keyword#b4fa70
comment.documentation#e9b2e3
comment.documentation, comment.block.documentation#e9b96e
comment.documentation#e9b96e
string, string.quoted, string.template#e9b96e
string#e9b96e
comment, punctuation.definition.comment#73d216
comment#73d216
comment, punctuation.definition.comment#73d216
comment#73d216
invalid#2e3436
invalid
invalid.illegal#FFFFFF
editor.wordHighlightStrongBackground
invalid.deprecated#fcaf3e
invalid.illegal#ff4b4b
editorCursor.foreground
editorGutter.background
editorGroupHeader.tabsBackground
statusBar.noFolderBackground#eeeeec
statusBar.background, statusBar.foreground#2e3436
editorLineNumber.activeForeground
editorLineNumber.activeForeground#B3B3B3
editorLineNumber.foreground#B3B3B3
invalid.deprecated
editor.selectionHighlightBackground
editor.selectionBackground, editor.selectionForeground
editor.findMatchBackground#2e3436

Shiki preview

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

Loading...