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#2b363b
  • activityBar.foreground#cccccc
  • activityBar.inactiveForeground#888888
  • editor.background#273136
  • editor.findMatchBackground#ffed72
  • editor.foreground#f2fffc
  • editor.selectionBackground#3a4449
  • editorCursor.background#f2fffc
  • editorCursor.foreground#f2fffc
  • editorGroup.border#3c454a
  • editorGutter.background#273136
  • editorLineNumber.activeForeground#8b9798
  • editorLineNumber.foreground#545f62
  • inlineChatInput.background#2a353a
  • inlineChatInput.foreground#ffffff
  • inlineChatInput.placeholderForeground#ffed72
  • input.background#2a353a
  • input.foreground#ffffff
  • input.placeholderForeground#ffed72
  • panel.background#273136
  • sideBar.background#2b363b
  • statusBar.background#3a4449
  • statusBar.foreground#f2fffc
  • statusBar.noFolderBackground#273136
  • statusBarItem.remoteBackground#3a4449
  • statusBarItem.remoteForeground#f2fffc

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#7cd5f1—
comment#6b7678—
markup.heading#ffed72—
entity.name.tag#ff6d7e—
entity.name.tag#7cd5f1—
comment#6b7678—
markup.underline.link#7cd5f1—
keyword#7cd5f1—
markup.fenced_code, markup.inline.raw——
markup.list#ff6d7e—
invalid#ff6d7e—
keyword#ffb270—
keyword#ffed72—
invalid.deprecated#ffb270—
invalid.deprecated——
markup.inserted#a2e57b—
markup.inserted#81b762—
comment#baa0f8—
comment#7cd5f1—
comment#ffb270—
comment#a2e57b—
comment#7cd5f1—
keyword#7cd5f1—
gitDecoration.addedResourceForeground#a2e57b—
gitDecoration.untrackedResourceForeground#ffb270—
gitDecoration.ignoredResourceForeground#6b7678—
gitDecoration.renamedResourceForeground#ffb270—
gitDecoration.modifiedResourceForeground#baa0f8—
breadcrumb.foreground, tree.tableColumnHeader.foreground#ffed72—
explorer.fileForeground#f2fffc—
explorer.directoryForeground#f2fffc—
comment.documentation#696969—
editorSuggestWidget.highlightForeground#ffed72—
editorSuggestWidget.selectedBackground——
editorSuggestWidget.background#f2fffc—
invalid#FF0000—
invalid#a2e57b—
invalid#7cd5f1—
invalid#7cd5f1—
invalid#a2e57b—
invalid, invalid.deprecated#ffb270—
invalid#ff6d7e—
invalid.deprecated#ffb270—
invalid#ff6d7e—
invalid.deprecated——
invalid——
invalid#ff6d7e—
invalid.deprecated#ffb270—
invalid#ff6d7e—
invalid.deprecated#ffb270—
invalid#ff6d7e—
entity.name.type#7cd5f1—
variable#FFA500—
entity.name.function#4D4DDDDDDDDD—
constant#FF1493—
string#FFA500—
comment.documentation#6b7678—
diffEditor.insertedTextBackground#a2e57b—
diffEditor.removedTextBackground#ff6d7e—
invalid#FF0000—
entity.name.function#7cd5f1—
diff.insertedTextBackground#a2e57b—
diff.removedTextBackground#ff6d7e—
meta.diff.header.file#7cd5f1—
meta.diff.header#7cd5f1—
invalid.deprecated#ff6d7e—
invalid.deprecated#ffb270—
entity.name.function#f2fffc—
invalid.deprecated#ffb270—
string#FFFFE0—
invalid.deprecated#ffb270—
invalid#ff6d7e—
invalid.deprecated#ffb270—
invalid#ff6d7e—
variable#a2e57b—
variable#7cd5f1—
variable#545f62—
comment#545f62—
comment#f2fffc—
comment.documentation#a2e57b—
editor.findMatchBackground#f2fffc—
editor.findMatchHighlightBackground#f2fffc—
editor.findMatchBackground, editor.findMatchHighlightBackground#f2fffc—
string.regexp#ff6d7e—
string.regexp#ff6d7e—
string.regexp#ffed72—
meta.preprocessor, keyword.control.import#ff6d7e—
invalid.deprecated#ffb270—
invalid.deprecated#ffb270—
constant, constant.language, support.constant#baa0f8—
constant#baa0f8—
storage.type, support.type, entity.name.type#7cd5f1—
entity.name.type#7cd5f1—
variable#f2fffc—
variable, variable.other#f2fffc—
variable#f2fffc—
entity.name.function#a2e57b—
entity.name.function, support.function#a2e57b—
entity.name.function#a2e57b—
support.function, support.class, support.type#baa0f8—
keyword, storage, keyword.control, storage.modifier#7cd5f1—
keyword#7cd5f1—
comment.documentation#baa0f8—
comment.documentation, comment.block.documentation#909899—
comment.documentation#909899—
string, string.quoted, string.template#ffed72—
string#ffed72—
comment, punctuation.definition.comment#6b7678—
comment#6b7678—
comment, punctuation.definition.comment#6b7678—
comment#6b7678—
invalid#131313—
invalid——
invalid.illegal#ff6d7e—
editor.wordHighlightStrongBackground#a2e57b—
invalid.deprecated#ffb270—
invalid.illegal#ff6d7e—
editorCursor.foreground——
editorGutter.background#545f62—
editorGroup.border#3c454a—
editorGroupHeader.tabsBackground#f2fffc—
statusBar.noFolderBackground#f2fffc—
statusBar.background, statusBar.foreground#f2fffc—
editorLineNumber.activeForeground——
editorLineNumber.activeForeground#8b9798—
editorLineNumber.foreground#545f62—
invalid.deprecated——
editor.selectionHighlightBackground——
editor.selectionBackground, editor.selectionForeground——
editor.findMatchBackground#131313—