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#d8d5dc
  • activityBar.foreground#333333
  • activityBar.inactiveForeground#666666
  • editor.background#F0EDF4
  • editor.findMatchBackground#9783B1
  • editor.foreground#4A3B5E
  • editor.selectionBackground#d0cdd6
  • editorCursor.background#9783B1
  • editorCursor.foreground#4A3B5E
  • editorGroup.border#c3bdcc
  • editorGutter.background#F0EDF4
  • editorLineNumber.activeForeground#9783B1
  • editorLineNumber.foreground#bfb2cf
  • inlineChatInput.background#d3d1d7
  • inlineChatInput.foreground#292034
  • inlineChatInput.placeholderForeground#9783B1
  • input.background#d3d1d7
  • input.foreground#292034
  • input.placeholderForeground#9783B1
  • panel.background#F0EDF4
  • sideBar.background#d8d5dc
  • statusBar.background#E1DBE9
  • statusBar.foreground#4A3B5E
  • statusBar.noFolderBackground#d8d5db
  • statusBarItem.remoteBackground#E1DBE9
  • statusBarItem.remoteForeground#4A3B5E

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#875faf
comment#B4A5C7
markup.heading#dc322f
entity.name.tag#9783B1
entity.name.tag#875faf
comment#B4A5C7
markup.underline.link#f4649b
keyword#f4649b
markup.fenced_code, markup.inline.raw
markup.list#dc322f
invalid#dc322f
keyword#a07000
keyword#5f8700
invalid.deprecated#a07000
invalid.deprecated
markup.inserted#5f8700
markup.inserted#4c6c00
comment#875faf
comment#875faf
comment#d75f00
comment#5f8700
comment#f4649b
keyword#008ea1
gitDecoration.addedResourceForeground#5f8700
gitDecoration.untrackedResourceForeground#998ca9
gitDecoration.ignoredResourceForeground#B4A5C7
gitDecoration.renamedResourceForeground#998ca9
gitDecoration.modifiedResourceForeground#875faf
breadcrumb.foreground, tree.tableColumnHeader.foreground#008070
explorer.fileForeground#4A3B5E
explorer.directoryForeground#4A3B5E
comment.documentation#696969
editorSuggestWidget.highlightForeground#9783B1
editorSuggestWidget.selectedBackground
editorSuggestWidget.background#4A3B5E
invalid#FF0000
invalid#007daf
invalid#f4649b
invalid#f4649b
invalid#5f8700
invalid, invalid.deprecated#a07000
invalid#dc322f
invalid.deprecated#a07000
invalid#dc322f
invalid#dc322f
invalid.deprecated#a07000
invalid#dc322f
invalid.deprecated#a07000
invalid#dc322f
entity.name.type#875faf
variable#B22222
entity.name.function#00008B
constant#FF1493
string#CD0000
comment.documentation#B4A5C7
diffEditor.insertedTextBackground#5f8700
diffEditor.removedTextBackground#dc322f
invalid#FF0000
entity.name.function#008ea1
diff.insertedTextBackground#5f8700
diff.removedTextBackground#dc322f
meta.diff.header.file#007daf
meta.diff.header#008ea1
invalid.deprecated#dc322f
invalid.deprecated#a07000
entity.name.function#513969
invalid.deprecated#a07000
string#00008B
invalid.deprecated#a07000
invalid#dc322f
invalid.deprecated#a07000
invalid#dc322f
variable#5f8700
variable#f4649b
variable#B4A5C7
comment#B4A5C7
comment#4A3B5E
comment.documentation#5f8700
editor.findMatchBackground#5f8700
editor.findMatchHighlightBackground#E8E4EE
editor.findMatchBackground, editor.findMatchHighlightBackground#E8E4EE
string.regexp#f4649b
string.regexp#f4649b
string.regexp#5f8700
meta.preprocessor, keyword.control.import#f4649b
invalid.deprecated#a07000
invalid.deprecated#a07000
constant, constant.language, support.constant#008070
constant#008070
storage.type, support.type, entity.name.type#f4649b
entity.name.type#f4649b
variable#513969
variable, variable.other#513969
variable#513969
entity.name.function#007daf
entity.name.function, support.function#007daf
entity.name.function#007daf
support.function, support.class, support.type#007daf
keyword, storage, keyword.control, storage.modifier#875faf
keyword#875faf
comment.documentation#008070
comment.documentation, comment.block.documentation#998ca9
comment.documentation#998ca9
string, string.quoted, string.template#5f8700
string#5f8700
comment, punctuation.definition.comment#B4A5C7
comment#B4A5C7
comment, punctuation.definition.comment#B4A5C7
comment#B4A5C7
invalid#E8E4EE
invalid
invalid.illegal#E8E4EE
editor.wordHighlightStrongBackground#dc322f
invalid.deprecated#a07000
invalid.illegal#dc322f
editorCursor.foreground
editorGutter.background#B4A5C7
editorGroup.border#c3bdcc
editorGroupHeader.tabsBackground#4A3B5E
statusBar.noFolderBackground#ab97c2
statusBar.background, statusBar.foreground#4A3B5E
editorLineNumber.activeForeground
editorLineNumber.activeForeground#9783B1
editorLineNumber.foreground#bfb2cf
invalid.deprecated
editor.selectionHighlightBackground
editor.selectionBackground, editor.selectionForeground
editor.findMatchBackground#E8E4EE

Shiki preview

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

Loading...