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#e3e6e6
  • activityBar.foreground#333333
  • activityBar.inactiveForeground#666666
  • editor.background#fcffff
  • editor.findMatchBackground#eab5ff
  • editor.foreground#232323
  • editor.selectionBackground#d4eaf3
  • editorCursor.background#0055bb
  • editorCursor.foreground#232323
  • editorGroup.border#b0b7c0
  • editorGutter.background#fcffff
  • editorLineNumber.activeForeground#4244ef
  • editorLineNumber.foreground#66657f
  • inlineChatInput.background#dee0e0
  • inlineChatInput.foreground#232323
  • inlineChatInput.placeholderForeground#1f6fbf
  • input.background#dee0e0
  • input.foreground#232323
  • input.placeholderForeground#1f6fbf
  • panel.background#fcffff
  • sideBar.background#e3e6e6
  • statusBar.background#9ad0ff
  • statusBar.foreground#051524
  • statusBar.noFolderBackground#d7dbdb
  • statusBarItem.remoteBackground#9ad0ff
  • statusBarItem.remoteForeground#051524

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#7a5f2f
comment#605f9f
entity.name.tag#66657f
entity.name.tag#7f5ae0
comment#7a5f2f
markup.underline.link#204f9a
keyword#66657f
markup.fenced_code, markup.inline.raw
markup.list#66657f
invalid#c42d2f
keyword#996c4f
keyword#004fc0
invalid.deprecated#996c4f
invalid.deprecated
markup.inserted#004840
markup.inserted#004840
comment#7a5f2f
comment#c0469a
comment#7a5f2f
comment#4244ef
comment#00845f
comment#4244ef
keyword#004fc0
gitDecoration.addedResourceForeground#008a00
gitDecoration.untrackedResourceForeground#008a00
gitDecoration.ignoredResourceForeground#66657f
gitDecoration.modifiedResourceForeground#996c4f
breadcrumb.foreground, tree.tableColumnHeader.foreground#4244ef
explorer.fileForeground#232323
explorer.directoryForeground#4244ef
comment.documentation#696969
editorSuggestWidget.highlightForeground#4244ef
editorSuggestWidget.selectedBackground
editorSuggestWidget.background
invalid#FF0000
invalid#00845f
invalid#7f5ae0
invalid#7f5ae0
invalid#008a00
invalid, invalid.deprecated#996c4f
invalid#c42d2f
invalid.deprecated#996c4f
invalid#c42d2f
invalid#c42d2f
invalid.deprecated#996c4f
invalid#7f0000
invalid.deprecated#F3EA98
invalid#FC5C94
entity.name.type#004fc0
variable#3a6dd2
entity.name.function#00845f
constant#065fff
string#4244ef
comment.documentation#66657f
diffEditor.insertedTextBackground#004840
diffEditor.removedTextBackground#8f1313
invalid#c42d2f
entity.name.function
diff.insertedTextBackground#004840
diff.removedTextBackground#8f1313
invalid.deprecated#c42d2f
invalid.deprecated#996c4f
entity.name.function#996c4f
invalid.deprecated#996c4f
string#4244ef
invalid.deprecated#996c4f
invalid#c42d2f
invalid.deprecated#996c4f
invalid#c42d2f
variable#3a6dd2
variable#66657f
comment#7a5f2f
comment#7a5f2f
comment.documentation#605f9f
entity.name.function#996c4f
editor.findMatchBackground#232323
editor.findMatchHighlightBackground#232323
editor.findMatchBackground, editor.findMatchHighlightBackground#232323
string.regexp#cf2f4f
string.regexp#aa44c5
string.regexp#4244ef
meta.preprocessor, keyword.control.import#aa44c5
invalid.deprecated#996c4f
invalid.deprecated#996c4f
constant, constant.language, support.constant#065fff
constant#065fff
storage.type, support.type, entity.name.type#7f5ae0
entity.name.type#7f5ae0
variable#305f9f
variable, variable.other#3a6dd2
variable#3a6dd2
entity.name.function#517f3c
entity.name.function, support.function#00845f
entity.name.function#00845f
support.function, support.class, support.type#1f6fbf
keyword, storage, keyword.control, storage.modifier#004fc0
keyword#004fc0
comment.documentation#605f9f
comment.documentation, comment.block.documentation#605f9f
comment.documentation#605f9f
string, string.quoted, string.template#4244ef
string#4244ef
comment, punctuation.definition.comment#7a5f2f
comment#7a5f2f
comment, punctuation.definition.comment#7a5f2f
comment#7a5f2f
invalid#232323
invalid#c42d2f
invalid.illegal#c42d2f
editor.wordHighlightStrongBackground#232323
invalid.deprecated#996c4f
invalid.illegal#c42d2f
editorCursor.foreground
editorGutter.background#232323
editorGroup.border#b0b7c0
editorGroupHeader.tabsBackground
statusBar.noFolderBackground#66657f
statusBar.background, statusBar.foreground#051524
editorLineNumber.activeForeground#4244ef
editorLineNumber.activeForeground#4244ef
editorLineNumber.foreground#66657f
invalid.deprecated
editor.selectionHighlightBackground#232323
editor.selectionBackground, editor.selectionForeground
editor.findMatchBackground#232323

Shiki preview

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

Loading...