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#1c1c1c
  • activityBar.foreground#cccccc
  • activityBar.inactiveForeground#888888
  • editor.background#191919
  • editor.findMatchBackground#FFFFFF
  • editor.foreground#d4d4d4
  • editor.selectionBackground#282828
  • editorCursor.background#FFFFFF
  • editorCursor.foreground#d4d4d4
  • editorGroup.border#121212
  • editorGutter.background#191919
  • editorLineNumber.activeForeground#d4d4d4
  • editorLineNumber.foreground#515151
  • inlineChatInput.background#1b1b1b
  • inlineChatInput.foreground#d4d4d4
  • inlineChatInput.placeholderForeground#FFFFFF
  • input.background#1b1b1b
  • input.foreground#d4d4d4
  • input.placeholderForeground#FFFFFF
  • panel.background#191919
  • sideBar.background#1c1c1c
  • statusBar.background#2467D0
  • statusBar.foreground#f4f4f4
  • statusBar.noFolderBackground#181818
  • statusBarItem.remoteBackground#2467D0
  • statusBarItem.remoteForeground#f4f4f4

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#FF5E5E
comment#6D6D6D
markup.heading#FFFFFF
entity.name.tag#FF5E5E
entity.name.tag#FF5E5E
comment#6D6D6D
markup.underline.link#C586C0
keyword#E9FDAC
markup.fenced_code, markup.inline.raw
markup.list#FF5E5E
invalid#FF5E5E
keyword#E9FDAC
keyword#FBE3BF
invalid.deprecated#E9FDAC
invalid.deprecated
markup.inserted#468800
markup.inserted#386c00
comment#BB80B3
comment#FF5E5E
comment#FC9354
comment#468800
comment#C586C0
keyword#85DDFF
gitDecoration.addedResourceForeground#468800
gitDecoration.untrackedResourceForeground#6D6D6D
gitDecoration.ignoredResourceForeground#6D6D6D
gitDecoration.renamedResourceForeground#6D6D6D
gitDecoration.modifiedResourceForeground#8CDAFF
breadcrumb.foreground, tree.tableColumnHeader.foreground#d4d4d4
explorer.fileForeground#d4d4d4
explorer.directoryForeground#d4d4d4
comment.documentation#696969
editorSuggestWidget.highlightForeground#FFFFFF
editorSuggestWidget.selectedBackground
editorSuggestWidget.background#d4d4d4
invalid#FF0000
invalid#8CDAFF
invalid#E9FDAC
invalid#E9FDAC
invalid#468800
invalid, invalid.deprecated#E9FDAC
invalid#FF5E5E
invalid.deprecated#E9FDAC
invalid#FF5E5E
invalid#FF5E5E
invalid.deprecated#E9FDAC
invalid#FF5E5E
invalid.deprecated#E9FDAC
invalid#FF5E5E
entity.name.type#FF5E5E
variable#FFA500
entity.name.function#4D4DDDDDDDDD
constant#FF1493
string#FFA500
comment.documentation#6D6D6D
diffEditor.insertedTextBackground#468800
diffEditor.removedTextBackground#FF5E5E
invalid#FF0000
entity.name.function#85DDFF
diff.insertedTextBackground#468800
diff.removedTextBackground#FF5E5E
meta.diff.header.file#8CDAFF
meta.diff.header#85DDFF
invalid.deprecated#FF5E5E
invalid.deprecated#E9FDAC
entity.name.function#E9FDAC
invalid.deprecated#E9FDAC
string#FFFFE0
invalid.deprecated#E9FDAC
invalid#FF5E5E
invalid.deprecated#E9FDAC
invalid#FF5E5E
variable#468800
variable#C586C0
variable#777778
comment#777778
comment#d4d4d4
comment.documentation#468800
editor.findMatchBackground#468800
editor.findMatchHighlightBackground#d4d4d4
editor.findMatchBackground, editor.findMatchHighlightBackground#d4d4d4
string.regexp#FF5E5E
string.regexp#FF5E5E
string.regexp#FBE3BF
meta.preprocessor, keyword.control.import#FF5E5E
invalid.deprecated#E9FDAC
invalid.deprecated#E9FDAC
constant, constant.language, support.constant#FC9354
constant#FC9354
storage.type, support.type, entity.name.type#E9FDAC
entity.name.type#E9FDAC
variable#E9FDAC
variable, variable.other#E9FDAC
variable#E9FDAC
entity.name.function#8CDAFF
entity.name.function, support.function#8CDAFF
entity.name.function#8CDAFF
support.function, support.class, support.type#6699CC
keyword, storage, keyword.control, storage.modifier#FF5E5E
keyword#FF5E5E
comment.documentation#FC9354
comment.documentation, comment.block.documentation#6D6D6D
comment.documentation#6D6D6D
string, string.quoted, string.template#FBE3BF
string#FBE3BF
comment, punctuation.definition.comment#6D6D6D
comment#6D6D6D
comment, punctuation.definition.comment#6D6D6D
comment#6D6D6D
invalid#171F24
invalid
invalid.illegal#171F24
editor.wordHighlightStrongBackground#FF5E5E
invalid.deprecated#E9FDAC
invalid.illegal#FF5E5E
editorCursor.foreground
editorGutter.background#4b474c
editorGroup.border#121212
editorGroupHeader.tabsBackground#f4f4f4
statusBar.noFolderBackground#8CDAFF
statusBar.background, statusBar.foreground#f4f4f4
editorLineNumber.activeForeground
editorLineNumber.activeForeground#d4d4d4
editorLineNumber.foreground#515151
invalid.deprecated
editor.selectionHighlightBackground
editor.selectionBackground, editor.selectionForeground
editor.findMatchBackground#171F24

Shiki preview

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

Loading...