Naruto Shinobi Theme

Color themes

• 

  Naruto Kurama Nine-Tails

• 

  Naruto Kushina Uzumaki - Red Hot-Blooded Habanero

• 

  Naruto Madara Uchiha - 4th Great Ninja War

• 

  Naruto Madara Uchiha - Ten Tails Jinchuriki

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#121221
• activityBar.activeBorder#f2f2f2
• activityBar.background#06060a
• activityBar.border#181924
• activityBar.foreground#f2f2f2
• activityBar.inactiveForeground#6d6f86
• activityBarBadge.background#8a7ed8
• activityBarBadge.foreground#ffffff
• badge.background#8a7ed8
• badge.foreground#ffffff
• breadcrumb.activeSelectionForeground#cfd1ff
• breadcrumb.focusForeground#f2f2f2
• breadcrumb.foreground#8c8ea5
• button.background#8a7ed8
• button.foreground#ffffff
• button.hoverBackground#7667d2
• button.secondaryBackground#2b2c3d
• button.secondaryForeground#e9e8f5
• button.secondaryHoverBackground#37384a
• diffEditor.border#181924
• diffEditor.insertedTextBackground#9bb38d30
• diffEditor.removedTextBackground#ff7a9a30
• dropdown.background#161726
• dropdown.border#37384a
• dropdown.foreground#ffffff
• editor.background#09090c
• editor.findMatchBackground#cfd1ff90
• editor.findMatchHighlightBackground#8a7ed860
• editor.foreground#f0effa
• editor.inactiveSelectionBackground#f2f2f240
• editor.lineHighlightBackground#171526
• editor.selectionBackground#f2f2f280
• editor.selectionHighlightBackground#8a7ed840
• editor.wordHighlightBackground#7f7f8a40
• editor.wordHighlightStrongBackground#8a7ed860
• editorBracketMatch.background#8a7ed840
• editorBracketMatch.border#cfd1ff
• editorCursor.foreground#f2f2f2
• editorError.foreground#ff7a9a
• editorGroupHeader.tabsBackground#06060a
• editorGroupHeader.tabsBorder#181924
• editorHint.foreground#8a7ed8
• editorIndentGuide.activeBackground1#f2f2f2
• editorIndentGuide.background1#2b2c3d
• editorInfo.foreground#cfd1ff
• editorLineNumber.activeForeground#d8d9e8
• editorLineNumber.foreground#6d6f86
• editorWarning.foreground#f4d58d
• editorWhitespace.foreground#37384a
• focusBorder#f2f2f2
• gitDecoration.conflictingResourceForeground#f4d58d
• gitDecoration.deletedResourceForeground#ff7a9a
• gitDecoration.ignoredResourceForeground#6d6f86
• gitDecoration.modifiedResourceForeground#cfd1ff
• gitDecoration.untrackedResourceForeground#9bb38d
• input.background#161726
• input.border#37384a
• input.foreground#ffffff
• input.placeholderForeground#767891
• inputOption.activeBorder#f2f2f2
• list.activeSelectionBackground#dcdce380
• list.activeSelectionForeground#121221
• list.highlightForeground#f2f2f2
• list.hoverBackground#171526
• list.hoverForeground#ffffff
• list.inactiveSelectionBackground#1b1c2a
• list.inactiveSelectionForeground#e4e2f0
• minimap.errorHighlight#ff7a9a
• minimap.findMatchHighlight#f2f2f290
• minimap.selectionHighlight#8a7ed880
• minimap.warningHighlight#f4d58d
• minimapGutter.addedBackground#9bb38d
• minimapGutter.deletedBackground#ff7a9a
• minimapGutter.modifiedBackground#cfd1ff
• notificationCenter.border#181924
• notificationCenterHeader.background#121221
• notificationLink.foreground#cfd1ff
• notifications.background#121221
• notifications.border#37384a
• notifications.foreground#f0effa
• panel.background#09090c
• panel.border#181924
• panelTitle.activeBorder#f2f2f2
• panelTitle.activeForeground#ffffff
• panelTitle.inactiveForeground#8c8ea5
• peekView.border#f2f2f2
• peekViewEditor.background#161726
• peekViewEditor.matchHighlightBackground#f2f2f250
• peekViewResult.background#0c0c12
• peekViewResult.matchHighlightBackground#cfd1ff50
• peekViewResult.selectionBackground#f2f2f280
• peekViewTitle.background#161726
• peekViewTitleDescription.foreground#8c8ea5
• peekViewTitleLabel.foreground#f2f2f2
• scrollbarSlider.activeBackground#cfd1ff90
• scrollbarSlider.background#f2f2f250
• scrollbarSlider.hoverBackground#f2f2f280
• sideBar.background#0c0c12
• sideBar.border#181924
• sideBar.foreground#e4e2f0
• sideBarSectionHeader.background#121221
• sideBarSectionHeader.border#181924
• sideBarSectionHeader.foreground#cfd1ff
• sideBarTitle.foreground#f2f2f2
• statusBar.background#f2f2f2
• statusBar.border#d7d7df
• statusBar.debuggingBackground#8a7ed8
• statusBar.debuggingForeground#ffffff
• statusBar.foreground#121221
• statusBarItem.prominentBackground#cfd1ff
• statusBarItem.prominentHoverBackground#b3b6ff
• tab.activeBackground#121221
• tab.activeBorderTop#f2f2f2
• tab.activeForeground#ffffff
• tab.border#121221
• tab.hoverBackground#171526
• tab.hoverBorder#8a7ed8
• tab.hoverForeground#ffffff
• tab.inactiveBackground#0c0c12
• tab.inactiveForeground#8c8ea5
• terminal.ansiBlack#14141d
• terminal.ansiBlue#cfd1ff
• terminal.ansiBrightBlack#6d6f86
• terminal.ansiBrightBlue#e0e2ff
• terminal.ansiBrightCyan#c5ddff
• terminal.ansiBrightGreen#bdd1b3
• terminal.ansiBrightMagenta#b8aef6
• terminal.ansiBrightRed#ff9ab1
• terminal.ansiBrightWhite#ffffff
• terminal.ansiBrightYellow#ffe0aa
• terminal.ansiCyan#9fc8ff
• terminal.ansiGreen#9bb38d
• terminal.ansiMagenta#8a7ed8
• terminal.ansiRed#ff7a9a
• terminal.ansiWhite#f0effa
• terminal.ansiYellow#f4d58d
• terminal.background#09090c
• terminal.foreground#f0effa
• terminalCursor.foreground#f2f2f2
• titleBar.activeBackground#06060a
• titleBar.activeForeground#f2f2f2
• titleBar.border#181924
• titleBar.inactiveBackground#06060a
• titleBar.inactiveForeground#6d6f86

tokenColors

TextMate scopes and font styles (syntax highlighting rules).