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#2c2e40
  • activityBar.foreground#cccccc
  • activityBar.inactiveForeground#888888
  • editor.background#282a3a
  • editor.findMatchBackground#ffd76d
  • editor.foreground#eaf2f1
  • editor.selectionBackground#3a3d4b
  • editorCursor.background#eaf2f1
  • editorCursor.foreground#eaf2f1
  • editorGroup.border#3d3f4d
  • editorGutter.background#282a3a
  • editorLineNumber.activeForeground#888d94
  • editorLineNumber.foreground#535763
  • inlineChatInput.background#2b2d3f
  • inlineChatInput.foreground#ffffff
  • inlineChatInput.placeholderForeground#ffd76d
  • input.background#2b2d3f
  • input.foreground#ffffff
  • input.placeholderForeground#ffd76d
  • panel.background#282a3a
  • sideBar.background#2c2e40
  • statusBar.background#3a3d4b
  • statusBar.foreground#eaf2f1
  • statusBar.noFolderBackground#282a3a
  • statusBarItem.remoteBackground#3a3d4b
  • statusBarItem.remoteForeground#eaf2f1

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#9cd1bb
comment#696d77
markup.heading#ffd76d
entity.name.tag#ff657a
entity.name.tag#9cd1bb
comment#696d77
markup.underline.link#9cd1bb
keyword#9cd1bb
markup.fenced_code, markup.inline.raw
markup.list#ff657a
invalid#ff657a
keyword#ff95be
keyword#ffd76d
invalid.deprecated#ff95be
invalid.deprecated
markup.inserted#bad761
markup.inserted#94ac4d
comment#c39ac9
comment#9cd1bb
comment#ff95be
comment#bad761
comment#9cd1bb
keyword#9cd1bb
gitDecoration.addedResourceForeground#bad761
gitDecoration.untrackedResourceForeground#ff95be
gitDecoration.ignoredResourceForeground#696d77
gitDecoration.renamedResourceForeground#ff95be
gitDecoration.modifiedResourceForeground#c39ac9
breadcrumb.foreground, tree.tableColumnHeader.foreground#ffd76d
explorer.fileForeground#eaf2f1
explorer.directoryForeground#eaf2f1
comment.documentation#696969
editorSuggestWidget.highlightForeground#ffd76d
editorSuggestWidget.selectedBackground
editorSuggestWidget.background#eaf2f1
invalid#FF0000
invalid#bad761
invalid#9cd1bb
invalid#9cd1bb
invalid#bad761
invalid, invalid.deprecated#ff95be
invalid#ff657a
invalid.deprecated#ff95be
invalid#ff657a
invalid.deprecated
invalid
invalid#ff657a
invalid.deprecated#ff95be
invalid#ff657a
invalid.deprecated#ff95be
invalid#ff657a
entity.name.type#9cd1bb
variable#FFA500
entity.name.function#4D4DDDDDDDDD
constant#FF1493
string#FFA500
comment.documentation#696d77
diffEditor.insertedTextBackground#bad761
diffEditor.removedTextBackground#ff657a
invalid#FF0000
entity.name.function#9cd1bb
diff.insertedTextBackground#bad761
diff.removedTextBackground#ff657a
meta.diff.header.file#9cd1bb
meta.diff.header#9cd1bb
invalid.deprecated#ff657a
invalid.deprecated#ff95be
entity.name.function#eaf2f1
invalid.deprecated#ff95be
string#FFFFE0
invalid.deprecated#ff95be
invalid#ff657a
invalid.deprecated#ff95be
invalid#ff657a
variable#bad761
variable#9cd1bb
variable#535763
comment#535763
comment#eaf2f1
comment.documentation#bad761
editor.findMatchBackground#eaf2f1
editor.findMatchHighlightBackground#eaf2f1
editor.findMatchBackground, editor.findMatchHighlightBackground#eaf2f1
string.regexp#ff657a
string.regexp#ff657a
string.regexp#ffd76d
meta.preprocessor, keyword.control.import#ff657a
invalid.deprecated#ff95be
invalid.deprecated#ff95be
constant, constant.language, support.constant#c39ac9
constant#c39ac9
storage.type, support.type, entity.name.type#9cd1bb
entity.name.type#9cd1bb
variable#eaf2f1
variable, variable.other#eaf2f1
variable#eaf2f1
entity.name.function#bad761
entity.name.function, support.function#bad761
entity.name.function#bad761
support.function, support.class, support.type#c39ac9
keyword, storage, keyword.control, storage.modifier#9cd1bb
keyword#9cd1bb
comment.documentation#c39ac9
comment.documentation, comment.block.documentation#8e9199
comment.documentation#8e9199
string, string.quoted, string.template#ffd76d
string#ffd76d
comment, punctuation.definition.comment#696d77
comment#696d77
comment, punctuation.definition.comment#696d77
comment#696d77
invalid#131313
invalid
invalid.illegal#ff657a
editor.wordHighlightStrongBackground#bad761
invalid.deprecated#ff95be
invalid.illegal#ff657a
editorCursor.foreground
editorGutter.background#535763
editorGroup.border#3d3f4d
editorGroupHeader.tabsBackground#eaf2f1
statusBar.noFolderBackground#eaf2f1
statusBar.background, statusBar.foreground#eaf2f1
editorLineNumber.activeForeground
editorLineNumber.activeForeground#888d94
editorLineNumber.foreground#535763
invalid.deprecated
editor.selectionHighlightBackground
editor.selectionBackground, editor.selectionForeground
editor.findMatchBackground#131313

Shiki preview

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

Loading...