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#373839
  • activityBar.foreground#cccccc
  • activityBar.inactiveForeground#888888
  • editor.background#323334
  • editor.findMatchBackground#80A0C2
  • editor.foreground#eceff4
  • editor.selectionBackground#3f3f3f
  • editorCursor.background#80A0C2
  • editorCursor.foreground#eceff4
  • editorGroup.border#181818
  • editorGutter.background#323334
  • editorLineNumber.activeForeground#eceff4
  • editorLineNumber.foreground#727269
  • inlineChatInput.background#363738
  • inlineChatInput.foreground#ffffff
  • inlineChatInput.placeholderForeground#80A0C2
  • input.background#363738
  • input.foreground#ffffff
  • input.placeholderForeground#80A0C2
  • panel.background#323334
  • sideBar.background#373839
  • statusBar.background#1e1e20
  • statusBar.foreground#eceff4
  • statusBar.noFolderBackground#222224
  • statusBarItem.remoteBackground#1e1e20
  • statusBarItem.remoteForeground#eceff4

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#80A0C2
comment#747474
markup.heading#80A0C2
entity.name.tag#80A0C2
entity.name.tag#80A0C2
comment#747474
markup.underline.link#B58DAE
keyword#ECCC87
markup.fenced_code, markup.inline.raw
markup.list#C16069
invalid#C16069
keyword#ECCC87
keyword#A2BF8A
invalid.deprecated#ECCC87
invalid.deprecated
markup.inserted#A2BF8A
markup.inserted#81986e
comment#5D80AE
comment#80A0C2
comment#D2876D
comment#A2BF8A
comment#B58DAE
keyword#86C0D1
gitDecoration.addedResourceForeground#A2BF8A
gitDecoration.untrackedResourceForeground#7d7d7d
gitDecoration.ignoredResourceForeground#747474
gitDecoration.renamedResourceForeground#7d7d7d
gitDecoration.modifiedResourceForeground#5D80AE
breadcrumb.foreground, tree.tableColumnHeader.foreground#A2BF8A
explorer.fileForeground#eceff4
explorer.directoryForeground#eceff4
comment.documentation#696969
editorSuggestWidget.highlightForeground#80A0C2
editorSuggestWidget.selectedBackground
editorSuggestWidget.background#eceff4
invalid#FF0000
invalid#8EBCBB
invalid#ECCC87
invalid#ECCC87
invalid#A2BF8A
invalid, invalid.deprecated#ECCC87
invalid#C16069
invalid.deprecated#ECCC87
invalid#C16069
invalid#C16069
invalid.deprecated#ECCC87
invalid#C16069
invalid.deprecated#ECCC87
invalid#C16069
entity.name.type#80A0C2
variable#FFA500
entity.name.function#4D4DDDDDDDDD
constant#FF1493
string#FFA500
comment.documentation#747474
diffEditor.insertedTextBackground#A2BF8A
diffEditor.removedTextBackground#C16069
invalid#FF0000
entity.name.function#86C0D1
diff.insertedTextBackground#A2BF8A
diff.removedTextBackground#C16069
meta.diff.header.file#80A0C2
meta.diff.header#86C0D1
invalid.deprecated#C16069
invalid.deprecated#ECCC87
entity.name.function#dac6d6
invalid.deprecated#ECCC87
string#FFFFE0
invalid.deprecated#ECCC87
invalid#C16069
invalid.deprecated#ECCC87
invalid#C16069
variable#A2BF8A
variable#B58DAE
variable#3f3f3f
comment#3f3f3f
comment#eceff4
comment.documentation#A2BF8A
editor.findMatchBackground#A2BF8A
editor.findMatchHighlightBackground#dfdfdf
editor.findMatchBackground, editor.findMatchHighlightBackground#dfdfdf
string.regexp#80A0C2
string.regexp#80A0C2
string.regexp#A2BF8A
meta.preprocessor, keyword.control.import#80A0C2
invalid.deprecated#ECCC87
invalid.deprecated#ECCC87
constant, constant.language, support.constant#B58DAE
constant#B58DAE
storage.type, support.type, entity.name.type#ECCC87
entity.name.type#ECCC87
variable#dac6d6
variable, variable.other#dac6d6
variable#dac6d6
entity.name.function#8EBCBB
entity.name.function, support.function#8EBCBB
entity.name.function#8EBCBB
support.function, support.class, support.type#8EBCBB
keyword, storage, keyword.control, storage.modifier#80A0C2
keyword#80A0C2
comment.documentation#B58DAE
comment.documentation, comment.block.documentation#7d7d7d
comment.documentation#7d7d7d
string, string.quoted, string.template#A2BF8A
string#A2BF8A
comment, punctuation.definition.comment#747474
comment#747474
comment, punctuation.definition.comment#747474
comment#747474
invalid#000000
invalid
invalid.illegal#000000
editor.wordHighlightStrongBackground#C16069
invalid.deprecated#ECCC87
invalid.illegal#C16069
editorCursor.foreground
editorGutter.background#3f3f3f
editorGroup.border#181818
editorGroupHeader.tabsBackground
statusBar.noFolderBackground#525252
statusBar.background, statusBar.foreground
editorLineNumber.activeForeground
editorLineNumber.activeForeground#eceff4
editorLineNumber.foreground#727269
invalid.deprecated
editor.selectionHighlightBackground
editor.selectionBackground, editor.selectionForeground
editor.findMatchBackground#000000

Shiki preview

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

Loading...