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#2c2e40
  • activityBar.foreground#cccccc
  • activityBar.inactiveForeground#888888
  • editor.background#282a3a
  • editor.findMatchBackground#ffd76d
  • editor.foreground#eaf2f1
  • editor.selectionBackground#3a3d4b
  • editorCursor.background#eaf2f1
  • editorCursor.foreground#eaf2f1
  • editorGroup.border#3d3f4d
  • editorGutter.background#282a3a
  • editorLineNumber.activeForeground#888d94
  • editorLineNumber.foreground#535763
  • inlineChatInput.background#2b2d3f
  • inlineChatInput.foreground#ffffff
  • inlineChatInput.placeholderForeground#ffd76d
  • input.background#2b2d3f
  • input.foreground#ffffff
  • input.placeholderForeground#ffd76d
  • panel.background#282a3a
  • sideBar.background#2c2e40
  • statusBar.background#3a3d4b
  • statusBar.foreground#eaf2f1
  • statusBar.noFolderBackground#282a3a
  • statusBarItem.remoteBackground#3a3d4b
  • statusBarItem.remoteForeground#eaf2f1

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#9cd1bb—
comment#696d77—
markup.heading#ffd76d—
entity.name.tag#ff657a—
entity.name.tag#9cd1bb—
comment#696d77—
markup.underline.link#9cd1bb—
keyword#9cd1bb—
markup.fenced_code, markup.inline.raw——
markup.list#ff657a—
invalid#ff657a—
keyword#ff95be—
keyword#ffd76d—
invalid.deprecated#ff95be—
invalid.deprecated——
markup.inserted#bad761—
markup.inserted#94ac4d—
comment#c39ac9—
comment#9cd1bb—
comment#ff95be—
comment#bad761—
comment#9cd1bb—
keyword#9cd1bb—
gitDecoration.addedResourceForeground#bad761—
gitDecoration.untrackedResourceForeground#ff95be—
gitDecoration.ignoredResourceForeground#696d77—
gitDecoration.renamedResourceForeground#ff95be—
gitDecoration.modifiedResourceForeground#c39ac9—
breadcrumb.foreground, tree.tableColumnHeader.foreground#ffd76d—
explorer.fileForeground#eaf2f1—
explorer.directoryForeground#eaf2f1—
comment.documentation#696969—
editorSuggestWidget.highlightForeground#ffd76d—
editorSuggestWidget.selectedBackground——
editorSuggestWidget.background#eaf2f1—
invalid#FF0000—
invalid#bad761—
invalid#9cd1bb—
invalid#9cd1bb—
invalid#bad761—
invalid, invalid.deprecated#ff95be—
invalid#ff657a—
invalid.deprecated#ff95be—
invalid#ff657a—
invalid.deprecated——
invalid——
invalid#ff657a—
invalid.deprecated#ff95be—
invalid#ff657a—
invalid.deprecated#ff95be—
invalid#ff657a—
entity.name.type#9cd1bb—
variable#FFA500—
entity.name.function#4D4DDDDDDDDD—
constant#FF1493—
string#FFA500—
comment.documentation#696d77—
diffEditor.insertedTextBackground#bad761—
diffEditor.removedTextBackground#ff657a—
invalid#FF0000—
entity.name.function#9cd1bb—
diff.insertedTextBackground#bad761—
diff.removedTextBackground#ff657a—
meta.diff.header.file#9cd1bb—
meta.diff.header#9cd1bb—
invalid.deprecated#ff657a—
invalid.deprecated#ff95be—
entity.name.function#eaf2f1—
invalid.deprecated#ff95be—
string#FFFFE0—
invalid.deprecated#ff95be—
invalid#ff657a—
invalid.deprecated#ff95be—
invalid#ff657a—
variable#bad761—
variable#9cd1bb—
variable#535763—
comment#535763—
comment#eaf2f1—
comment.documentation#bad761—
editor.findMatchBackground#eaf2f1—
editor.findMatchHighlightBackground#eaf2f1—
editor.findMatchBackground, editor.findMatchHighlightBackground#eaf2f1—
string.regexp#ff657a—
string.regexp#ff657a—
string.regexp#ffd76d—
meta.preprocessor, keyword.control.import#ff657a—
invalid.deprecated#ff95be—
invalid.deprecated#ff95be—
constant, constant.language, support.constant#c39ac9—
constant#c39ac9—
storage.type, support.type, entity.name.type#9cd1bb—
entity.name.type#9cd1bb—
variable#eaf2f1—
variable, variable.other#eaf2f1—
variable#eaf2f1—
entity.name.function#bad761—
entity.name.function, support.function#bad761—
entity.name.function#bad761—
support.function, support.class, support.type#c39ac9—
keyword, storage, keyword.control, storage.modifier#9cd1bb—
keyword#9cd1bb—
comment.documentation#c39ac9—
comment.documentation, comment.block.documentation#8e9199—
comment.documentation#8e9199—
string, string.quoted, string.template#ffd76d—
string#ffd76d—
comment, punctuation.definition.comment#696d77—
comment#696d77—
comment, punctuation.definition.comment#696d77—
comment#696d77—
invalid#131313—
invalid——
invalid.illegal#ff657a—
editor.wordHighlightStrongBackground#bad761—
invalid.deprecated#ff95be—
invalid.illegal#ff657a—
editorCursor.foreground——
editorGutter.background#535763—
editorGroup.border#3d3f4d—
editorGroupHeader.tabsBackground#eaf2f1—
statusBar.noFolderBackground#eaf2f1—
statusBar.background, statusBar.foreground#eaf2f1—
editorLineNumber.activeForeground——
editorLineNumber.activeForeground#888d94—
editorLineNumber.foreground#535763—
invalid.deprecated——
editor.selectionHighlightBackground——
editor.selectionBackground, editor.selectionForeground——
editor.findMatchBackground#131313—