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#202020
  • activityBar.foreground#ffcc33
  • activityBarBadge.background#ffcc33
  • activityBarBadge.foreground#000000
  • button.background#ff8000
  • button.foreground#ffffff
  • button.hoverBackground#ff9933
  • editor.background#1c1c1c
  • editor.foreground#f0f0f0
  • editor.lineHighlightBackground#333333
  • editor.selectionBackground#ff8000
  • editor.selectionHighlightBackground#eb9b4b
  • editor.wordHighlightBackground#e5b482
  • editor.wordHighlightStrongBackground#ffcc66
  • editorBracketMatch.background#ffcc33
  • editorBracketMatch.border#ffcc33
  • editorCursor.foreground#ffb84d
  • sideBar.background#2c2c2c
  • sideBar.foreground#f0f0f0
  • sideBarTitle.foreground#ff8000
  • statusBar.background#202020
  • statusBar.debuggingBackground#ff3333
  • statusBar.foreground#ff8000
  • statusBar.noFolderBackground#202020
  • tab.activeBackground#333333
  • tab.activeForeground#ffb84d
  • tab.hoverBackground#ff8000
  • tab.inactiveBackground#2c2c2c
  • tab.inactiveForeground#b3b3b3
  • terminal.foreground#ffcc33
  • terminalCursor.foreground#ffcc33

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#7d7d7ditalic
string#ffcc33
keyword#ff8000
variable#ffcc66
function#ff9933
number#ff3333

Shiki preview

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

Loading...

Naruto Saga Theme - Coding Theme