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.activeBackground#162848
  • activityBar.activeBorder#2BCBBA
  • activityBar.background#0d1e3a
  • activityBar.foreground#2BCBBA
  • activityBar.inactiveForeground#1e3a5a
  • activityBarBadge.background#2BCBBA
  • activityBarBadge.foreground#0a1830
  • badge.background#2BCBBA
  • badge.foreground#0a1830
  • button.background#2BCBBA
  • button.foreground#0a1830
  • editor.background#0a1830
  • editor.foreground#cdd6f4
  • editor.lineHighlightBackground#162848
  • editor.selectionBackground#1e3a66
  • editorBracketMatch.background#2BCBBA22
  • editorBracketMatch.border#2BCBBA
  • editorCursor.foreground#2BCBBA
  • editorGroupHeader.tabsBackground#0d1e3a
  • editorIndentGuide.activeBackground1#2BCBBA
  • editorIndentGuide.background1#162848
  • editorLineNumber.activeForeground#2BCBBA
  • editorLineNumber.foreground#1e3a5a
  • focusBorder#000000
  • input.background#0d1e3a
  • input.border#1e3a5a
  • input.foreground#cdd6f4
  • inputOption.activeBorder#2BCBBA
  • list.activeSelectionBackground#162848
  • list.activeSelectionForeground#2BCBBA
  • list.hoverBackground#112240
  • list.hoverForeground#7ea8c4
  • list.inactiveSelectionBackground#0d1e3a
  • scrollbarSlider.activeBackground#2BCBBA55
  • scrollbarSlider.background#1e3a5a44
  • scrollbarSlider.hoverBackground#2BCBBA33
  • sideBar.background#0d1e3a
  • sideBar.foreground#7ea8c4
  • sideBarSectionHeader.background#0a1830
  • sideBarSectionHeader.foreground#2BCBBA
  • sideBarTitle.foreground#2BCBBA
  • statusBar.background#0a1830
  • statusBar.border#2BCBBA33
  • statusBar.foreground#2BCBBA
  • statusBarItem.hoverBackground#162848
  • tab.activeBackground#0a1830
  • tab.activeBorderTop#2BCBBA
  • tab.activeForeground#cdd6f4
  • tab.border#0d1e3a
  • tab.inactiveBackground#0d1e3a
  • tab.inactiveForeground#5b7694
  • terminal.background#0a1830
  • terminal.foreground#cdd6f4
  • terminalCursor.foreground#2BCBBA
  • titleBar.activeBackground#0a1830
  • titleBar.activeForeground#7ea8c4
  • titleBar.border#0d1e3a

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
keyword, storage.type, keyword.control#cba6f7
string, constant.other.symbol#a6e3a1
variable, support.variable#cdd6f4
entity.name.function, support.function#89b4faitalic
constant.numeric#fab387
invalid, invalid.deprecated#f38ba8
entity.name.type, support.class#f9e2af
punctuation, delimiter#cdd6f4
variable.parameter#fab387italic
constant.language#fab387
punctuation.definition.tag, punctuation.definition.tag.begin, punctuation.definition.tag.end, punctuation.definition.tag.html, punctuation.definition.tag.jsx, punctuation.definition.tag.tsx, punctuation.definition.tag.xml, meta.tag.structure punctuation, meta.tag.inline punctuation, meta.tag.block punctuation#2BCBBA
entity.name.tag, entity.name.tag.html, entity.name.tag.jsx, entity.name.tag.tsx, entity.name.tag.xml, entity.name.tag.vue, meta.tag.structure.any.html entity.name.tag, meta.tag.inline.any.html entity.name.tag, meta.tag.block.any.html entity.name.tag, support.class.component#89b4fa
comment, comment.line, comment.line.double-slash, comment.line.double-dash, comment.line.number-sign, comment.line.percentage, comment.block, comment.block.documentation, comment.block.html, comment.block.erb, comment.block.html.erb, punctuation.definition.comment, punctuation.definition.comment.html, punctuation.definition.comment.begin.html, punctuation.definition.comment.end.html, punctuation.definition.comment.erb, punctuation.definition.comment.begin.html.erb, punctuation.definition.comment.end.html.erb, text.html.erb comment, text.html.erb punctuation.definition.comment, text.html.derivative comment, meta.tag comment, meta.embedded.block.html comment, text.html.erb meta.tag comment, string.comment#6c7086italic
Deepforge by Edgar Ampiire - VS Code Theme