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#e6e6e6
  • activityBar.foreground#333333
  • activityBar.inactiveForeground#666666
  • editor.background#ffffff
  • editor.findMatchBackground#ffafbc
  • editor.foreground#000000
  • editor.selectionBackground#bdbdbd
  • editor.selectionForeground#000000
  • editorCursor.background#d00000
  • editorCursor.foreground#000000
  • editorGroup.border#9f9f9f
  • editorGutter.background#f2f2f2
  • editorLineNumber.activeForeground#000000
  • editorLineNumber.foreground#595959
  • inlineChatInput.background#e0e0e0
  • inlineChatInput.foreground#000000
  • inlineChatInput.placeholderForeground#005f5f
  • input.background#e0e0e0
  • input.foreground#000000
  • input.placeholderForeground#005f5f
  • panel.background#ffffff
  • sideBar.background#e6e6e6
  • statusBar.background#afe0f2
  • statusBar.foreground#0f0f0f
  • statusBar.noFolderBackground#e6e6e6
  • statusBarItem.remoteBackground#afe0f2
  • statusBarItem.remoteForeground#0f0f0f

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#702000
comment#702000
entity.name.tag#595959
entity.name.tag#3548cf
comment#702000
markup.underline.link#224960
keyword#595959
markup.fenced_code, markup.inline.raw
markup.list#595959
invalid#b21100
keyword#721045
keyword#a0132f
invalid.deprecated#721045
invalid.deprecated
markup.inserted#005079
markup.inserted#005079
comment#702000
comment#005f5f
comment#702000
comment#005e8b
comment#b21100
comment#005e8b
keyword#a0132f
gitDecoration.addedResourceForeground#005e8b
gitDecoration.untrackedResourceForeground#005e8b
gitDecoration.ignoredResourceForeground#595959
gitDecoration.modifiedResourceForeground#721045
breadcrumb.foreground, tree.tableColumnHeader.foreground#005e8b
explorer.fileForeground#000000
explorer.directoryForeground#005e8b
comment.documentation#696969
editorSuggestWidget.highlightForeground#005e8b
editorSuggestWidget.selectedBackground
editorSuggestWidget.background
invalid#FF0000
invalid#3f578f
invalid#3548cf
invalid#3548cf
invalid#005e8b
invalid, invalid.deprecated#721045
invalid#b21100
invalid.deprecated#000000
invalid#000000
invalid#000000
invalid.deprecated#721045
invalid#8f0000
invalid.deprecated#F3EA98
invalid#FC5C94
entity.name.type#a0132f
variable#005f5f
entity.name.function#3f578f
constant#00663f
string#005e8b
comment.documentation#595959
diffEditor.insertedTextBackground#005079
diffEditor.removedTextBackground#8f1313
invalid#b21100
entity.name.function
diff.insertedTextBackground#005079
diff.removedTextBackground#8f1313
invalid.deprecated#b21100
invalid.deprecated#721045
entity.name.function#721045
invalid.deprecated#721045
string#005e8b
invalid.deprecated#721045
invalid#b21100
invalid.deprecated#721045
invalid#b21100
variable#005f5f
variable#595959
comment#702000
comment#702000
comment.documentation#224960
entity.name.function#b21100
editor.findMatchBackground#000000
editor.findMatchHighlightBackground#000000
editor.findMatchBackground, editor.findMatchHighlightBackground#000000
string.regexp#a60000
string.regexp#721045
string.regexp#005e8b
meta.preprocessor, keyword.control.import#b21100
invalid.deprecated#721045
invalid.deprecated#721045
constant, constant.language, support.constant#00663f
constant#00663f
storage.type, support.type, entity.name.type#3548cf
entity.name.type#3548cf
variable#104860
variable, variable.other#005f5f
variable#005f5f
entity.name.function#4a3a8a
entity.name.function, support.function#3f578f
entity.name.function#3f578f
support.function, support.class, support.type#721045
keyword, storage, keyword.control, storage.modifier#a0132f
keyword#a0132f
comment.documentation#7c318f
comment.documentation, comment.block.documentation#224960
comment.documentation#224960
string, string.quoted, string.template#005e8b
string#005e8b
comment, punctuation.definition.comment#702000
comment#702000
comment, punctuation.definition.comment#702000
comment#702000
invalid#000000
invalid#000000
invalid.illegal#000000
editor.wordHighlightStrongBackground#000000
invalid.deprecated#721045
invalid.illegal#b21100
editorCursor.foreground
editorGutter.background#000000
editorGroup.border#9f9f9f
editorGroupHeader.tabsBackground
statusBar.noFolderBackground#585858
statusBar.background, statusBar.foreground#0f0f0f
editorLineNumber.activeForeground#005e8b
editorLineNumber.activeForeground#000000
editorLineNumber.foreground#595959
invalid.deprecated
editor.selectionHighlightBackground#000000
editor.selectionBackground, editor.selectionForeground#000000
editor.findMatchBackground#000000

Shiki preview

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

Loading...