Naruto Shinobi Theme

Color themes

• 

  Naruto Pain/Nagato - Rinnegan God

• 

  Naruto Sage Mode

• 

  Naruto Sakura Haruno - Cherry Blossom Storm

• 

  Naruto Sasuke Uchiha - Sage of Six Paths

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#121528
• activityBar.activeBorder#9370DB
• activityBar.background#05070f
• activityBar.border#191d31
• activityBar.foreground#9370DB
• activityBar.inactiveForeground#6b7196
• activityBarBadge.background#6A0DAD
• activityBarBadge.foreground#ffffff
• badge.background#9370DB
• badge.foreground#ffffff
• breadcrumb.activeSelectionForeground#7da2ff
• breadcrumb.focusForeground#a78bfa
• breadcrumb.foreground#8d94ba
• button.background#6A0DAD
• button.foreground#ffffff
• button.hoverBackground#7f2dc0
• button.secondaryBackground#272b42
• button.secondaryForeground#e7e7f7
• button.secondaryHoverBackground#353b57
• diffEditor.border#191d31
• diffEditor.insertedTextBackground#7fc79a30
• diffEditor.removedTextBackground#ff6f9130
• dropdown.background#15192b
• dropdown.border#353b57
• dropdown.foreground#ffffff
• editor.background#090a12
• editor.findMatchBackground#9370DB90
• editor.findMatchHighlightBackground#4169E160
• editor.foreground#e7e7f7
• editor.inactiveSelectionBackground#6A0DAD50
• editor.lineHighlightBackground#151729
• editor.selectionBackground#6A0DAD80
• editor.selectionHighlightBackground#4169E140
• editor.wordHighlightBackground#6A5ACD35
• editor.wordHighlightStrongBackground#6A0DAD60
• editorBracketMatch.background#6A0DAD45
• editorBracketMatch.border#4169E1
• editorCursor.foreground#9370DB
• editorError.foreground#ff6f91
• editorGroupHeader.tabsBackground#05070f
• editorGroupHeader.tabsBorder#191d31
• editorHint.foreground#b39ddb
• editorIndentGuide.activeBackground1#9370DB
• editorIndentGuide.background1#272b42
• editorInfo.foreground#7da2ff
• editorLineNumber.activeForeground#9370DB
• editorLineNumber.foreground#6b7196
• editorWarning.foreground#f0c36d
• editorWhitespace.foreground#323552
• focusBorder#9370DB
• gitDecoration.conflictingResourceForeground#f0c36d
• gitDecoration.deletedResourceForeground#ff6f91
• gitDecoration.ignoredResourceForeground#6b7196
• gitDecoration.modifiedResourceForeground#7da2ff
• gitDecoration.untrackedResourceForeground#7fc79a
• input.background#15192b
• input.border#353b57
• input.foreground#ffffff
• input.placeholderForeground#787fa5
• inputOption.activeBorder#9370DB
• list.activeSelectionBackground#6A0DAD80
• list.activeSelectionForeground#ffffff
• list.highlightForeground#a78bfa
• list.hoverBackground#191d31
• list.hoverForeground#ffffff
• list.inactiveSelectionBackground#1d2138
• list.inactiveSelectionForeground#dcdcf0
• minimap.errorHighlight#ff6f91
• minimap.findMatchHighlight#6A0DAD90
• minimap.selectionHighlight#4169E180
• minimap.warningHighlight#f0c36d
• minimapGutter.addedBackground#7fc79a
• minimapGutter.deletedBackground#ff6f91
• minimapGutter.modifiedBackground#7da2ff
• notificationCenter.border#191d31
• notificationCenterHeader.background#121528
• notificationLink.foreground#7da2ff
• notifications.background#121528
• notifications.border#353b57
• notifications.foreground#e7e7f7
• panel.background#090a12
• panel.border#191d31
• panelTitle.activeBorder#9370DB
• panelTitle.activeForeground#ffffff
• panelTitle.inactiveForeground#8d94ba
• peekView.border#9370DB
• peekViewEditor.background#15192b
• peekViewEditor.matchHighlightBackground#6A0DAD50
• peekViewResult.background#0b0d17
• peekViewResult.matchHighlightBackground#6A0DAD50
• peekViewResult.selectionBackground#6A0DAD80
• peekViewTitle.background#15192b
• peekViewTitleDescription.foreground#8d94ba
• peekViewTitleLabel.foreground#a78bfa
• scrollbarSlider.activeBackground#9370DBa0
• scrollbarSlider.background#6A0DAD60
• scrollbarSlider.hoverBackground#6A0DAD90
• sideBar.background#0b0d17
• sideBar.border#191d31
• sideBar.foreground#dcdcf0
• sideBarSectionHeader.background#121528
• sideBarSectionHeader.border#191d31
• sideBarSectionHeader.foreground#a78bfa
• sideBarTitle.foreground#9370DB
• statusBar.background#4169E1
• statusBar.border#2742a3
• statusBar.debuggingBackground#6A0DAD
• statusBar.debuggingForeground#ffffff
• statusBar.foreground#ffffff
• statusBarItem.prominentBackground#9370DB
• statusBarItem.prominentHoverBackground#a78bfa
• tab.activeBackground#121528
• tab.activeBorderTop#9370DB
• tab.activeForeground#ffffff
• tab.border#121528
• tab.hoverBackground#191d31
• tab.hoverBorder#4169E1
• tab.hoverForeground#ffffff
• tab.inactiveBackground#0b0d17
• tab.inactiveForeground#8d94ba
• terminal.ansiBlack#131621
• terminal.ansiBlue#7da2ff
• terminal.ansiBrightBlack#6b7196
• terminal.ansiBrightBlue#a8c0ff
• terminal.ansiBrightCyan#b9dcff
• terminal.ansiBrightGreen#a8d8bb
• terminal.ansiBrightMagenta#b99af0
• terminal.ansiBrightRed#ff9db3
• terminal.ansiBrightWhite#ffffff
• terminal.ansiBrightYellow#f6d694
• terminal.ansiCyan#9cc8ff
• terminal.ansiGreen#7fc79a
• terminal.ansiMagenta#9370DB
• terminal.ansiRed#ff6f91
• terminal.ansiWhite#e7e7f7
• terminal.ansiYellow#f0c36d
• terminal.background#090a12
• terminal.foreground#e7e7f7
• terminalCursor.foreground#9370DB
• titleBar.activeBackground#05070f
• titleBar.activeForeground#9370DB
• titleBar.border#191d31
• titleBar.inactiveBackground#05070f
• titleBar.inactiveForeground#6b7196

tokenColors

TextMate scopes and font styles (syntax highlighting rules).