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#0d1600
  • activityBar.foreground#cccccc
  • activityBar.inactiveForeground#888888
  • editor.background#0c1400
  • editor.findMatchBackground#d5c4a1
  • editor.foreground#d5c9b0
  • editor.selectionBackground#222b14
  • editorCursor.background#85897f
  • editorCursor.foreground#d5c9b0
  • editorGroup.border#222b14
  • editorGutter.background#0c1400
  • editorLineNumber.activeForeground#d5c9b0
  • editorLineNumber.foreground#49503d
  • inlineChatInput.background#0d1600
  • inlineChatInput.foreground#d5c9b0
  • inlineChatInput.placeholderForeground#8ec07c
  • input.background#0d1600
  • input.foreground#d5c9b0
  • input.placeholderForeground#8ec07c
  • panel.background#0c1400
  • sideBar.background#0d1600
  • statusBar.background#222b14
  • statusBar.foreground#353e29
  • statusBar.noFolderBackground#121e00
  • statusBarItem.remoteBackground#222b14
  • statusBarItem.remoteForeground#353e29

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#ce4e2b
comment#49503d
markup.heading#d5c4a1
entity.name.tag#8ec07c
entity.name.tag#ce4e2b
comment#49503d
markup.underline.link#ce4e2b
keyword#e5aa2b
markup.fenced_code, markup.inline.raw
markup.list#ce4e2b
invalid#ce4e2b
keyword#e5aa2b
keyword#86914e
invalid.deprecated#e5aa2b
invalid.deprecated
markup.inserted#717b42
markup.inserted#5a6234
comment#d3869b
comment#ce4e2b
comment#fe8019
comment#86914e
comment#cc241d
keyword#8ec07c
gitDecoration.addedResourceForeground#717b42
gitDecoration.untrackedResourceForeground#dfd2b8
gitDecoration.ignoredResourceForeground#49503d
gitDecoration.renamedResourceForeground#dfd2b8
gitDecoration.modifiedResourceForeground#d3869b
breadcrumb.foreground, tree.tableColumnHeader.foreground#86914e
explorer.fileForeground#d5c9b0
explorer.directoryForeground#d5c9b0
comment.documentation#696969
editorSuggestWidget.highlightForeground#8ec07c
editorSuggestWidget.selectedBackground
editorSuggestWidget.background#d5c9b0
invalid#FF0000
invalid#8ec07c
invalid#e5aa2b
invalid#e5aa2b
invalid#86914e
invalid, invalid.deprecated#e5aa2b
invalid#ce4e2b
invalid.deprecated#e5aa2b
invalid#ce4e2b
invalid.deprecated
invalid
invalid#ce4e2b
invalid.deprecated#e5aa2b
invalid#ce4e2b
invalid.deprecated#e5aa2b
invalid#ce4e2b
entity.name.type#ce4e2b
variable#FFA500
entity.name.function#4D4DDDDDDDDD
constant#FF1493
string#FFA500
comment.documentation#49503d
diffEditor.insertedTextBackground#86914e
diffEditor.removedTextBackground#ce4e2b
invalid#FF0000
entity.name.function#8ec07c
diff.insertedTextBackground#86914e
diff.removedTextBackground#ce4e2b
meta.diff.header.file#83a598
meta.diff.header#8ec07c
invalid.deprecated#ce4e2b
invalid.deprecated#e5aa2b
entity.name.function#8ec07c
invalid.deprecated#e5aa2b
string#FFFFE0
invalid.deprecated#e5aa2b
invalid#ce4e2b
invalid.deprecated#e5aa2b
invalid#ce4e2b
variable#86914e
variable#cc241d
variable#928374
comment#928374
comment#d5c9b0
comment.documentation#86914e
editor.findMatchBackground#86914e
editor.findMatchHighlightBackground#0d1011
editor.findMatchBackground, editor.findMatchHighlightBackground#0d1011
string.regexp#8ec07c
string.regexp#8ec07c
string.regexp#86914e
meta.preprocessor, keyword.control.import#8ec07c
invalid.deprecated#e5aa2b
invalid.deprecated#e5aa2b
constant, constant.language, support.constant#d3869b
constant#d3869b
storage.type, support.type, entity.name.type#e5aa2b
entity.name.type#e5aa2b
variable#8ec07c
variable, variable.other#8ec07c
variable#8ec07c
entity.name.function#8ec07c
entity.name.function, support.function#8ec07c
entity.name.function#8ec07c
support.function, support.class, support.type#fe8019
keyword, storage, keyword.control, storage.modifier#ce4e2b
keyword#ce4e2b
comment.documentation#d3869b
comment.documentation, comment.block.documentation#dfd2b8
comment.documentation#dfd2b8
string, string.quoted, string.template#86914e
string#86914e
comment, punctuation.definition.comment#49503d
comment#49503d
comment, punctuation.definition.comment#49503d
comment#49503d
invalid#0d1011
invalid
invalid.illegal
editor.wordHighlightStrongBackground
invalid.deprecated#e5aa2b
invalid.illegal#ce4e2b
editorCursor.foreground
editorGutter.background#353e29
editorGroup.border#222b14
editorGroupHeader.tabsBackground#353e29
statusBar.noFolderBackground#d5c4a1
statusBar.background, statusBar.foreground#353e29
editorLineNumber.activeForeground
editorLineNumber.activeForeground#d5c9b0
editorLineNumber.foreground#49503d
invalid.deprecated
editor.selectionHighlightBackground
editor.selectionBackground, editor.selectionForeground
editor.findMatchBackground#0d1011

Shiki preview

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

Loading...