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#302929
  • activityBar.foreground#cccccc
  • activityBar.inactiveForeground#888888
  • editor.background#2c2525
  • editor.findMatchBackground#f9cc6c
  • editor.foreground#fff1f3
  • editor.selectionBackground#403838
  • editorCursor.background#fff1f3
  • editorCursor.foreground#fff1f3
  • editorGroup.border#413a3a
  • editorGutter.background#2c2525
  • editorLineNumber.activeForeground#948a8b
  • editorLineNumber.foreground#5b5353
  • inlineChatInput.background#302828
  • inlineChatInput.foreground#fff1f3
  • inlineChatInput.placeholderForeground#f9cc6c
  • input.background#302828
  • input.foreground#fff1f3
  • input.placeholderForeground#f9cc6c
  • panel.background#2c2525
  • sideBar.background#302929
  • statusBar.background#403838
  • statusBar.foreground#fff1f3
  • statusBar.noFolderBackground#2c2525
  • statusBarItem.remoteBackground#403838
  • statusBarItem.remoteForeground#fff1f3

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#85dacc
comment#72696a
markup.heading#f9cc6c
entity.name.tag#fd6883
entity.name.tag#85dacc
comment#72696a
markup.underline.link#85dacc
keyword#85dacc
markup.fenced_code, markup.inline.raw
markup.list#fd6883
invalid#fd6883
keyword#f38d70
keyword#f9cc6c
invalid.deprecated#f38d70
invalid.deprecated
markup.inserted#adda78
markup.inserted#8aae60
comment#a8a9eb
comment#85dacc
comment#f38d70
comment#adda78
comment#85dacc
keyword#85dacc
gitDecoration.addedResourceForeground#adda78
gitDecoration.untrackedResourceForeground#f38d70
gitDecoration.ignoredResourceForeground#72696a
gitDecoration.renamedResourceForeground#f38d70
gitDecoration.modifiedResourceForeground#a8a9eb
breadcrumb.foreground, tree.tableColumnHeader.foreground#f9cc6c
explorer.fileForeground#fff1f3
explorer.directoryForeground#fff1f3
comment.documentation#696969
editorSuggestWidget.highlightForeground#f9cc6c
editorSuggestWidget.selectedBackground
editorSuggestWidget.background#fff1f3
invalid#FF0000
invalid#adda78
invalid#85dacc
invalid#85dacc
invalid#adda78
invalid, invalid.deprecated#f38d70
invalid#fd6883
invalid.deprecated#f38d70
invalid#fd6883
invalid.deprecated
invalid
invalid#fd6883
invalid.deprecated#f38d70
invalid#fd6883
invalid.deprecated#f38d70
invalid#fd6883
entity.name.type#85dacc
variable#FFA500
entity.name.function#4D4DDDDDDDDD
constant#FF1493
string#FFA500
comment.documentation#72696a
diffEditor.insertedTextBackground#adda78
diffEditor.removedTextBackground#fd6883
invalid#FF0000
entity.name.function#85dacc
diff.insertedTextBackground#adda78
diff.removedTextBackground#fd6883
meta.diff.header.file#85dacc
meta.diff.header#85dacc
invalid.deprecated#fd6883
invalid.deprecated#f38d70
entity.name.function#fff1f3
invalid.deprecated#f38d70
string#FFFFE0
invalid.deprecated#f38d70
invalid#fd6883
invalid.deprecated#f38d70
invalid#fd6883
variable#adda78
variable#85dacc
variable#5b5353
comment#5b5353
comment#fff1f3
comment.documentation#adda78
editor.findMatchBackground#fff1f3
editor.findMatchHighlightBackground#fff1f3
editor.findMatchBackground, editor.findMatchHighlightBackground#fff1f3
string.regexp#fd6883
string.regexp#fd6883
string.regexp#f9cc6c
meta.preprocessor, keyword.control.import#fd6883
invalid.deprecated#f38d70
invalid.deprecated#f38d70
constant, constant.language, support.constant#a8a9eb
constant#a8a9eb
storage.type, support.type, entity.name.type#85dacc
entity.name.type#85dacc
variable#fff1f3
variable, variable.other#fff1f3
variable#fff1f3
entity.name.function#adda78
entity.name.function, support.function#adda78
entity.name.function#adda78
support.function, support.class, support.type#a8a9eb
keyword, storage, keyword.control, storage.modifier#85dacc
keyword#85dacc
comment.documentation#a8a9eb
comment.documentation, comment.block.documentation#958e8f
comment.documentation#958e8f
string, string.quoted, string.template#f9cc6c
string#f9cc6c
comment, punctuation.definition.comment#72696a
comment#72696a
comment, punctuation.definition.comment#72696a
comment#72696a
invalid#131313
invalid
invalid.illegal#fd6883
editor.wordHighlightStrongBackground#adda78
invalid.deprecated#f38d70
invalid.illegal#fd6883
editorCursor.foreground
editorGutter.background#5b5353
editorGroup.border#413a3a
editorGroupHeader.tabsBackground#fff1f3
statusBar.noFolderBackground#fff1f3
statusBar.background, statusBar.foreground#fff1f3
editorLineNumber.activeForeground
editorLineNumber.activeForeground#948a8b
editorLineNumber.foreground#5b5353
invalid.deprecated
editor.selectionHighlightBackground
editor.selectionBackground, editor.selectionForeground
editor.findMatchBackground#131313

Shiki preview

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

Loading...