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#d5dcdf
  • activityBar.foreground#333333
  • activityBar.inactiveForeground#666666
  • editor.background#edf4f8
  • editor.findMatchBackground#d2b4cf
  • editor.foreground#151a27
  • editor.selectionBackground#c8dcff
  • editorCursor.background#036f99
  • editorCursor.foreground#151a27
  • editorGroup.border#a2a6af
  • editorGutter.background#edf4f8
  • editorLineNumber.activeForeground#003faf
  • editorLineNumber.foreground#676470
  • inlineChatInput.background#d1d7da
  • inlineChatInput.foreground#151a27
  • inlineChatInput.placeholderForeground#444fcf
  • input.background#d1d7da
  • input.foreground#151a27
  • input.placeholderForeground#444fcf
  • panel.background#edf4f8
  • sideBar.background#d5dcdf
  • statusBar.background#a0c2ef
  • statusBar.foreground#142810
  • statusBar.noFolderBackground#cfd8e3
  • statusBarItem.remoteBackground#a0c2ef
  • statusBarItem.remoteForeground#142810

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#8b4052
comment#6a4a9f
entity.name.tag#676470
entity.name.tag#007010
comment#8b4052
markup.underline.link#3f4f99
keyword#676470
markup.fenced_code, markup.inline.raw
markup.list#676470
invalid#d00000
keyword#8b4400
keyword#444fcf
invalid.deprecated#8b4400
invalid.deprecated
markup.inserted#005000
markup.inserted#005000
comment#8b4052
comment#1f66af
comment#8b4052
comment#003faf
comment#007010
comment#003faf
keyword#444fcf
gitDecoration.addedResourceForeground#007047
gitDecoration.untrackedResourceForeground#007047
gitDecoration.ignoredResourceForeground#676470
gitDecoration.modifiedResourceForeground#8b4400
breadcrumb.foreground, tree.tableColumnHeader.foreground#003faf
explorer.fileForeground#151a27
explorer.directoryForeground#003faf
comment.documentation#696969
editorSuggestWidget.highlightForeground#003faf
editorSuggestWidget.selectedBackground
editorSuggestWidget.background
invalid#FF0000
invalid#3a6f00
invalid#007010
invalid#007010
invalid#007047
invalid, invalid.deprecated#8b4400
invalid#d00000
invalid.deprecated#8b4400
invalid#d00000
invalid#d00000
invalid.deprecated#8b4400
invalid#7f0000
invalid.deprecated#F3EA98
invalid#FC5C94
entity.name.type#444fcf
variable#1f66af
entity.name.function#3a6f00
constant#003faf
string#006f70
comment.documentation#676470
diffEditor.insertedTextBackground#005000
diffEditor.removedTextBackground#8f1313
invalid#d00000
entity.name.function
diff.insertedTextBackground#005000
diff.removedTextBackground#8f1313
invalid.deprecated#d00000
invalid.deprecated#8b4400
entity.name.function#8b4400
invalid.deprecated#8b4400
string#006f70
invalid.deprecated#8b4400
invalid#d00000
invalid.deprecated#8b4400
invalid#d00000
variable#1f66af
variable#676470
comment#8b4052
comment#8b4052
comment.documentation#3f627f
entity.name.function#8b4400
editor.findMatchBackground#151a27
editor.findMatchHighlightBackground#151a27
editor.findMatchBackground, editor.findMatchHighlightBackground#151a27
string.regexp#c3303a
string.regexp#80308f
string.regexp#006f70
meta.preprocessor, keyword.control.import#5f2fba
invalid.deprecated#8b4400
invalid.deprecated#8b4400
constant, constant.language, support.constant#003faf
constant#003faf
storage.type, support.type, entity.name.type#007010
entity.name.type#007010
variable#3f627f
variable, variable.other#1f66af
variable#1f66af
entity.name.function#4a763f
entity.name.function, support.function#3a6f00
entity.name.function#3a6f00
support.function, support.class, support.type#6a4a9f
keyword, storage, keyword.control, storage.modifier#444fcf
keyword#444fcf
comment.documentation#6a4a9f
comment.documentation, comment.block.documentation#3f627f
comment.documentation#3f627f
string, string.quoted, string.template#006f70
string#006f70
comment, punctuation.definition.comment#8b4052
comment#8b4052
comment, punctuation.definition.comment#8b4052
comment#8b4052
invalid#151a27
invalid#d00000
invalid.illegal#d00000
editor.wordHighlightStrongBackground#151a27
invalid.deprecated#8b4400
invalid.illegal#d00000
editorCursor.foreground
editorGutter.background#151a27
editorGroup.border#a2a6af
editorGroupHeader.tabsBackground
statusBar.noFolderBackground#676470
statusBar.background, statusBar.foreground#142810
editorLineNumber.activeForeground#003faf
editorLineNumber.activeForeground#003faf
editorLineNumber.foreground#676470
invalid.deprecated
editor.selectionHighlightBackground#151a27
editor.selectionBackground, editor.selectionForeground
editor.findMatchBackground#151a27

Shiki preview

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

Loading...