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#131313
  • activityBar.foreground#cccccc
  • activityBar.inactiveForeground#888888
  • editor.background#111111
  • editor.findMatchBackground#4f3f9a
  • editor.foreground#cfdfd5
  • editor.selectionBackground#3a3027
  • editorCursor.background#35f038
  • editorCursor.foreground#cfdfd5
  • editorGroup.border#525959
  • editorGutter.background#111111
  • editorLineNumber.activeForeground#00c089
  • editorLineNumber.foreground#808f80
  • inlineChatInput.background#121212
  • inlineChatInput.foreground#cfdfd5
  • inlineChatInput.placeholderForeground#5dc0aa
  • input.background#121212
  • input.foreground#cfdfd5
  • input.placeholderForeground#5dc0aa
  • panel.background#111111
  • sideBar.background#131313
  • statusBar.background#00552f
  • statusBar.foreground#d0ffe0
  • statusBar.noFolderBackground#303230
  • statusBarItem.remoteBackground#00552f
  • statusBarItem.remoteForeground#d0ffe0

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#b7a07f
comment#caa5bf
entity.name.tag#808f80
entity.name.tag#7fcfdf
comment#b7a07f
markup.underline.link#8fcfaf
keyword#808f80
markup.fenced_code, markup.inline.raw
markup.list#808f80
invalid#ef6560
keyword#cfc04f
keyword#00c089
invalid.deprecated#cfc04f
invalid.deprecated
markup.inserted#a0e0a0
markup.inserted#a0e0a0
comment#b7a07f
comment#e490df
comment#b7a07f
comment#00c089
comment#78afff
comment#00c089
keyword#00c089
gitDecoration.addedResourceForeground#3fb83f
gitDecoration.untrackedResourceForeground#3fb83f
gitDecoration.ignoredResourceForeground#808f80
gitDecoration.modifiedResourceForeground#cfc04f
breadcrumb.foreground, tree.tableColumnHeader.foreground#00c089
explorer.fileForeground#cfdfd5
explorer.directoryForeground#00c089
comment.documentation#696969
editorSuggestWidget.highlightForeground#00c089
editorSuggestWidget.selectedBackground
editorSuggestWidget.background
invalid#FF0000
invalid#7fc500
invalid#7fcfdf
invalid#7fcfdf
invalid#3fb83f
invalid, invalid.deprecated#cfc04f
invalid#ef6560
invalid.deprecated#cfc04f
invalid#ef6560
invalid#ef6560
invalid.deprecated#cfc04f
invalid#ffa9bf
invalid.deprecated#F3EA98
invalid#FC5C94
entity.name.type#00c089
variable#78afff
entity.name.function#7fc500
constant#37aff6
string#af9fff
comment.documentation#808f80
diffEditor.insertedTextBackground#a0e0a0
diffEditor.removedTextBackground#ffbfbf
invalid#ef6560
entity.name.function
diff.insertedTextBackground#a0e0a0
diff.removedTextBackground#ffbfbf
invalid.deprecated#ef6560
invalid.deprecated#cfc04f
entity.name.function#cfc04f
invalid.deprecated#cfc04f
string#af9fff
invalid.deprecated#cfc04f
invalid#ef6560
invalid.deprecated#cfc04f
invalid#ef6560
variable#78afff
variable#808f80
comment#b7a07f
comment#b7a07f
comment.documentation#7fc07f
entity.name.function#cfc04f
editor.findMatchBackground#cfdfd5
editor.findMatchHighlightBackground#cfdfd5
editor.findMatchBackground, editor.findMatchHighlightBackground#cfdfd5
string.regexp#3fb83f
string.regexp#d38faf
string.regexp#af9fff
meta.preprocessor, keyword.control.import#5dc0aa
invalid.deprecated#cfc04f
invalid.deprecated#cfc04f
constant, constant.language, support.constant#37aff6
constant#37aff6
storage.type, support.type, entity.name.type#7fcfdf
entity.name.type#7fcfdf
variable#6ab4cf
variable, variable.other#78afff
variable#78afff
entity.name.function#7fc07f
entity.name.function, support.function#7fc500
entity.name.function#7fc500
support.function, support.class, support.type#3fb83f
keyword, storage, keyword.control, storage.modifier#00c089
keyword#00c089
comment.documentation#caa5bf
comment.documentation, comment.block.documentation#7fc07f
comment.documentation#7fc07f
string, string.quoted, string.template#af9fff
string#af9fff
comment, punctuation.definition.comment#b7a07f
comment#b7a07f
comment, punctuation.definition.comment#b7a07f
comment#b7a07f
invalid#cfdfd5
invalid#ef6560
invalid.illegal#ef6560
editor.wordHighlightStrongBackground#cfdfd5
invalid.deprecated#cfc04f
invalid.illegal#ef6560
editorCursor.foreground
editorGutter.background#cfdfd5
editorGroup.border#525959
editorGroupHeader.tabsBackground
statusBar.noFolderBackground#808f80
statusBar.background, statusBar.foreground#d0ffe0
editorLineNumber.activeForeground#00c089
editorLineNumber.activeForeground#00c089
editorLineNumber.foreground#808f80
invalid.deprecated
editor.selectionHighlightBackground#cfdfd5
editor.selectionBackground, editor.selectionForeground
editor.findMatchBackground#cfdfd5

Shiki preview

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

Loading...