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#22272E
  • activityBar.border#636E7B4D
  • activityBar.foreground#E0C1B3
  • editor.background#2D333B
  • editor.foreground#ADB5BD
  • editor.lineHighlightBackground#373E47
  • editor.selectionBackground#CB40424D
  • editorCursor.foreground#E0C1B3
  • editorGroup.border#636E7B4D
  • sideBar.background#22272E
  • sideBar.border#636E7B4D
  • sideBar.foreground#ADB5BD
  • statusBar.background#22272E
  • statusBar.foreground#ADB5BD
  • terminal.ansiBlack#2D333B
  • terminal.ansiBlue#BB9AF7
  • terminal.ansiCyan#7AA2F7
  • terminal.ansiGreen#7AA2F7
  • terminal.ansiMagenta#BB9AF7
  • terminal.ansiRed#CB4042
  • terminal.ansiWhite#ADB5BD
  • terminal.ansiYellow#E6C384
  • titleBar.activeBackground#22272E
  • titleBar.activeForeground#ADB5BD
  • titleBar.inactiveBackground#22272E
  • titleBar.inactiveForeground#ADB5BD99

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#636E7Bitalic
keyword, storage, storage.type#E0C1B3
string, string.quoted#7AA2F7
entity.name.function, support.function#BB9AF7
variable, variable.parameter#E6C384
entity.name.type, entity.name.class, variable.other.constant#E0C1B3bold
support.type.property-name.json, string.key.json, entity.name.tag.yaml#E0C1B3
markup.heading, markup.heading.markdown#E0C1B3bold
markup.bold, markup.bold.markdownbold
markup.italic, markup.italic.markdownitalic
markup.raw, markup.fenced_code.block, markup.inline.raw#7AA2F7
markup.quote, markup.quote.markdown#636E7Bitalic
markup.underline.link, string.other.link#BB9AF7underline
Ukiyo-Tone (浮世トーン) by Mohit Sharma - VS Code Theme