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#e6e0e0
  • activityBar.foreground#333333
  • activityBar.inactiveForeground#666666
  • editor.background#fff9f9
  • editor.findMatchBackground#8fcfff
  • editor.foreground#1a1a1a
  • editor.selectionBackground#dadadf
  • editorCursor.background#bb0000
  • editorCursor.foreground#1a1a1a
  • editorGroup.border#adadad
  • editorGutter.background#fff9f9
  • editorLineNumber.activeForeground#2070af
  • editorLineNumber.foreground#756275
  • inlineChatInput.background#e0dbdb
  • inlineChatInput.foreground#1a1a1a
  • inlineChatInput.placeholderForeground#2070af
  • input.background#e0dbdb
  • input.foreground#1a1a1a
  • input.placeholderForeground#2070af
  • panel.background#fff9f9
  • sideBar.background#e6e0e0
  • statusBar.background#ff99aa
  • statusBar.foreground#1a0a0f
  • statusBar.noFolderBackground#ddd9d9
  • statusBarItem.remoteBackground#ff99aa
  • statusBarItem.remoteForeground#1a0a0f

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#92454f
comment#7f4580
entity.name.tag#756275
entity.name.tag#2f5faf
comment#92454f
markup.underline.link#194f90
keyword#756275
markup.fenced_code, markup.inline.raw
markup.list#756275
invalid#dd0000
keyword#aa357f
keyword#aa0010
invalid.deprecated#aa357f
invalid.deprecated
markup.inserted#004840
markup.inserted#004840
comment#92454f
comment#2f5faf
comment#92454f
comment#2070af
comment#aa0010
comment#2070af
keyword#aa0010
gitDecoration.addedResourceForeground#2070af
gitDecoration.untrackedResourceForeground#2070af
gitDecoration.ignoredResourceForeground#756275
gitDecoration.modifiedResourceForeground#aa357f
breadcrumb.foreground, tree.tableColumnHeader.foreground#2070af
explorer.fileForeground#1a1a1a
explorer.directoryForeground#2070af
comment.documentation#696969
editorSuggestWidget.highlightForeground#2070af
editorSuggestWidget.selectedBackground
editorSuggestWidget.background
invalid#FF0000
invalid#af40af
invalid#2f5faf
invalid#2f5faf
invalid#2070af
invalid, invalid.deprecated#aa357f
invalid#dd0000
invalid.deprecated#aa357f
invalid#dd0000
invalid#dd0000
invalid.deprecated#aa357f
invalid#8f0000
invalid.deprecated#F3EA98
invalid#FC5C94
entity.name.type#aa0010
variable#007faa
entity.name.function#af40af
constant#c50f4f
string#2070af
comment.documentation#756275
diffEditor.insertedTextBackground#004840
diffEditor.removedTextBackground#8f1313
invalid#dd0000
entity.name.function
diff.insertedTextBackground#004840
diff.removedTextBackground#8f1313
invalid.deprecated#dd0000
invalid.deprecated#aa357f
entity.name.function#aa357f
invalid.deprecated#aa357f
string#2070af
invalid.deprecated#aa357f
invalid#dd0000
invalid.deprecated#aa357f
invalid#dd0000
variable#007faa
variable#756275
comment#92454f
comment#92454f
comment.documentation#5f6a90
entity.name.function#aa357f
editor.findMatchBackground#1a1a1a
editor.findMatchHighlightBackground#1a1a1a
editor.findMatchBackground, editor.findMatchHighlightBackground#1a1a1a
string.regexp#dd0000
string.regexp#aa357f
string.regexp#2070af
meta.preprocessor, keyword.control.import#af40af
invalid.deprecated#aa357f
invalid.deprecated#aa357f
constant, constant.language, support.constant#c50f4f
constant#c50f4f
storage.type, support.type, entity.name.type#2f5faf
entity.name.type#2f5faf
variable#5f6a90
variable, variable.other#007faa
variable#007faa
entity.name.function#7f4580
entity.name.function, support.function#af40af
entity.name.function#af40af
support.function, support.class, support.type#aa357f
keyword, storage, keyword.control, storage.modifier#aa0010
keyword#aa0010
comment.documentation#7f4580
comment.documentation, comment.block.documentation#5f6a90
comment.documentation#5f6a90
string, string.quoted, string.template#2070af
string#2070af
comment, punctuation.definition.comment#92454f
comment#92454f
comment, punctuation.definition.comment#92454f
comment#92454f
invalid#1a1a1a
invalid#dd0000
invalid.illegal#dd0000
editor.wordHighlightStrongBackground#1a1a1a
invalid.deprecated#aa357f
invalid.illegal#dd0000
editorCursor.foreground
editorGutter.background#1a1a1a
editorGroup.border#adadad
editorGroupHeader.tabsBackground
statusBar.noFolderBackground#756275
statusBar.background, statusBar.foreground#1a0a0f
editorLineNumber.activeForeground#2070af
editorLineNumber.activeForeground#2070af
editorLineNumber.foreground#756275
invalid.deprecated
editor.selectionHighlightBackground#1a1a1a
editor.selectionBackground, editor.selectionForeground
editor.findMatchBackground#1a1a1a

Shiki preview

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

Loading...