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#2d3244
  • activityBar.foreground#cccccc
  • activityBar.inactiveForeground#888888
  • editor.background#292D3E
  • editor.findMatchBackground#c792ea
  • editor.foreground#EEFFFF
  • editor.selectionBackground#3C435E
  • editorCursor.background#c792ea
  • editorCursor.foreground#EEFFFF
  • editorGroup.border#232635
  • editorGutter.background#292D3E
  • editorLineNumber.activeForeground#EEFFFF
  • editorLineNumber.foreground#676E95
  • inlineChatInput.background#2c3143
  • inlineChatInput.foreground#ffffff
  • inlineChatInput.placeholderForeground#c792ea
  • input.background#2c3143
  • input.foreground#ffffff
  • input.placeholderForeground#c792ea
  • panel.background#292D3E
  • sideBar.background#2d3244
  • statusBar.background#232635
  • statusBar.foreground#A6Accd
  • statusBar.noFolderBackground#282c3d
  • statusBarItem.remoteBackground#232635
  • statusBarItem.remoteForeground#A6Accd

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#89DDFF
comment#676E95
markup.heading#c792ea
entity.name.tag#89DDFF
entity.name.tag#89DDFF
comment#676E95
markup.underline.link#c792ea
keyword#c792ea
markup.fenced_code, markup.inline.raw
markup.list#ff5370
invalid#ff5370
keyword#ffcb6b
keyword#c3e88d
invalid.deprecated#ffcb6b
invalid.deprecated
markup.inserted#c3e88d
markup.inserted#9cb970
comment#bb80b3
comment#89DDFF
comment#f78c6c
comment#c3e88d
comment#c792ea
keyword#89DDFF
gitDecoration.addedResourceForeground#c3e88d
gitDecoration.untrackedResourceForeground#8d92af
gitDecoration.ignoredResourceForeground#676E95
gitDecoration.renamedResourceForeground#8d92af
gitDecoration.modifiedResourceForeground#bb80b3
breadcrumb.foreground, tree.tableColumnHeader.foreground#c3e88d
explorer.fileForeground#EEFFFF
explorer.directoryForeground#EEFFFF
comment.documentation#696969
editorSuggestWidget.highlightForeground#c792ea
editorSuggestWidget.selectedBackground
editorSuggestWidget.background#EEFFFF
invalid#FF0000
invalid#82aaff
invalid#c792ea
invalid#c792ea
invalid#c3e88d
invalid, invalid.deprecated#ffcb6b
invalid#ff5370
invalid.deprecated#ffcb6b
invalid#ff5370
invalid#ff5370
invalid.deprecated#ffcb6b
invalid#ff5370
invalid.deprecated#ffcb6b
invalid#ff5370
entity.name.type#89DDFF
variable#FFA500
entity.name.function#4D4DDDDDDDDD
constant#FF1493
string#FFA500
comment.documentation#676E95
diffEditor.insertedTextBackground#c3e88d
diffEditor.removedTextBackground#ff5370
invalid#FF0000
entity.name.function#89DDFF
diff.insertedTextBackground#c3e88d
diff.removedTextBackground#ff5370
meta.diff.header.file#82aaff
meta.diff.header#89DDFF
invalid.deprecated#ff5370
invalid.deprecated#ffcb6b
entity.name.function#ffcb6b
invalid.deprecated#ffcb6b
string#FFFFE0
invalid.deprecated#ffcb6b
invalid#ff5370
invalid.deprecated#ffcb6b
invalid#ff5370
variable#c3e88d
variable#c792ea
variable#676E95
comment#676E95
comment#EEFFFF
comment.documentation#c3e88d
editor.findMatchBackground#c3e88d
editor.findMatchHighlightBackground#EEFFFF
editor.findMatchBackground, editor.findMatchHighlightBackground#EEFFFF
string.regexp#89DDFF
string.regexp#89DDFF
string.regexp#c3e88d
meta.preprocessor, keyword.control.import#89DDFF
invalid.deprecated#ffcb6b
invalid.deprecated#ffcb6b
constant, constant.language, support.constant#f78c6c
constant#f78c6c
storage.type, support.type, entity.name.type#c792ea
entity.name.type#c792ea
variable#ffcb6b
variable, variable.other#ffcb6b
variable#ffcb6b
entity.name.function#82aaff
entity.name.function, support.function#82aaff
entity.name.function#82aaff
support.function, support.class, support.type#82aaff
keyword, storage, keyword.control, storage.modifier#89DDFF
keyword#89DDFF
comment.documentation#f78c6c
comment.documentation, comment.block.documentation#8d92af
comment.documentation#8d92af
string, string.quoted, string.template#c3e88d
string#c3e88d
comment, punctuation.definition.comment#676E95
comment#676E95
comment, punctuation.definition.comment#676E95
comment#676E95
invalid#1c1f2b
invalid
invalid.illegal#1c1f2b
editor.wordHighlightStrongBackground#ff5370
invalid.deprecated#ffcb6b
invalid.illegal#ff5370
editorCursor.foreground
editorGutter.background#4E5579
editorGroup.border#232635
editorGroupHeader.tabsBackground#A6Accd
statusBar.noFolderBackground#676E95
statusBar.background, statusBar.foreground#A6Accd
editorLineNumber.activeForeground
editorLineNumber.activeForeground#EEFFFF
editorLineNumber.foreground#676E95
invalid.deprecated
editor.selectionHighlightBackground
editor.selectionBackground, editor.selectionForeground
editor.findMatchBackground#1c1f2b

Shiki preview

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

Loading...