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#000000
  • activityBar.foreground#57a4e4
  • activityBarBadge.background#ff9800
  • activityBarBadge.foreground#000000
  • breadcrumb.activeSelectionForeground#ffcc00
  • breadcrumb.background#070c15
  • breadcrumb.focusForeground#ffffff
  • breadcrumb.foreground#d8dee9
  • editor.background#091121
  • editor.foreground#d8dee9
  • editor.selectionBackground#3b4252
  • editor.selectionHighlightBackground#3d3752b5
  • editorBracketMatch.background#88aad03d
  • editorBracketMatch.border#000000
  • editorCursor.foreground#ffe600
  • editorGutter.background#080f1c
  • editorLineNumber.activeForeground#ffffff
  • editorLineNumber.foreground#616e88
  • minimap.background#070c15
  • minimap.errorHighlight#bf616a
  • minimap.findMatchHighlight#ffcc00
  • minimap.selectionHighlight#354c68c5
  • minimap.warningHighlight#ebcb8b
  • panel.background#04080f
  • panel.border#4c566a
  • panelTitle.activeForeground#ffffff
  • panelTitle.inactiveForeground#909399
  • sideBar.background#070c15
  • sideBar.foreground#92b8eb
  • sideBarSectionHeader.background#00091a
  • sideBarSectionHeader.foreground#57a4e4
  • sideBarTitle.foreground#eceff4
  • terminal.background#080f1c
  • terminal.border#4c566a
  • terminal.tab.activeBorder#ffcc00
  • titleBar.activeBackground#00040b
  • titleBar.activeForeground#669fc7

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
variable#ff0000italic
entity.name.function#5e99f1italic
comment#5b5a53italic
entity.name.type, entity.name.classitalic
variable.parameter#88c0d0bold
tonmoy-vscode-theme by Tonmoy-Theme - VS Code Theme