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#e2ded8
  • activityBar.foreground#333333
  • activityBar.inactiveForeground#666666
  • editor.background#fbf7f0
  • editor.findMatchBackground#b2e4dc
  • editor.foreground#000000
  • editor.selectionBackground#c2bcb5
  • editor.selectionForeground#000000
  • editorCursor.background#d00000
  • editorCursor.foreground#000000
  • editorGroup.border#9f9690
  • editorGutter.background#efe9dd
  • editorLineNumber.activeForeground#000000
  • editorLineNumber.foreground#595959
  • inlineChatInput.background#ddd9d3
  • inlineChatInput.foreground#000000
  • inlineChatInput.placeholderForeground#00603f
  • input.background#ddd9d3
  • input.foreground#000000
  • input.placeholderForeground#00603f
  • panel.background#fbf7f0
  • sideBar.background#e2ded8
  • statusBar.background#cab9b2
  • statusBar.foreground#000000
  • statusBar.noFolderBackground#dfd9cf
  • statusBarItem.remoteBackground#cab9b2
  • statusBarItem.remoteForeground#000000

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#7f0000
comment#574316
entity.name.tag#595959
entity.name.tag#306010
comment#7f0000
markup.underline.link#193668
keyword#595959
markup.fenced_code, markup.inline.raw
markup.list#595959
invalid#a60000
keyword#6d5000
keyword#0031a9
invalid.deprecated#6d5000
invalid.deprecated
markup.inserted#005000
markup.inserted#005000
comment#7f0000
comment#531ab6
comment#7f0000
comment#a0132f
comment#00598b
comment#a0132f
keyword#0031a9
gitDecoration.addedResourceForeground#006300
gitDecoration.untrackedResourceForeground#006300
gitDecoration.ignoredResourceForeground#595959
gitDecoration.modifiedResourceForeground#6d5000
breadcrumb.foreground, tree.tableColumnHeader.foreground#a0132f
explorer.fileForeground#000000
explorer.directoryForeground#a0132f
comment.documentation#696969
editorSuggestWidget.highlightForeground#0031a9
editorSuggestWidget.selectedBackground
editorSuggestWidget.background
invalid#FF0000
invalid#602938
invalid#306010
invalid#306010
invalid#006300
invalid, invalid.deprecated#6d5000
invalid#a60000
invalid.deprecated#000000
invalid#000000
invalid#000000
invalid.deprecated#6d5000
invalid#7f0000
invalid.deprecated#F3EA98
invalid#FC5C94
entity.name.type#0031a9
variable#00603f
entity.name.function#602938
constant#531ab6
string#00598b
comment.documentation#595959
diffEditor.insertedTextBackground#005000
diffEditor.removedTextBackground#8f1313
invalid#a60000
entity.name.function
diff.insertedTextBackground#005000
diff.removedTextBackground#8f1313
invalid.deprecated#a60000
invalid.deprecated#6d5000
entity.name.function#6d5000
invalid.deprecated#6d5000
string#00598b
invalid.deprecated#6d5000
invalid#a60000
invalid.deprecated#6d5000
invalid#a60000
variable#00603f
variable#595959
comment#7f0000
comment#7f0000
comment.documentation#304463
entity.name.function#894000
editor.findMatchBackground#000000
editor.findMatchHighlightBackground#000000
editor.findMatchBackground, editor.findMatchHighlightBackground#000000
string.regexp#531ab6
string.regexp#8f0075
string.regexp#00598b
meta.preprocessor, keyword.control.import#894000
invalid.deprecated#6d5000
invalid.deprecated#6d5000
constant, constant.language, support.constant#531ab6
constant#531ab6
storage.type, support.type, entity.name.type#306010
entity.name.type#306010
variable#2a5045
variable, variable.other#00603f
variable#00603f
entity.name.function#7b435c
entity.name.function, support.function#602938
entity.name.function#602938
support.function, support.class, support.type#721045
keyword, storage, keyword.control, storage.modifier#0031a9
keyword#0031a9
comment.documentation#7c318f
comment.documentation, comment.block.documentation#304463
comment.documentation#304463
string, string.quoted, string.template#00598b
string#00598b
comment, punctuation.definition.comment#7f0000
comment#7f0000
comment, punctuation.definition.comment#7f0000
comment#7f0000
invalid#000000
invalid#000000
invalid.illegal#000000
editor.wordHighlightStrongBackground#000000
invalid.deprecated#6d5000
invalid.illegal#a60000
editorCursor.foreground
editorGutter.background#000000
editorGroup.border#9f9690
editorGroupHeader.tabsBackground
statusBar.noFolderBackground#585858
statusBar.background, statusBar.foreground#000000
editorLineNumber.activeForeground#a0132f
editorLineNumber.activeForeground#000000
editorLineNumber.foreground#595959
invalid.deprecated
editor.selectionHighlightBackground#000000
editor.selectionBackground, editor.selectionForeground#000000
editor.findMatchBackground#000000

Shiki preview

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

Loading...