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#e6ddc2
  • activityBar.foreground#333333
  • activityBar.inactiveForeground#666666
  • editor.background#fff6d8
  • editor.findMatchBackground#deb4f0
  • editor.foreground#484431
  • editor.selectionBackground#f0d4d8
  • editorCursor.background#a07f00
  • editorCursor.foreground#484431
  • editorGroup.border#c5baa6
  • editorGutter.background#fff6d8
  • editorLineNumber.activeForeground#ba5205
  • editorLineNumber.foreground#68708a
  • inlineChatInput.background#e0d8be
  • inlineChatInput.foreground#28251b
  • inlineChatInput.placeholderForeground#5a7400
  • input.background#e0d8be
  • input.foreground#28251b
  • input.placeholderForeground#5a7400
  • panel.background#fff6d8
  • sideBar.background#e6ddc2
  • statusBar.background#f3cf72
  • statusBar.foreground#403328
  • statusBar.noFolderBackground#e7d7c6
  • statusBarItem.remoteBackground#f3cf72
  • statusBarItem.remoteForeground#403328

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#7f6f1a
comment#b05350
entity.name.tag#68708a
entity.name.tag#008250
comment#7f6f1a
markup.underline.link#80431a
keyword#68708a
markup.fenced_code, markup.inline.raw
markup.list#68708a
invalid#c74400
keyword#ba5205
keyword#a26310
invalid.deprecated#ba5205
invalid.deprecated
markup.inserted#005000
markup.inserted#005000
comment#7f6f1a
comment#ba2d2f
comment#7f6f1a
comment#ba5205
comment#008250
comment#ba5205
keyword#a26310
gitDecoration.addedResourceForeground#007a0a
gitDecoration.untrackedResourceForeground#007a0a
gitDecoration.ignoredResourceForeground#68708a
gitDecoration.modifiedResourceForeground#ba5205
breadcrumb.foreground, tree.tableColumnHeader.foreground#ba5205
explorer.fileForeground#484431
explorer.directoryForeground#ba5205
comment.documentation#696969
editorSuggestWidget.highlightForeground#ba5205
editorSuggestWidget.selectedBackground
editorSuggestWidget.background
invalid#FF0000
invalid#5a7400
invalid#008250
invalid#008250
invalid#007a0a
invalid, invalid.deprecated#ba5205
invalid#c74400
invalid.deprecated#ba5205
invalid#c74400
invalid#c74400
invalid.deprecated#ba5205
invalid#7f0000
invalid.deprecated#F3EA98
invalid#FC5C94
entity.name.type#a26310
variable#0f708a
entity.name.function#5a7400
constant#3f60af
string#c74400
comment.documentation#68708a
diffEditor.insertedTextBackground#005000
diffEditor.removedTextBackground#8f1313
invalid#c74400
entity.name.function
diff.insertedTextBackground#005000
diff.removedTextBackground#8f1313
invalid.deprecated#c74400
invalid.deprecated#ba5205
entity.name.function#ba5205
invalid.deprecated#ba5205
string#c74400
invalid.deprecated#ba5205
invalid#c74400
invalid.deprecated#ba5205
invalid#c74400
variable#0f708a
variable#68708a
comment#7f6f1a
comment#7f6f1a
comment.documentation#b05350
entity.name.function#ba5205
editor.findMatchBackground#484431
editor.findMatchHighlightBackground#484431
editor.findMatchBackground, editor.findMatchHighlightBackground#484431
string.regexp#6448ca
string.regexp#aa3e74
string.regexp#c74400
meta.preprocessor, keyword.control.import#ba5205
invalid.deprecated#ba5205
invalid.deprecated#ba5205
constant, constant.language, support.constant#3f60af
constant#3f60af
storage.type, support.type, entity.name.type#008250
entity.name.type#008250
variable#4f6f8f
variable, variable.other#0f708a
variable#0f708a
entity.name.function#61756c
entity.name.function, support.function#5a7400
entity.name.function#5a7400
support.function, support.class, support.type#946830
keyword, storage, keyword.control, storage.modifier#a26310
keyword#a26310
comment.documentation#905ea0
comment.documentation, comment.block.documentation#b05350
comment.documentation#b05350
string, string.quoted, string.template#c74400
string#c74400
comment, punctuation.definition.comment#7f6f1a
comment#7f6f1a
comment, punctuation.definition.comment#7f6f1a
comment#7f6f1a
invalid#484431
invalid#c74400
invalid.illegal#c74400
editor.wordHighlightStrongBackground#484431
invalid.deprecated#ba5205
invalid.illegal#c74400
editorCursor.foreground
editorGutter.background#484431
editorGroup.border#c5baa6
editorGroupHeader.tabsBackground
statusBar.noFolderBackground#68708a
statusBar.background, statusBar.foreground#403328
editorLineNumber.activeForeground#ba5205
editorLineNumber.activeForeground#ba5205
editorLineNumber.foreground#68708a
invalid.deprecated
editor.selectionHighlightBackground#484431
editor.selectionBackground, editor.selectionForeground
editor.findMatchBackground#484431

Shiki preview

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

Loading...