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

Shiki preview

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

Loading...