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#b2e4dc
  • editor.foreground#000000
  • editor.selectionBackground#bdbdbd
  • editor.selectionForeground#000000
  • editorCursor.background#0000ff
  • editorCursor.foreground#000000
  • editorGroup.border#9f9f9f
  • editorGutter.background#f2f2f2
  • editorLineNumber.activeForeground#000000
  • editorLineNumber.foreground#595959
  • inlineChatInput.background#e0e0e0
  • inlineChatInput.foreground#000000
  • inlineChatInput.placeholderForeground#0031a9
  • input.background#e0e0e0
  • input.foreground#000000
  • input.placeholderForeground#0031a9
  • panel.background#ffffff
  • sideBar.background#e6e6e6
  • statusBar.background#d0d6ff
  • statusBar.foreground#0f0f0f
  • statusBar.noFolderBackground#e6e6e6
  • statusBarItem.remoteBackground#d0d6ff
  • statusBarItem.remoteForeground#0f0f0f

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#77492f
comment#624416
entity.name.tag#595959
entity.name.tag#005f5f
comment#77492f
markup.underline.link#193668
keyword#595959
markup.fenced_code, markup.inline.raw
markup.list#595959
invalid#973300
keyword#695500
keyword#0000b0
invalid.deprecated#695500
invalid.deprecated
markup.inserted#303099
markup.inserted#303099
comment#77492f
comment#005e8b
comment#77492f
comment#3548cf
comment#973300
comment#3548cf
keyword#0000b0
gitDecoration.addedResourceForeground#0031a9
gitDecoration.untrackedResourceForeground#0031a9
gitDecoration.ignoredResourceForeground#595959
gitDecoration.modifiedResourceForeground#695500
breadcrumb.foreground, tree.tableColumnHeader.foreground#3548cf
explorer.fileForeground#000000
explorer.directoryForeground#3548cf
comment.documentation#696969
editorSuggestWidget.highlightForeground#3548cf
editorSuggestWidget.selectedBackground
editorSuggestWidget.background
invalid#FF0000
invalid#973300
invalid#005f5f
invalid#005f5f
invalid#0031a9
invalid, invalid.deprecated#695500
invalid#973300
invalid.deprecated#000000
invalid#000000
invalid#000000
invalid.deprecated#695500
invalid#603a00
invalid.deprecated#F3EA98
invalid#FC5C94
entity.name.type#0000b0
variable#005e8b
entity.name.function#973300
constant#003497
string#3548cf
comment.documentation#595959
diffEditor.insertedTextBackground#303099
diffEditor.removedTextBackground#553d00
invalid#973300
entity.name.function
diff.insertedTextBackground#303099
diff.removedTextBackground#553d00
invalid.deprecated#973300
invalid.deprecated#695500
entity.name.function#695500
invalid.deprecated#695500
string#3548cf
invalid.deprecated#695500
invalid#973300
invalid.deprecated#695500
invalid#973300
variable#005e8b
variable#595959
comment#77492f
comment#77492f
comment.documentation#2a5045
entity.name.function#973300
editor.findMatchBackground#000000
editor.findMatchHighlightBackground#000000
editor.findMatchBackground, editor.findMatchHighlightBackground#000000
string.regexp#77492f
string.regexp#0000b0
string.regexp#3548cf
meta.preprocessor, keyword.control.import#531ab6
invalid.deprecated#695500
invalid.deprecated#695500
constant, constant.language, support.constant#003497
constant#003497
storage.type, support.type, entity.name.type#005f5f
entity.name.type#005f5f
variable#4a3a8a
variable, variable.other#005e8b
variable#005e8b
entity.name.function#70550f
entity.name.function, support.function#973300
entity.name.function#973300
support.function, support.class, support.type#695500
keyword, storage, keyword.control, storage.modifier#0000b0
keyword#0000b0
comment.documentation#7c318f
comment.documentation, comment.block.documentation#2a5045
comment.documentation#2a5045
string, string.quoted, string.template#3548cf
string#3548cf
comment, punctuation.definition.comment#77492f
comment#77492f
comment, punctuation.definition.comment#77492f
comment#77492f
invalid#000000
invalid#000000
invalid.illegal#000000
editor.wordHighlightStrongBackground#000000
invalid.deprecated#695500
invalid.illegal#973300
editorCursor.foreground
editorGutter.background#000000
editorGroup.border#9f9f9f
editorGroupHeader.tabsBackground
statusBar.noFolderBackground#585858
statusBar.background, statusBar.foreground#0f0f0f
editorLineNumber.activeForeground#3548cf
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...