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#e1e1e1
  • activityBar.foreground#333333
  • activityBar.inactiveForeground#666666
  • editor.background#fafafa
  • editor.findMatchBackground#014980
  • editor.foreground#383a42
  • editor.selectionBackground#d8d8d8
  • editorCursor.background#014980
  • editorCursor.foreground#383a42
  • editorGroup.border#c8c8c8
  • editorGutter.background#fafafa
  • editorLineNumber.activeForeground#1b2229
  • editorLineNumber.foreground#aaaeb1
  • inlineChatInput.background#dcdcdc
  • inlineChatInput.foreground#24262b
  • inlineChatInput.placeholderForeground#014980
  • input.background#dcdcdc
  • input.foreground#24262b
  • input.placeholderForeground#014980
  • panel.background#fafafa
  • sideBar.background#e1e1e1
  • statusBar.background#d3d3d3
  • statusBar.foreground#222328
  • statusBar.noFolderBackground#e1e1e1
  • statusBarItem.remoteBackground#d3d3d3
  • statusBarItem.remoteForeground#222328

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#556b2f
markup.heading#e45649
entity.name.tag#383a42
comment#556b2f
markup.underline.link#a626a4
markup.fenced_code, markup.inline.raw
markup.list#e45649
invalid#e45649
keyword#986801
keyword#8a3b3c
invalid.deprecated#986801
invalid.deprecated
markup.inserted#556b2f
markup.inserted#445525
comment#b751b6
comment#383a42
comment#8a3b3c
comment#556b2f
comment#a626a4
keyword#0184bc
gitDecoration.addedResourceForeground#556b2f
gitDecoration.untrackedResourceForeground#485a27
gitDecoration.ignoredResourceForeground#556b2f
gitDecoration.renamedResourceForeground#485a27
gitDecoration.modifiedResourceForeground#b751b6
breadcrumb.foreground, tree.tableColumnHeader.foreground#8a3b3c
explorer.fileForeground#383a42
explorer.directoryForeground#383a42
comment.documentation#696969
editorSuggestWidget.highlightForeground#014980
editorSuggestWidget.selectedBackground
editorSuggestWidget.background#383a42
invalid#FF0000
invalid#556b2f
invalid, invalid.deprecated#986801
invalid#e45649
invalid.deprecated#986801
invalid#e45649
invalid#e45649
invalid.deprecated#986801
invalid#e45649
invalid.deprecated#986801
invalid#e45649
variable#B22222
entity.name.function#00008B
constant#FF1493
string#CD0000
comment.documentation#556b2f
diffEditor.insertedTextBackground#556b2f
diffEditor.removedTextBackground#e45649
invalid#FF0000
entity.name.function#0184bc
diff.insertedTextBackground#556b2f
diff.removedTextBackground#e45649
meta.diff.header.file#014980
meta.diff.header#0184bc
invalid.deprecated#e45649
invalid.deprecated#986801
entity.name.function#383a42
invalid.deprecated#986801
string#00008B
invalid.deprecated#986801
invalid#e45649
invalid.deprecated#986801
invalid#e45649
variable#556b2f
variable#a626a4
variable#383a42
comment#383a42
comment#383a42
comment.documentation#556b2f
editor.findMatchBackground#556b2f
editor.findMatchHighlightBackground#f0f0f0
editor.findMatchBackground, editor.findMatchHighlightBackground#f0f0f0
string.regexp#383a42
string.regexp#383a42
string.regexp#8a3b3c
meta.preprocessor, keyword.control.import#383a42
invalid.deprecated#986801
invalid.deprecated#986801
constant, constant.language, support.constant#383a42
constant#383a42
variable#383a42
variable, variable.other#383a42
variable#383a42
comment.documentation#383a42
comment.documentation, comment.block.documentation#485a27
comment.documentation#485a27
string, string.quoted, string.template#8a3b3c
string#8a3b3c
comment, punctuation.definition.comment#556b2f
comment#556b2f
comment, punctuation.definition.comment#556b2f
comment#556b2f
invalid#f0f0f0
invalid
invalid.illegal#f0f0f0
editor.wordHighlightStrongBackground#e45649
invalid.deprecated#986801
invalid.illegal#e45649
editorCursor.foreground
editorGutter.background#9ca0a4
editorGroup.border#c8c8c8
editorGroupHeader.tabsBackground
statusBar.noFolderBackground#a978ad
statusBar.background, statusBar.foreground
editorLineNumber.activeForeground
editorLineNumber.activeForeground#1b2229
editorLineNumber.foreground#aaaeb1
invalid.deprecated
editor.selectionHighlightBackground
editor.selectionBackground, editor.selectionForeground
editor.findMatchBackground#f0f0f0

Shiki preview

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

Loading...