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#252525
  • activityBar.foreground#cccccc
  • activityBar.inactiveForeground#888888
  • editor.background#222222
  • editor.findMatchBackground#fce566
  • editor.foreground#f7f1ff
  • editor.selectionBackground#363537
  • editorCursor.background#f7f1ff
  • editorCursor.foreground#f7f1ff
  • editorGroup.border#383838
  • editorGutter.background#222222
  • editorLineNumber.activeForeground#8b888f
  • editorLineNumber.foreground#525053
  • inlineChatInput.background#252525
  • inlineChatInput.foreground#f7f1ff
  • inlineChatInput.placeholderForeground#fce566
  • input.background#252525
  • input.foreground#f7f1ff
  • input.placeholderForeground#fce566
  • panel.background#222222
  • sideBar.background#252525
  • statusBar.background#363537
  • statusBar.foreground#f7f1ff
  • statusBar.noFolderBackground#222222
  • statusBarItem.remoteBackground#363537
  • statusBarItem.remoteForeground#f7f1ff

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#5ad4e6—
comment#69676c—
markup.heading#fce566—
entity.name.tag#fc618d—
entity.name.tag#5ad4e6—
comment#69676c—
markup.underline.link#5ad4e6—
keyword#5ad4e6—
markup.fenced_code, markup.inline.raw——
markup.list#fc618d—
invalid#fc618d—
keyword#fd9353—
keyword#fce566—
invalid.deprecated#fd9353—
invalid.deprecated——
markup.inserted#7bd88f—
markup.inserted#62ac72—
comment#948ae3—
comment#5ad4e6—
comment#fd9353—
comment#7bd88f—
comment#5ad4e6—
keyword#5ad4e6—
gitDecoration.addedResourceForeground#7bd88f—
gitDecoration.untrackedResourceForeground#fd9353—
gitDecoration.ignoredResourceForeground#69676c—
gitDecoration.renamedResourceForeground#fd9353—
gitDecoration.modifiedResourceForeground#948ae3—
breadcrumb.foreground, tree.tableColumnHeader.foreground#fce566—
explorer.fileForeground#f7f1ff—
explorer.directoryForeground#f7f1ff—
comment.documentation#696969—
editorSuggestWidget.highlightForeground#fce566—
editorSuggestWidget.selectedBackground——
editorSuggestWidget.background#f7f1ff—
invalid#FF0000—
invalid#7bd88f—
invalid#5ad4e6—
invalid#5ad4e6—
invalid#7bd88f—
invalid, invalid.deprecated#fd9353—
invalid#fc618d—
invalid.deprecated#fd9353—
invalid#fc618d—
invalid.deprecated——
invalid——
invalid#fc618d—
invalid.deprecated#fd9353—
invalid#fc618d—
invalid.deprecated#fd9353—
invalid#fc618d—
entity.name.type#5ad4e6—
variable#FFA500—
entity.name.function#4D4DDDDDDDDD—
constant#FF1493—
string#FFA500—
comment.documentation#69676c—
diffEditor.insertedTextBackground#7bd88f—
diffEditor.removedTextBackground#fc618d—
invalid#FF0000—
entity.name.function#5ad4e6—
diff.insertedTextBackground#7bd88f—
diff.removedTextBackground#fc618d—
meta.diff.header.file#5ad4e6—
meta.diff.header#5ad4e6—
invalid.deprecated#fc618d—
invalid.deprecated#fd9353—
entity.name.function#f7f1ff—
invalid.deprecated#fd9353—
string#FFFFE0—
invalid.deprecated#fd9353—
invalid#fc618d—
invalid.deprecated#fd9353—
invalid#fc618d—
variable#7bd88f—
variable#5ad4e6—
variable#525053—
comment#525053—
comment#f7f1ff—
comment.documentation#7bd88f—
editor.findMatchBackground#f7f1ff—
editor.findMatchHighlightBackground#f7f1ff—
editor.findMatchBackground, editor.findMatchHighlightBackground#f7f1ff—
string.regexp#fc618d—
string.regexp#fc618d—
string.regexp#fce566—
meta.preprocessor, keyword.control.import#fc618d—
invalid.deprecated#fd9353—
invalid.deprecated#fd9353—
constant, constant.language, support.constant#948ae3—
constant#948ae3—
storage.type, support.type, entity.name.type#5ad4e6—
entity.name.type#5ad4e6—
variable#f7f1ff—
variable, variable.other#f7f1ff—
variable#f7f1ff—
entity.name.function#7bd88f—
entity.name.function, support.function#7bd88f—
entity.name.function#7bd88f—
support.function, support.class, support.type#948ae3—
keyword, storage, keyword.control, storage.modifier#5ad4e6—
keyword#5ad4e6—
comment.documentation#948ae3—
comment.documentation, comment.block.documentation#8e8d90—
comment.documentation#8e8d90—
string, string.quoted, string.template#fce566—
string#fce566—
comment, punctuation.definition.comment#69676c—
comment#69676c—
comment, punctuation.definition.comment#69676c—
comment#69676c—
invalid#131313—
invalid——
invalid.illegal#fc618d—
editor.wordHighlightStrongBackground#7bd88f—
invalid.deprecated#fd9353—
invalid.illegal#fc618d—
editorCursor.foreground——
editorGutter.background#525053—
editorGroup.border#383838—
editorGroupHeader.tabsBackground#f7f1ff—
statusBar.noFolderBackground#f7f1ff—
statusBar.background, statusBar.foreground#f7f1ff—
editorLineNumber.activeForeground——
editorLineNumber.activeForeground#8b888f—
editorLineNumber.foreground#525053—
invalid.deprecated——
editor.selectionHighlightBackground——
editor.selectionBackground, editor.selectionForeground——
editor.findMatchBackground#131313—