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.

  • activityBar.background#EAF6FB
  • activityBar.foreground#1F4E79
  • activityBar.inactiveForeground#7AA6C2
  • activityBarBadge.background#FFD400
  • activityBarBadge.foreground#1B1B1B
  • editor.background#F4FBFF
  • editor.foreground#2E3440
  • editor.inactiveSelectionBackground#D6EEF9
  • editor.lineHighlightBackground#E8F4FA
  • editor.selectionBackground#BEE7F7
  • editorCursor.foreground#F2994A
  • list.activeSelectionBackground#BEE7F7
  • list.activeSelectionForeground#1F3C5B
  • list.hoverBackground#DFF1F8
  • list.hoverForeground#1F3C5B
  • sideBar.background#F0F9FD
  • sideBar.border#D6EEF9
  • sideBar.foreground#334E68
  • sideBarSectionHeader.background#E1F2FA
  • sideBarSectionHeader.foreground#1F4E79
  • sideBarTitle.foreground#1F4E79
  • statusBar.background#E1F2FA
  • statusBar.border#CFE8F3
  • statusBar.foreground#1B4965
  • titleBar.activeBackground#DFF1F8
  • titleBar.activeForeground#1F3C5B
  • titleBar.inactiveBackground#EDF7FB
  • titleBar.inactiveForeground#7A9AB3

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#FFD400italic
keyword, storage.type, storage.modifier, keyword.control, keyword.control.flow, keyword.operator.new, keyword.operator.expression#FFD400bold
variable, variable.other, variable.parameter, variable.language#D62828
entity.name.function, support.function, meta.function-call#8B4513
entity.name.type, support.type, storage.type.class, entity.name.class, entity.name.struct, entity.name.interface#1E6FD9
string, string.quoted, string.template#654321
constant.numeric#E6396F
keyword.operator, punctuation, punctuation.separator, punctuation.terminator, meta.brace, meta.delimiter#B48EED
Morenatsu – Torahiko Summer Light by HiroyukiOoshima - VS Code Theme