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#272935
  • activityBar.foreground#cccccc
  • activityBar.inactiveForeground#888888
  • editor.background#232530
  • editor.findMatchBackground#e95678
  • editor.foreground#c7c9cb
  • editor.selectionBackground#2e2f3a
  • editorCursor.background#e95678
  • editorCursor.foreground#c7c9cb
  • editorGroup.border#16161c
  • editorGutter.background#232530
  • editorLineNumber.activeForeground#919297
  • editorLineNumber.foreground#383a44
  • inlineChatInput.background#262834
  • inlineChatInput.foreground#e5e7e9
  • inlineChatInput.placeholderForeground#e95678
  • input.background#262834
  • input.foreground#e5e7e9
  • input.placeholderForeground#e95678
  • panel.background#232530
  • sideBar.background#272935
  • statusBar.background#1a1c23
  • statusBar.foreground#9fa0a2
  • statusBar.noFolderBackground#1a1c23
  • statusBarItem.remoteBackground#1a1c23
  • statusBarItem.remoteForeground#9fa0a2

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#b877db
comment#4e5059
markup.heading#e95678
entity.name.tag#c7c9cb
entity.name.tag#b877db
comment#4e5059
markup.underline.link#6c6f93
keyword#f09383
markup.fenced_code, markup.inline.raw#f09383
markup.list#e95678
invalid#e95678
keyword#27d797
keyword#fab795
invalid.deprecated#27d797
invalid.deprecated
markup.inserted#09f7a0
markup.inserted#07c580
comment#b877db
comment#b877db
comment#f09383
comment#09f7a0
comment#6c6f93
keyword#59e3e3
gitDecoration.addedResourceForeground#09f7a0
gitDecoration.untrackedResourceForeground#fab795
gitDecoration.ignoredResourceForeground#4e5059
gitDecoration.renamedResourceForeground#fab795
gitDecoration.modifiedResourceForeground#09f7a0
breadcrumb.foreground, tree.tableColumnHeader.foreground#c7c9cb
explorer.fileForeground#c7c9cb
explorer.directoryForeground#c7c9cb
comment.documentation#696969
editorSuggestWidget.highlightForeground#e95678
editorSuggestWidget.selectedBackground#c7c9cb
editorSuggestWidget.background#c7c9cb
invalid#FF0000
invalid#87ceeb
invalid#87ceeb
invalid#87ceeb
invalid#09f7a0
invalid, invalid.deprecated#27d797
invalid#e95678
invalid.deprecated#27d797
invalid#e95678
invalid#e95678
invalid.deprecated#27d797
invalid#e95678
invalid.deprecated#27d797
invalid#e95678
entity.name.type#b877db
variable#FFA500
entity.name.function#4D4DDDDDDDDD
constant#FF1493
string#FFA500
comment.documentation#4e5059
diffEditor.insertedTextBackground#09f7a0
diffEditor.removedTextBackground#e95678
invalid#FF0000
entity.name.function#59e3e3
diff.insertedTextBackground#09f7a0
diff.removedTextBackground#e95678
meta.diff.header.file#21bfc2
meta.diff.header#59e3e3
invalid.deprecated#e95678
invalid.deprecated#27d797
entity.name.function#e95678
invalid.deprecated#27d797
string#FFFFE0
invalid.deprecated#27d797
invalid#e95678
invalid.deprecated#27d797
invalid#e95678
variable#09f7a0
variable#6c6f93
variable#6a6a6a
comment#6a6a6a
comment#c7c9cb
comment.documentation#09f7a0
editor.findMatchBackground#09f7a0
editor.findMatchHighlightBackground#fdf0ed
editor.findMatchBackground, editor.findMatchHighlightBackground#fdf0ed
string.regexp#87ceeb
string.regexp#87ceeb
string.regexp#fab795
meta.preprocessor, keyword.control.import#87ceeb
invalid.deprecated#27d797
invalid.deprecated#27d797
constant, constant.language, support.constant#f09383
constant#f09383
storage.type, support.type, entity.name.type#87ceeb
entity.name.type#87ceeb
variable#e95678
variable, variable.other#e95678
variable#e95678
entity.name.function#87ceeb
entity.name.function, support.function#87ceeb
entity.name.function#87ceeb
support.function, support.class, support.type#b877db
keyword, storage, keyword.control, storage.modifier#b877db
keyword#b877db
comment.documentation#f09383
comment.documentation, comment.block.documentation#fab795
comment.documentation#fab795
string, string.quoted, string.template#fab795
string#fab795
comment, punctuation.definition.comment#4e5059
comment#4e5059
comment, punctuation.definition.comment#4e5059
comment#4e5059
invalid#16161c
invalid
invalid.illegal#fab795
editor.wordHighlightStrongBackground#09f7a0
invalid.deprecated#27d797
invalid.illegal#e95678
editorCursor.foreground
editorGutter.background
editorGroup.border#16161c
editorGroupHeader.tabsBackground#9fa0a2
statusBar.noFolderBackground#4e5059
statusBar.background, statusBar.foreground#9fa0a2
editorLineNumber.activeForeground
editorLineNumber.activeForeground#919297
editorLineNumber.foreground#383a44
invalid.deprecated
editor.selectionHighlightBackground
editor.selectionBackground, editor.selectionForeground
editor.findMatchBackground#16161c

Shiki preview

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

Loading...