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#322f5e
  • activityBar.foreground#cccccc
  • activityBar.inactiveForeground#888888
  • editor.background#2d2b55
  • editor.findMatchBackground#82aaff
  • editor.foreground#e3e9fa
  • editor.selectionBackground#b362ff
  • editorCursor.background#82aaff
  • editorCursor.foreground#e3e9fa
  • editorGroup.border#1e1e3f
  • editorGutter.background#2d2b55
  • editorLineNumber.activeForeground#e3e9fa
  • editorLineNumber.foreground#444a73
  • inlineChatInput.background#312e5c
  • inlineChatInput.foreground#ffffff
  • inlineChatInput.placeholderForeground#82aaff
  • input.background#312e5c
  • input.foreground#ffffff
  • input.placeholderForeground#82aaff
  • panel.background#2d2b55
  • sideBar.background#322f5e
  • statusBar.background#1b1b38
  • statusBar.foreground#b4c2f0
  • statusBar.noFolderBackground#28264c
  • statusBarItem.remoteBackground#1b1b38
  • statusBarItem.remoteForeground#b4c2f0

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#ff9d00
comment#b362ff
markup.heading#fad000
entity.name.tag#ff9d00
entity.name.tag#ff9d00
comment#b362ff
markup.underline.link#ff9d00
keyword#3ad900
markup.fenced_code, markup.inline.raw
markup.list#ff000d
invalid#ff000d
keyword#fad000
keyword#a5ff90
invalid.deprecated#fad000
invalid.deprecated
markup.inserted#00ff00
markup.inserted#00cc00
comment#f989d3
comment#ff9d00
comment#ff9d00
comment#3ad900
comment#ff9d00
keyword#ff628c
gitDecoration.addedResourceForeground#00ff00
gitDecoration.untrackedResourceForeground#c589ff
gitDecoration.ignoredResourceForeground#b362ff
gitDecoration.renamedResourceForeground#c589ff
gitDecoration.modifiedResourceForeground#82aaff
breadcrumb.foreground, tree.tableColumnHeader.foreground#a5ff90
explorer.fileForeground#e3e9fa
explorer.directoryForeground#82aaff
comment.documentation#696969
editorSuggestWidget.highlightForeground#82aaff
editorSuggestWidget.selectedBackground
editorSuggestWidget.background#e3e9fa
invalid#FF0000
invalid#fad726
invalid#3ad900
invalid#3ad900
invalid#3ad900
invalid, invalid.deprecated#fad000
invalid#ff000d
invalid.deprecated#fad000
invalid#ff000d
invalid#ff000d
invalid.deprecated#fad000
invalid#ff000d
invalid.deprecated#fad000
invalid#ff000d
entity.name.type#ff9d00
variable#FFA500
entity.name.function#4D4DDDDDDDDD
constant#FF1493
string#FFA500
comment.documentation#b362ff
diffEditor.insertedTextBackground#3ad900
diffEditor.removedTextBackground#ff000d
invalid#FF0000
entity.name.function#ff628c
diff.insertedTextBackground#3ad900
diff.removedTextBackground#ff000d
meta.diff.header.file#82aaff
meta.diff.header#ff628c
invalid.deprecated#ff000d
invalid.deprecated#fad000
entity.name.function#37fea1
invalid.deprecated#fad000
string#FFFFE0
invalid.deprecated#fad000
invalid#ff000d
invalid.deprecated#fad000
invalid#ff000d
variable#3ad900
variable#ff9d00
variable#444a73
comment#444a73
comment#e3e9fa
comment.documentation#3ad900
editor.findMatchBackground#3ad900
editor.findMatchHighlightBackground#e3e9fa
editor.findMatchBackground, editor.findMatchHighlightBackground#e3e9fa
string.regexp#ff9d00
string.regexp#ff9d00
string.regexp#a5ff90
meta.preprocessor, keyword.control.import#ff9d00
invalid.deprecated#fad000
invalid.deprecated#fad000
constant, constant.language, support.constant#fb94ff
constant#fb94ff
storage.type, support.type, entity.name.type#3ad900
entity.name.type#3ad900
variable#37fea1
variable, variable.other#37fea1
variable#37fea1
entity.name.function#fad726
entity.name.function, support.function#fad726
entity.name.function#fad726
support.function, support.class, support.type#ff9d00
keyword, storage, keyword.control, storage.modifier#ff9d00
keyword#ff9d00
comment.documentation#fb94ff
comment.documentation, comment.block.documentation#c589ff
comment.documentation#c589ff
string, string.quoted, string.template#a5ff90
string#a5ff90
comment, punctuation.definition.comment#b362ff
comment#b362ff
comment, punctuation.definition.comment#b362ff
comment#b362ff
invalid#161a2a
invalid
invalid.illegal#161a2a
editor.wordHighlightStrongBackground#ff000d
invalid.deprecated#fad000
invalid.illegal#ff000d
editorCursor.foreground
editorGutter.background
editorGroup.border#1e1e3f
editorGroupHeader.tabsBackground#b4c2f0
statusBar.noFolderBackground#b362ff
statusBar.background, statusBar.foreground#b4c2f0
editorLineNumber.activeForeground
editorLineNumber.activeForeground#e3e9fa
editorLineNumber.foreground#444a73
invalid.deprecated
editor.selectionHighlightBackground
editor.selectionBackground, editor.selectionForeground
editor.findMatchBackground#161a2a

Shiki preview

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

Loading...