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#01182b
  • activityBar.foreground#cccccc
  • activityBar.inactiveForeground#888888
  • editor.background#011627
  • editor.findMatchBackground#4373c2
  • editor.foreground#a7dbf7
  • editor.selectionBackground#2b4d72
  • editorCursor.background#4373c2
  • editorCursor.foreground#a7dbf7
  • editorGroup.border#15232f
  • editorGutter.background#011627
  • editorLineNumber.activeForeground#0c4994
  • editorLineNumber.foreground#0c4994
  • inlineChatInput.background#01182a
  • inlineChatInput.foreground#a7dbf7
  • inlineChatInput.placeholderForeground#4373c2
  • input.background#01182a
  • input.foreground#a7dbf7
  • input.placeholderForeground#4373c2
  • panel.background#011627
  • sideBar.background#01182b
  • statusBar.background#052951
  • statusBar.foreground#a7dbf7
  • statusBar.noFolderBackground#062e5a
  • statusBarItem.remoteBackground#052951
  • statusBarItem.remoteForeground#a7dbf7

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#00bff9
comment#0c4994
markup.heading#ef5350
entity.name.tag#7590a3
entity.name.tag#00bff9
comment#0c4994
markup.underline.link#d29ffc
keyword#d29ffc
markup.fenced_code, markup.inline.raw
markup.list#ef5350
invalid#ef5350
keyword#ffca28
keyword#8dec95
invalid.deprecated#ffca28
invalid.deprecated
markup.inserted#6bff81
markup.inserted#55cc67
comment#7e57c2
comment#00bff9
comment#ffca28
comment#6bff81
comment#d29ffc
keyword#00bff9
gitDecoration.addedResourceForeground#6bff81
gitDecoration.untrackedResourceForeground#4876ae
gitDecoration.ignoredResourceForeground#0c4994
gitDecoration.renamedResourceForeground#4876ae
gitDecoration.modifiedResourceForeground#7e57c2
breadcrumb.foreground, tree.tableColumnHeader.foreground#8dec95
explorer.fileForeground#a7dbf7
explorer.directoryForeground#a7dbf7
comment.documentation#696969
editorSuggestWidget.highlightForeground#4373c2
editorSuggestWidget.selectedBackground
editorSuggestWidget.background#a7dbf7
invalid#FF0000
invalid#82aaff
invalid#d29ffc
invalid#d29ffc
invalid#6bff81
invalid, invalid.deprecated#ffca28
invalid#ef5350
invalid.deprecated#ffca28
invalid#ef5350
invalid#ef5350
invalid.deprecated#ffca28
invalid#ef5350
invalid.deprecated#ffca28
invalid#ef5350
entity.name.type#00bff9
variable#FFA500
entity.name.function#4D4DDDDDDDDD
constant#FF1493
string#FFA500
comment.documentation#0c4994
diffEditor.insertedTextBackground#6bff81
diffEditor.removedTextBackground#ef5350
invalid#FF0000
entity.name.function#00bff9
diff.insertedTextBackground#6bff81
diff.removedTextBackground#ef5350
meta.diff.header.file#4373c2
meta.diff.header#00bff9
invalid.deprecated#ef5350
invalid.deprecated#ffca28
entity.name.function#a7dbf7
invalid.deprecated#ffca28
string#FFFFE0
invalid.deprecated#ffca28
invalid#ef5350
invalid.deprecated#ffca28
invalid#ef5350
variable#6bff81
variable#d29ffc
variable#5c7485
comment#5c7485
comment#a7dbf7
comment.documentation#6bff81
editor.findMatchBackground#6bff81
editor.findMatchHighlightBackground#c5ebff
editor.findMatchBackground, editor.findMatchHighlightBackground#c5ebff
string.regexp#00bff9
string.regexp#00bff9
string.regexp#8dec95
meta.preprocessor, keyword.control.import#00bff9
invalid.deprecated#ffca28
invalid.deprecated#ffca28
constant, constant.language, support.constant#82aaff
constant#82aaff
storage.type, support.type, entity.name.type#d29ffc
entity.name.type#d29ffc
variable#a7dbf7
variable, variable.other#a7dbf7
variable#a7dbf7
entity.name.function#82aaff
entity.name.function, support.function#82aaff
entity.name.function#82aaff
support.function, support.class, support.type#00bff9
keyword, storage, keyword.control, storage.modifier#00bff9
keyword#00bff9
comment.documentation#82aaff
comment.documentation, comment.block.documentation#4876ae
comment.documentation#4876ae
string, string.quoted, string.template#8dec95
string#8dec95
comment, punctuation.definition.comment#0c4994
comment#0c4994
comment, punctuation.definition.comment#0c4994
comment#0c4994
invalid#00101d
invalid
invalid.illegal#00101d
editor.wordHighlightStrongBackground#ef5350
invalid.deprecated#ffca28
invalid.illegal#ef5350
editorCursor.foreground
editorGutter.background#5c7485
editorGroup.border#15232f
editorGroupHeader.tabsBackground#a7dbf7
statusBar.noFolderBackground#7590a3
statusBar.background, statusBar.foreground#a7dbf7
editorLineNumber.activeForeground
editorLineNumber.activeForeground#0c4994
editorLineNumber.foreground#0c4994
invalid.deprecated
editor.selectionHighlightBackground
editor.selectionBackground, editor.selectionForeground
editor.findMatchBackground#00101d

Shiki preview

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

Loading...