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#d6d6d4
  • activityBar.foreground#333333
  • activityBar.inactiveForeground#666666
  • editor.background#eeeeec
  • editor.findMatchBackground#babdb6
  • editor.foreground#2e3436
  • editor.selectionBackground#babdb6
  • editorCursor.background#204a87
  • editorCursor.foreground#2e3436
  • editorGutter.background#eeeeec
  • editorLineNumber.activeForeground#7F7F7F
  • editorLineNumber.foreground#7F7F7F
  • inlineChatInput.background#d1d1d0
  • inlineChatInput.foreground#202426
  • inlineChatInput.placeholderForeground#204a87
  • input.background#d1d1d0
  • input.foreground#202426
  • input.placeholderForeground#204a87
  • panel.background#eeeeec
  • sideBar.background#d6d6d4
  • statusBar.background#d3d7cf
  • statusBar.foreground#2e3436
  • statusBar.noFolderBackground#888a85
  • statusBarItem.remoteBackground#d3d7cf
  • statusBarItem.remoteForeground#2e3436

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#346604
comment#999999
markup.heading#a40000
entity.name.tag#7F7F7F
entity.name.tag#204a87
comment#5f615c
markup.underline.link#5c3566
keyword#204a87
markup.list#7F7F7F
invalid#ADD8E6
keyword#a40000
keyword#5c3566
invalid.deprecated#ce5c00
invalid.deprecated
markup.inserted#22aa22
markup.inserted#22aa22
comment#5c3566
comment#346604
comment#4A708B
comment#6E8B3D
comment#4A708B
keyword#5c3566
gitDecoration.addedResourceForeground#204a87
gitDecoration.untrackedResourceForeground#5c3566
gitDecoration.ignoredResourceForeground#5f615c
gitDecoration.renamedResourceForeground#5c3566
gitDecoration.modifiedResourceForeground#b35000
breadcrumb.foreground, tree.tableColumnHeader.foreground#204a87
explorer.fileForeground#2e3436
explorer.directoryForeground#a40000
comment.documentation#696969
editorSuggestWidget.highlightForeground#8B0000
editorSuggestWidget.selectedBackground
editorSuggestWidget.background#000000
invalid#FF0000
invalid#a40000
invalid#204a87
invalid#204a87
invalid#4e9a06
invalid, invalid.deprecated#ce5c00
invalid#a40000
invalid.deprecated#ce5c00
invalid#a40000
invalid#88090B
invalid.deprecated#a40000
invalid#a40000
invalid.deprecated#F3EA98
invalid#FC5C94
entity.name.type#346604
variable#B22222
entity.name.function#00008B
constant#FF1493
string#CD0000
comment.documentation#5f615c
diffEditor.insertedTextBackground
diffEditor.removedTextBackground
invalid#FF0000
entity.name.function
diff.insertedTextBackground
diff.removedTextBackground
meta.diff.header.file
meta.diff.header
invalid.deprecated#a40000
invalid.deprecated#ce5c00
entity.name.function#b35000
invalid.deprecated#a40000
string#00008B
invalid.deprecated#ce5c00
invalid#a40000
invalid.deprecated#ce5c00
invalid#a40000
variable#0000FF
variable#0000FF
comment#00008B
comment
comment.documentation#006400
editor.findMatchBackground
editor.findMatchHighlightBackground
editor.findMatchBackground, editor.findMatchHighlightBackground#ffffff
string.regexp#5c3566
meta.preprocessor, keyword.control.import#75507b
invalid.deprecated#a40000
invalid.deprecated#a40000
constant, constant.language, support.constant#204a87
constant#204a87
storage.type, support.type, entity.name.type#204a87
entity.name.type#204a87
variable#b35000
variable, variable.other#b35000
variable#b35000
entity.name.function#a40000
entity.name.function, support.function#a40000
entity.name.function#a40000
support.function, support.class, support.type#75507b
keyword, storage, keyword.control, storage.modifier#346604
keyword#346604
comment.documentation#204a87
comment.documentation, comment.block.documentation#5c3566
comment.documentation#5c3566
string, string.quoted, string.template#5c3566
string#5c3566
comment, punctuation.definition.comment#5f615c
comment#5f615c
comment, punctuation.definition.comment#5f615c
comment#5f615c
invalid
invalid
invalid.illegal#FFFFFF
editor.wordHighlightStrongBackground
invalid.deprecated#ce5c00
invalid.illegal#a40000
editorCursor.foreground
editorGutter.background
editorGroupHeader.tabsBackground#333333
statusBar.noFolderBackground#2e3436
statusBar.background, statusBar.foreground#2e3436
editorLineNumber.activeForeground
editorLineNumber.activeForeground#7F7F7F
editorLineNumber.foreground#7F7F7F
invalid.deprecated
editor.selectionHighlightBackground
editor.selectionBackground, editor.selectionForeground
editor.findMatchBackground

Shiki preview

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

Loading...