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#454545
  • activityBar.foreground#cccccc
  • activityBar.inactiveForeground#888888
  • editor.background#3F3F3F
  • editor.findMatchBackground#494949
  • editor.foreground#DCDCDC
  • editor.selectionBackground#2B2B2B
  • editorCursor.background#FFFFEF
  • editorCursor.foreground#DCDCDC
  • editorGroup.border#656555
  • editorGutter.background#3F3F3F
  • editorLineNumber.activeForeground#D0BF8F
  • editorLineNumber.foreground#6F6F6F
  • inlineChatInput.background#444444
  • inlineChatInput.foreground#ffffff
  • inlineChatInput.placeholderForeground#F0DFAF
  • input.background#444444
  • input.foreground#ffffff
  • input.placeholderForeground#F0DFAF
  • panel.background#3F3F3F
  • sideBar.background#454545
  • statusBar.background#2B2B2B
  • statusBar.foreground#8FB28F
  • statusBar.noFolderBackground#353535
  • statusBarItem.remoteBackground#2B2B2B
  • statusBarItem.remoteForeground#8FB28F

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#F0DFAF
comment#7F9F7F
markup.heading#CC9393
entity.name.tag#4F4F4F
entity.name.tag#F0DFAF
comment#7F9F7F
markup.underline.link#DC8CC3
keyword#7CB8BB
markup.fenced_code, markup.inline.raw
markup.list#CC9393
invalid#CC9393
keyword#E0CF9F
keyword#CC9393
invalid.deprecated#DFAF8F
invalid.deprecated
markup.inserted#7F9F7F
markup.inserted#657f65
comment#8FB28F
comment#a9a1e1
comment#F0DFAF
comment#DFAF8F
comment#7F9F7F
comment#94BFF3
keyword#93E0E3
gitDecoration.addedResourceForeground#7F9F7F
gitDecoration.untrackedResourceForeground#9FC59F
gitDecoration.ignoredResourceForeground#7F9F7F
gitDecoration.renamedResourceForeground#9FC59F
gitDecoration.modifiedResourceForeground#a9a1e1
breadcrumb.foreground, tree.tableColumnHeader.foreground#CC9393
explorer.fileForeground#DCDCDC
explorer.directoryForeground#DCDCDC
comment.documentation#696969
editorSuggestWidget.highlightForeground#8CD0D3
editorSuggestWidget.selectedBackground
editorSuggestWidget.background#DCDCDC
invalid#FF0000
invalid#93E0E3
invalid#7CB8BB
invalid#7CB8BB
invalid#7F9F7F
invalid, invalid.deprecated#DFAF8F
invalid#CC9393
invalid.deprecated#F0DFAF
invalid#CC9393
invalid#CC9393
invalid.deprecated#E0CF9F
invalid#CC9393
invalid.deprecated#DFAF8F
invalid#CC9393
entity.name.type#F0DFAF
variable#FFA500
entity.name.function#4D4DDDDDDDDD
constant#FF1493
string#FFA500
comment.documentation#7F9F7F
diffEditor.insertedTextBackground#7F9F7F
diffEditor.removedTextBackground#CC9393
invalid#FF0000
entity.name.function#93E0E3
diff.insertedTextBackground#7F9F7F
diff.removedTextBackground#CC9393
meta.diff.header.file#8CD0D3
meta.diff.header#93E0E3
invalid.deprecated#CC9393
invalid.deprecated#DFAF8F
entity.name.function#DFAF8F
invalid.deprecated#F0DFAF
string#FFFFE0
invalid.deprecated#DFAF8F
invalid#CC9393
invalid.deprecated#DFAF8F
invalid#CC9393
variable#7F9F7F
variable#8CD0D3
variable#494949
comment#494949
comment#DCDCDC
comment.documentation#7F9F7F
editor.findMatchBackground#7F9F7F
editor.findMatchHighlightBackground#D0BF8F
editor.findMatchBackground, editor.findMatchHighlightBackground#D0BF8F
string.regexp#8CD0D3
string.regexp#8CD0D3
string.regexp#CC9393
meta.preprocessor, keyword.control.import#8CD0D3
invalid.deprecated#E0CF9F
invalid.deprecated#E0CF9F
constant, constant.language, support.constant#BFEBBF
constant#BFEBBF
storage.type, support.type, entity.name.type#7CB8BB
entity.name.type#7CB8BB
variable#DFAF8F
variable, variable.other#DFAF8F
variable#DFAF8F
entity.name.function#93E0E3
entity.name.function, support.function#93E0E3
entity.name.function#93E0E3
support.function, support.class, support.type#DCDCDC
keyword, storage, keyword.control, storage.modifier#F0DFAF
keyword#F0DFAF
comment.documentation#BFEBBF
comment.documentation, comment.block.documentation#9FC59F
comment.documentation#9FC59F
string, string.quoted, string.template#CC9393
string#CC9393
comment, punctuation.definition.comment#5F7F5F
comment#5F7F5F
comment, punctuation.definition.comment#7F9F7F
comment#7F9F7F
invalid
invalid
invalid.illegal#3F3F3F
editor.wordHighlightStrongBackground#93E0E3
invalid.deprecated#DFAF8F
invalid.illegal#CC9393
editorCursor.foreground#DCDCDC
editorGutter.background#494949
editorGroup.border#656555
editorGroupHeader.tabsBackground#8FB28F
statusBar.noFolderBackground#989890
statusBar.background, statusBar.foreground#8FB28F
editorLineNumber.activeForeground
editorLineNumber.activeForeground#D0BF8F
editorLineNumber.foreground#6F6F6F
invalid.deprecated
editor.selectionHighlightBackground
editor.selectionBackground, editor.selectionForeground
editor.findMatchBackground

Shiki preview

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

Loading...