Skip to main content
Coding Theme

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.

  • activityBarBadge.background#007ACC
  • editor.background#1E1E1E
  • editor.foreground#D4D4D4
  • editor.inactiveSelectionBackground#3A3D41
  • editor.selectionHighlightBackground#404040
  • editorIndentGuide.activeBackground1#707070
  • editorIndentGuide.background1#404040
  • input.placeholderForeground#A6A6A6
  • list.dropBackground#383B3D
  • menu.background#252526
  • menu.foreground#CCCCCC
  • settings.numberInputBackground#292929
  • settings.textInputBackground#292929
  • sideBarTitle.foreground#BBBBBB
  • statusBar.debuggingBackground#083452
  • statusBar.noFolderBackground#1177BB
  • terminal.ansiBlack#333333
  • terminal.ansiBlue#6A7EC8
  • terminal.ansiBrightBlack#666666
  • terminal.ansiBrightBlue#819AFF
  • terminal.ansiBrightCyan#66D9EF
  • terminal.ansiBrightGreen#A6E22E
  • terminal.ansiBrightMagenta#AE81FF
  • terminal.ansiBrightRed#F92672
  • terminal.ansiBrightWhite#F8F8F2
  • terminal.ansiBrightYellow#E2E22E
  • terminal.ansiCyan#56ADBC
  • terminal.ansiGreen#86B42B
  • terminal.ansiMagenta#8C6BC8
  • terminal.ansiRed#C4265E
  • terminal.ansiWhite#E3E3DD
  • terminal.ansiYellow#B3B42B
  • titleBar.activeBackground#333333

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
entity.name.section.markdown, entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-element.css, meta.embedded, meta.template.expression, source, storage.modifier.import.java, text.html.derivative, variable#F8F8F2
markup.list, meta.paragraph.markdown, meta.structure.dictionary.json string.quoted.double.json, punctuation.definition.tag.begin, punctuation.definition.tag.end#CFCFC2
comment, meta.diff#75715E
entity.name.filename.find-in-files, markup.changed, support.constant.font-name.css, string#E6DB74
variable.parameter.url#E6DB74
entity.name.tag, keyword, markup.deleted, markup.heading, punctuation.definition.template-expression, punctuation.section.embedded, storage#F92672
constant, variable.language.wildcard.java#AE81FF
constant.numeric.line-number.find-in-files - match#AE81FFA0
markup.bold, markup.italic, markup.underline.link.image.markdown, support.function, support.constant#66D9EF
support.type, support.class, storage.type#66D9EFitalic
entity.name.function, entity.other.attribute-name, markup.inserted, markup.quote, meta.function-call.generic.python#A6E22E
entity.name.type.class#A6E22Eunderline
entity.other.inherited-class#A6E22Eitalic underline
markup.inline.raw, variable.language#FD971F
variable.parameter#FD971Fitalic
invalid#F8F8F0
token.debug-token#B267E6
token.info-token#6796E6
token.warn-token#CD9731
token.error-token#F44747

Shiki preview

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

Loading...

Monokai Dark Theme - Coding Theme