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#2a373e
  • activityBar.foreground#cccccc
  • activityBar.inactiveForeground#888888
  • editor.background#263238
  • editor.findMatchBackground#c792ea
  • editor.foreground#EEFFFF
  • editor.selectionBackground#171F24
  • editorCursor.background#c792ea
  • editorCursor.foreground#EEFFFF
  • editorGroup.border#222D32
  • editorGutter.background#263238
  • editorLineNumber.activeForeground#EEFFFF
  • editorLineNumber.foreground#37474F
  • inlineChatInput.background#29363c
  • inlineChatInput.foreground#ffffff
  • inlineChatInput.placeholderForeground#c792ea
  • input.background#29363c
  • input.foreground#ffffff
  • input.placeholderForeground#c792ea
  • panel.background#263238
  • sideBar.background#2a373e
  • statusBar.background#222D32
  • statusBar.foreground#9BA3A7
  • statusBar.noFolderBackground#253137
  • statusBarItem.remoteBackground#222D32
  • statusBarItem.remoteForeground#9BA3A7

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#89DDFF
comment#556369
markup.heading#c792ea
entity.name.tag#89DDFF
entity.name.tag#89DDFF
comment#556369
markup.underline.link#c792ea
keyword#c792ea
markup.fenced_code, markup.inline.raw
markup.list#ff5370
invalid#ff5370
keyword#ffcb6b
keyword#c3e88d
invalid.deprecated#ffcb6b
invalid.deprecated
markup.inserted#c3e88d
markup.inserted#9cb970
comment#bb80b3
comment#89DDFF
comment#f78c6c
comment#c3e88d
comment#c792ea
keyword#89DDFF
gitDecoration.addedResourceForeground#c3e88d
gitDecoration.untrackedResourceForeground#556369
gitDecoration.ignoredResourceForeground#556369
gitDecoration.renamedResourceForeground#556369
gitDecoration.modifiedResourceForeground#bb80b3
breadcrumb.foreground, tree.tableColumnHeader.foreground#c3e88d
explorer.fileForeground#EEFFFF
explorer.directoryForeground#EEFFFF
comment.documentation#696969
editorSuggestWidget.highlightForeground#c792ea
editorSuggestWidget.selectedBackground
editorSuggestWidget.background#EEFFFF
invalid#FF0000
invalid#82aaff
invalid#c792ea
invalid#c792ea
invalid#c3e88d
invalid, invalid.deprecated#ffcb6b
invalid#ff5370
invalid.deprecated#ffcb6b
invalid#ff5370
invalid#ff5370
invalid.deprecated#ffcb6b
invalid#ff5370
invalid.deprecated#ffcb6b
invalid#ff5370
entity.name.type#89DDFF
variable#FFA500
entity.name.function#4D4DDDDDDDDD
constant#FF1493
string#FFA500
comment.documentation#556369
diffEditor.insertedTextBackground#c3e88d
diffEditor.removedTextBackground#ff5370
invalid#FF0000
entity.name.function#89DDFF
diff.insertedTextBackground#c3e88d
diff.removedTextBackground#ff5370
meta.diff.header.file#82aaff
meta.diff.header#89DDFF
invalid.deprecated#ff5370
invalid.deprecated#ffcb6b
entity.name.function#ffcb6b
invalid.deprecated#ffcb6b
string#FFFFE0
invalid.deprecated#ffcb6b
invalid#ff5370
invalid.deprecated#ffcb6b
invalid#ff5370
variable#c3e88d
variable#c792ea
variable#37474F
comment#37474F
comment#EEFFFF
comment.documentation#c3e88d
editor.findMatchBackground#c3e88d
editor.findMatchHighlightBackground#EEFFFF
editor.findMatchBackground, editor.findMatchHighlightBackground#EEFFFF
string.regexp#89DDFF
string.regexp#89DDFF
string.regexp#c3e88d
meta.preprocessor, keyword.control.import#89DDFF
invalid.deprecated#ffcb6b
invalid.deprecated#ffcb6b
constant, constant.language, support.constant#f78c6c
constant#f78c6c
storage.type, support.type, entity.name.type#c792ea
entity.name.type#c792ea
variable#ffcb6b
variable, variable.other#ffcb6b
variable#ffcb6b
entity.name.function#82aaff
entity.name.function, support.function#82aaff
entity.name.function#82aaff
support.function, support.class, support.type#82aaff
keyword, storage, keyword.control, storage.modifier#89DDFF
keyword#89DDFF
comment.documentation#f78c6c
comment.documentation, comment.block.documentation#556369
comment.documentation#556369
string, string.quoted, string.template#c3e88d
string#c3e88d
comment, punctuation.definition.comment#556369
comment#556369
comment, punctuation.definition.comment#556369
comment#556369
invalid#171F24
invalid
invalid.illegal#171F24
editor.wordHighlightStrongBackground#ff5370
invalid.deprecated#ffcb6b
invalid.illegal#ff5370
editorCursor.foreground
editorGutter.background#314048
editorGroup.border#222D32
editorGroupHeader.tabsBackground#9BA3A7
statusBar.noFolderBackground#556369
statusBar.background, statusBar.foreground#9BA3A7
editorLineNumber.activeForeground
editorLineNumber.activeForeground#EEFFFF
editorLineNumber.foreground#37474F
invalid.deprecated
editor.selectionHighlightBackground
editor.selectionBackground, editor.selectionForeground
editor.findMatchBackground#171F24

Shiki preview

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

Loading...

Emacs Themes Ported - Coding Theme