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#252525
  • activityBar.foreground#cccccc
  • activityBar.inactiveForeground#888888
  • editor.background#222222
  • editor.findMatchBackground#bbbbbb
  • editor.foreground#d7d5d1
  • editor.selectionBackground#0e0c0a
  • editorCursor.background#bbbbbb
  • editorCursor.foreground#d7d5d1
  • editorGroup.border#d7d5d1
  • editorGutter.background#222222
  • editorLineNumber.activeForeground#bbbbbb
  • editorLineNumber.foreground#444444
  • inlineChatInput.background#252525
  • inlineChatInput.foreground#d7d5d1
  • inlineChatInput.placeholderForeground#bbbbbb
  • input.background#252525
  • input.foreground#d7d5d1
  • input.placeholderForeground#bbbbbb
  • panel.background#222222
  • sideBar.background#252525
  • statusBar.background#383838
  • statusBar.foreground#ffffff
  • statusBar.noFolderBackground#323232
  • statusBarItem.remoteBackground#383838
  • statusBarItem.remoteForeground#ffffff

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#d7d5d1
comment#545053
markup.heading#bbbbbb
entity.name.tag#d7d5d1
entity.name.tag#d7d5d1
comment#545053
markup.underline.link#d7d5d1
keyword#d7d5d1
markup.fenced_code, markup.inline.raw
markup.list#d7d5d1
invalid#d7d5d1
keyword#d7d5d1
keyword#838083
invalid.deprecated#d7d5d1
invalid.deprecated
markup.inserted#e7e5e3
markup.inserted#b8b7b5
comment#d7d5d1
comment#d7d5d1
comment#d7d5d1
comment#d7d5d1
comment#d7d5d1
keyword#d7d5d1
gitDecoration.addedResourceForeground#e7e5e3
gitDecoration.untrackedResourceForeground#545053
gitDecoration.ignoredResourceForeground#545053
gitDecoration.renamedResourceForeground#545053
gitDecoration.modifiedResourceForeground#d7d5d1
breadcrumb.foreground, tree.tableColumnHeader.foreground#838083
explorer.fileForeground#d7d5d1
explorer.directoryForeground#d7d5d1
comment.documentation#696969
editorSuggestWidget.highlightForeground#bbbbbb
editorSuggestWidget.selectedBackground
editorSuggestWidget.background#d7d5d1
invalid#FF0000
invalid#d7d5d1
invalid#d7d5d1
invalid#d7d5d1
invalid#d7d5d1
invalid, invalid.deprecated#d7d5d1
invalid#d7d5d1
invalid.deprecated#d7d5d1
invalid#d7d5d1
invalid#d7d5d1
invalid.deprecated#d7d5d1
invalid#d7d5d1
invalid.deprecated#d7d5d1
invalid#d7d5d1
entity.name.type#d7d5d1
variable#FFA500
entity.name.function#4D4DDDDDDDDD
constant#FF1493
string#FFA500
comment.documentation#545053
diffEditor.insertedTextBackground#d7d5d1
diffEditor.removedTextBackground#d7d5d1
invalid#FF0000
entity.name.function#d7d5d1
diff.insertedTextBackground#d7d5d1
diff.removedTextBackground#d7d5d1
meta.diff.header.file#d7d5d1
meta.diff.header#d7d5d1
invalid.deprecated#d7d5d1
invalid.deprecated#d7d5d1
entity.name.function#838083
invalid.deprecated#d7d5d1
string#FFFFE0
invalid.deprecated#d7d5d1
invalid#d7d5d1
invalid.deprecated#d7d5d1
invalid#d7d5d1
variable#d7d5d1
variable#d7d5d1
variable#d7d5d1
comment#d7d5d1
comment#d7d5d1
comment.documentation#d7d5d1
editor.findMatchBackground#d7d5d1
editor.findMatchHighlightBackground#050505
editor.findMatchBackground, editor.findMatchHighlightBackground#050505
string.regexp#d7d5d1
string.regexp#d7d5d1
string.regexp#838083
meta.preprocessor, keyword.control.import#d7d5d1
invalid.deprecated#d7d5d1
invalid.deprecated#d7d5d1
constant, constant.language, support.constant#838083
constant#838083
storage.type, support.type, entity.name.type#d7d5d1
entity.name.type#d7d5d1
variable#838083
variable, variable.other#838083
variable#838083
entity.name.function#d7d5d1
entity.name.function, support.function#d7d5d1
entity.name.function#d7d5d1
support.function, support.class, support.type#838083
keyword, storage, keyword.control, storage.modifier#d7d5d1
keyword#d7d5d1
comment.documentation#838083
comment.documentation, comment.block.documentation#545053
comment.documentation#545053
string, string.quoted, string.template#838083
string#838083
comment, punctuation.definition.comment#545053
comment#545053
comment, punctuation.definition.comment#545053
comment#545053
invalid#838083
invalid
invalid.illegal#838083
editor.wordHighlightStrongBackground#d7d5d1
invalid.deprecated#d7d5d1
invalid.illegal#d7d5d1
editorCursor.foreground
editorGutter.background#202020
editorGroup.border#d7d5d1
editorGroupHeader.tabsBackground
statusBar.noFolderBackground#6f6f6f
statusBar.background, statusBar.foreground
editorLineNumber.activeForeground
editorLineNumber.activeForeground#bbbbbb
editorLineNumber.foreground#444444
invalid.deprecated
editor.selectionHighlightBackground
editor.selectionBackground, editor.selectionForeground
editor.findMatchBackground#838083

Shiki preview

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

Loading...