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#3a2b1a
  • activityBar.foreground#cccccc
  • activityBar.inactiveForeground#888888
  • editor.background#352718
  • editor.findMatchBackground#60518f
  • editor.foreground#e8e4b1
  • editor.selectionBackground#443a4f
  • editorCursor.background#f9cf7a
  • editorCursor.foreground#e8e4b1
  • editorGroup.border#6f5f58
  • editorGutter.background#352718
  • editorLineNumber.activeForeground#ffa21f
  • editorLineNumber.foreground#90918a
  • inlineChatInput.background#392a1a
  • inlineChatInput.foreground#fffbc3
  • inlineChatInput.placeholderForeground#a0d13a
  • input.background#392a1a
  • input.foreground#fffbc3
  • input.placeholderForeground#a0d13a
  • panel.background#352718
  • sideBar.background#3a2b1a
  • statusBar.background#704f00
  • statusBar.foreground#f8efd8
  • statusBar.noFolderBackground#59463f
  • statusBarItem.remoteBackground#704f00
  • statusBarItem.remoteForeground#f8efd8

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#eab780
comment#e89a88
entity.name.tag#90918a
entity.name.tag#65d590
comment#eab780
markup.underline.link#ccaa70
keyword#90918a
markup.fenced_code, markup.inline.raw
markup.list#90918a
invalid#ff7f4f
keyword#ffa21f
keyword#e4b53f
invalid.deprecated#ffa21f
invalid.deprecated
markup.inserted#a0e0a0
markup.inserted#a0e0a0
comment#eab780
comment#ff7f7f
comment#eab780
comment#ffa21f
comment#65d590
comment#ffa21f
keyword#e4b53f
gitDecoration.addedResourceForeground#6fd560
gitDecoration.untrackedResourceForeground#6fd560
gitDecoration.ignoredResourceForeground#90918a
gitDecoration.modifiedResourceForeground#ffa21f
breadcrumb.foreground, tree.tableColumnHeader.foreground#ffa21f
explorer.fileForeground#e8e4b1
explorer.directoryForeground#ffa21f
comment.documentation#696969
editorSuggestWidget.highlightForeground#ffa21f
editorSuggestWidget.selectedBackground
editorSuggestWidget.background
invalid#FF0000
invalid#6fd560
invalid#65d590
invalid#65d590
invalid#6fd560
invalid, invalid.deprecated#ffa21f
invalid#ff7f4f
invalid.deprecated#ffa21f
invalid#ff7f4f
invalid#ff7f4f
invalid.deprecated#ffa21f
invalid#ffa9bf
invalid.deprecated#F3EA98
invalid#FC5C94
entity.name.type#e4b53f
variable#6fcad0
entity.name.function#6fd560
constant#98bfff
string#ffa21f
comment.documentation#90918a
diffEditor.insertedTextBackground#a0e0a0
diffEditor.removedTextBackground#ffbfbf
invalid#ff7f4f
entity.name.function
diff.insertedTextBackground#a0e0a0
diff.removedTextBackground#ffbfbf
invalid.deprecated#ff7f4f
invalid.deprecated#ffa21f
entity.name.function#ffa21f
invalid.deprecated#ffa21f
string#ffa21f
invalid.deprecated#ffa21f
invalid#ff7f4f
invalid.deprecated#ffa21f
invalid#ff7f4f
variable#6fcad0
variable#90918a
comment#eab780
comment#eab780
comment.documentation#e89a88
entity.name.function#ffa21f
editor.findMatchBackground#e8e4b1
editor.findMatchHighlightBackground#e8e4b1
editor.findMatchBackground, editor.findMatchHighlightBackground#e8e4b1
string.regexp#c6a2fe
string.regexp#f0aac5
string.regexp#ffa21f
meta.preprocessor, keyword.control.import#ff7f4f
invalid.deprecated#ffa21f
invalid.deprecated#ffa21f
constant, constant.language, support.constant#98bfff
constant#98bfff
storage.type, support.type, entity.name.type#65d590
entity.name.type#65d590
variable#99bfcf
variable, variable.other#6fcad0
variable#6fcad0
entity.name.function#a0d26f
entity.name.function, support.function#6fd560
entity.name.function#6fd560
support.function, support.class, support.type#e7a06f
keyword, storage, keyword.control, storage.modifier#e4b53f
keyword#e4b53f
comment.documentation#dfcfe0
comment.documentation, comment.block.documentation#e89a88
comment.documentation#e89a88
string, string.quoted, string.template#ffa21f
string#ffa21f
comment, punctuation.definition.comment#eab780
comment#eab780
comment, punctuation.definition.comment#eab780
comment#eab780
invalid#e8e4b1
invalid#ff7f4f
invalid.illegal#ff7f4f
editor.wordHighlightStrongBackground#e8e4b1
invalid.deprecated#ffa21f
invalid.illegal#ff7f4f
editorCursor.foreground
editorGutter.background#e8e4b1
editorGroup.border#6f5f58
editorGroupHeader.tabsBackground
statusBar.noFolderBackground#90918a
statusBar.background, statusBar.foreground#f8efd8
editorLineNumber.activeForeground#ffa21f
editorLineNumber.activeForeground#ffa21f
editorLineNumber.foreground#90918a
invalid.deprecated
editor.selectionHighlightBackground#e8e4b1
editor.selectionBackground, editor.selectionForeground
editor.findMatchBackground#e8e4b1

Shiki preview

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

Loading...