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#2a1e19
  • activityBar.foreground#cccccc
  • activityBar.inactiveForeground#888888
  • editor.background#261b17
  • editor.findMatchBackground#aa6a1f
  • editor.foreground#e4cbb3
  • editor.selectionBackground#532f28
  • editorCursor.background#aa6a1f
  • editorCursor.foreground#e4cbb3
  • editorGroup.border#1b110e
  • editorGutter.background#261b17
  • editorLineNumber.activeForeground#e4cbb3
  • editorLineNumber.foreground#3F2F2A
  • inlineChatInput.background#291d19
  • inlineChatInput.foreground#e4cbb3
  • inlineChatInput.placeholderForeground#aa6a1f
  • input.background#291d19
  • input.foreground#e4cbb3
  • input.placeholderForeground#aa6a1f
  • panel.background#261b17
  • sideBar.background#2a1e19
  • statusBar.background#241510
  • statusBar.foreground#e4cbb3
  • statusBar.noFolderBackground#291812
  • statusBarItem.remoteBackground#241510
  • statusBarItem.remoteForeground#e4cbb3

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#66a4a4
comment#C18E76
markup.heading#cc241d
entity.name.tag#554541
entity.name.tag#66a4a4
comment#C18E76
markup.underline.link#d3869b
keyword#d79921
markup.fenced_code, markup.inline.raw
markup.list#cc241d
invalid#cc241d
keyword#d79921
keyword#98971a
invalid.deprecated#d79921
invalid.deprecated
markup.inserted#98971a
markup.inserted#797814
comment#805b87
comment#66a4a4
comment#e35b15
comment#98971a
comment#d3869b
keyword#46D9FF
gitDecoration.addedResourceForeground#98971a
gitDecoration.untrackedResourceForeground#7f7370
gitDecoration.ignoredResourceForeground#C18E76
gitDecoration.renamedResourceForeground#7f7370
gitDecoration.modifiedResourceForeground#805b87
breadcrumb.foreground, tree.tableColumnHeader.foreground#98971a
explorer.fileForeground#e4cbb3
explorer.directoryForeground#e4cbb3
comment.documentation#696969
editorSuggestWidget.highlightForeground#aa6a1f
editorSuggestWidget.selectedBackground
editorSuggestWidget.background#e4cbb3
invalid#FF0000
invalid#e35b15
invalid#d79921
invalid#d79921
invalid#98971a
invalid, invalid.deprecated#d79921
invalid#cc241d
invalid.deprecated#d79921
invalid#cc241d
invalid#cc241d
invalid.deprecated#d79921
invalid#cc241d
invalid.deprecated#d79921
invalid#cc241d
entity.name.type#66a4a4
variable#FFA500
entity.name.function#4D4DDDDDDDDD
constant#FF1493
string#FFA500
comment.documentation#C18E76
diffEditor.insertedTextBackground#98971a
diffEditor.removedTextBackground#cc241d
invalid#FF0000
entity.name.function#46D9FF
diff.insertedTextBackground#98971a
diff.removedTextBackground#cc241d
meta.diff.header.file#66a4a4
meta.diff.header#46D9FF
invalid.deprecated#cc241d
invalid.deprecated#d79921
entity.name.function#e4b6c3
invalid.deprecated#d79921
string#FFFFE0
invalid.deprecated#d79921
invalid#cc241d
invalid.deprecated#d79921
invalid#cc241d
variable#98971a
variable#d3869b
variable#3F2F2A
comment#3F2F2A
comment#e4cbb3
comment.documentation#98971a
editor.findMatchBackground#98971a
editor.findMatchHighlightBackground#C18E76
editor.findMatchBackground, editor.findMatchHighlightBackground#C18E76
string.regexp#66a4a4
string.regexp#66a4a4
string.regexp#98971a
meta.preprocessor, keyword.control.import#66a4a4
invalid.deprecated#d79921
invalid.deprecated#d79921
constant, constant.language, support.constant#805b87
constant#805b87
storage.type, support.type, entity.name.type#d79921
entity.name.type#d79921
variable#e4b6c3
variable, variable.other#e4b6c3
variable#e4b6c3
entity.name.function#e35b15
entity.name.function, support.function#e35b15
entity.name.function#e35b15
support.function, support.class, support.type#e35b15
keyword, storage, keyword.control, storage.modifier#66a4a4
keyword#66a4a4
comment.documentation#805b87
comment.documentation, comment.block.documentation#7f7370
comment.documentation#7f7370
string, string.quoted, string.template#98971a
string#98971a
comment, punctuation.definition.comment#C18E76
comment#C18E76
comment, punctuation.definition.comment#C18E76
comment#C18E76
invalid#1b110e
invalid
invalid.illegal#1b110e
editor.wordHighlightStrongBackground#cc241d
invalid.deprecated#d79921
invalid.illegal#cc241d
editorCursor.foreground
editorGutter.background#3F2F2A
editorGroup.border#1b110e
editorGroupHeader.tabsBackground#e4cbb3
statusBar.noFolderBackground#554541
statusBar.background, statusBar.foreground#e4cbb3
editorLineNumber.activeForeground
editorLineNumber.activeForeground#e4cbb3
editorLineNumber.foreground#3F2F2A
invalid.deprecated
editor.selectionHighlightBackground
editor.selectionBackground, editor.selectionForeground
editor.findMatchBackground#1b110e

Shiki preview

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

Loading...