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#0d0b23
  • activityBar.foreground#cccccc
  • activityBar.inactiveForeground#888888
  • editor.background#0c0a20
  • editor.findMatchBackground#1ea8fc
  • editor.foreground#f2f3f7
  • editor.selectionBackground#1f1147
  • editorCursor.background#1ea8fc
  • editorCursor.foreground#f2f3f7
  • editorGroup.border#BA45A3
  • editorGutter.background#0c0a20
  • editorLineNumber.activeForeground#f2f3f7
  • editorLineNumber.foreground#2d2844
  • inlineChatInput.background#0d0b23
  • inlineChatInput.foreground#f2f3f7
  • inlineChatInput.placeholderForeground#1ea8fc
  • input.background#0d0b23
  • input.foreground#f2f3f7
  • input.placeholderForeground#1ea8fc
  • panel.background#0c0a20
  • sideBar.background#0d0b23
  • statusBar.background#0a091c
  • statusBar.foreground#f2f3f7
  • statusBar.noFolderBackground#0c0a20
  • statusBarItem.remoteBackground#0a091c
  • statusBarItem.remoteForeground#f2f3f7

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#ff2afc
comment#546A90
markup.heading#e61f44
entity.name.tag#BA45A3
entity.name.tag#ff2afc
comment#546A90
markup.underline.link#A875FF
keyword#ffd400
markup.fenced_code, markup.inline.raw
markup.list#e61f44
invalid#e61f44
keyword#ffd400
keyword#7984D1
invalid.deprecated#ffd400
invalid.deprecated
markup.inserted#a7da1e
markup.inserted#85ae18
comment#df85ff
comment#ff2afc
comment#cf433e
comment#a7da1e
comment#ff2afc
keyword#42c6ff
gitDecoration.addedResourceForeground#a7da1e
gitDecoration.untrackedResourceForeground#A875FF
gitDecoration.ignoredResourceForeground#546A90
gitDecoration.renamedResourceForeground#A875FF
gitDecoration.modifiedResourceForeground#df85ff
breadcrumb.foreground, tree.tableColumnHeader.foreground#7984D1
explorer.fileForeground#f2f3f7
explorer.directoryForeground#f2f3f7
comment.documentation#696969
editorSuggestWidget.highlightForeground#ff2afc
editorSuggestWidget.selectedBackground
editorSuggestWidget.background#f2f3f7
invalid#FF0000
invalid#42c6ff
invalid#ffd400
invalid#ffd400
invalid#a7da1e
invalid, invalid.deprecated#ffd400
invalid#e61f44
invalid.deprecated#ffd400
invalid#e61f44
invalid#e61f44
invalid.deprecated#ffd400
invalid#e61f44
invalid.deprecated#ffd400
invalid#e61f44
entity.name.type#ff2afc
variable#FFA500
entity.name.function#4D4DDDDDDDDD
constant#FF1493
string#FFA500
comment.documentation#546A90
diffEditor.insertedTextBackground#a7da1e
diffEditor.removedTextBackground#e61f44
invalid#FF0000
entity.name.function#42c6ff
diff.insertedTextBackground#a7da1e
diff.removedTextBackground#e61f44
meta.diff.header.file#1ea8fc
meta.diff.header#42c6ff
invalid.deprecated#e61f44
invalid.deprecated#ffd400
entity.name.function#df85ff
invalid.deprecated#ffd400
string#FFFFE0
invalid.deprecated#ffd400
invalid#e61f44
invalid.deprecated#ffd400
invalid#e61f44
variable#a7da1e
variable#ff2afc
variable#546A90
comment#546A90
comment#f2f3f7
comment.documentation#a7da1e
editor.findMatchBackground#a7da1e
editor.findMatchHighlightBackground#919ad9
editor.findMatchBackground, editor.findMatchHighlightBackground#919ad9
string.regexp#ff2afc
string.regexp#ff2afc
string.regexp#7984D1
meta.preprocessor, keyword.control.import#ff2afc
invalid.deprecated#ffd400
invalid.deprecated#ffd400
constant, constant.language, support.constant#df85ff
constant#df85ff
storage.type, support.type, entity.name.type#ffd400
entity.name.type#ffd400
variable#df85ff
variable, variable.other#df85ff
variable#df85ff
entity.name.function#42c6ff
entity.name.function, support.function#42c6ff
entity.name.function#42c6ff
support.function, support.class, support.type#1ea8fc
keyword, storage, keyword.control, storage.modifier#ff2afc
keyword#ff2afc
comment.documentation#df85ff
comment.documentation, comment.block.documentation#A875FF
comment.documentation#A875FF
string, string.quoted, string.template#7984D1
string#7984D1
comment, punctuation.definition.comment#546A90
comment#546A90
comment, punctuation.definition.comment#546A90
comment#546A90
invalid#131033
invalid
invalid.illegal#131033
editor.wordHighlightStrongBackground#e61f44
invalid.deprecated#ffd400
invalid.illegal#e61f44
editorCursor.foreground
editorGutter.background#2d2844
editorGroup.border#BA45A3
editorGroupHeader.tabsBackground
statusBar.noFolderBackground#BA45A3
statusBar.background, statusBar.foreground
editorLineNumber.activeForeground
editorLineNumber.activeForeground#f2f3f7
editorLineNumber.foreground#2d2844
invalid.deprecated
editor.selectionHighlightBackground
editor.selectionBackground, editor.selectionForeground
editor.findMatchBackground#131033

Shiki preview

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

Loading...