Hakko Ryu Theme Collection

Color themes

• 

  Hakko Ryu Theme

• 

  Hakko Ryu Theme (High Contrast)

• 

  Hakko Ryu Theme (Light)

• 

  Hakko Ryu Theme (Soft)

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.activeBorder#8B5CF6
• activityBar.background#FAFAFA
• activityBar.border#E5E7EB
• activityBar.dropBorder#8B5CF6
• activityBar.foreground#8B5CF6
• activityBar.inactiveForeground#6B7280
• activityBarBadge.background#8B5CF6
• activityBarBadge.foreground#FFFFFF
• badge.background#8B5CF6
• badge.foreground#FFFFFF
• button.background#8B5CF6
• button.foreground#FFFFFF
• button.hoverBackground#7C3AED
• dropdown.background#FAFAFA
• dropdown.border#D1D5DB
• dropdown.foreground#1F2937
• editor.background#FAFAFA
• editor.findMatchBackground#FBBF2460
• editor.findMatchHighlightBackground#FBBF2440
• editor.foreground#1F2937
• editor.hoverHighlightBackground#DBEAFE20
• editor.lineHighlightBackground#F5F5F5
• editor.lineHighlightBorder#F3F4F6
• editor.rangeHighlightBackground#DBEAFE15
• editor.selectionBackground#8B5CF630
• editor.selectionHighlightBackground#8B5CF620
• editor.wordHighlightBackground#F3F4F640
• editor.wordHighlightStrongBackground#8B5CF620
• editorCursor.foreground#8B5CF6
• editorLineNumber.activeForeground#8B5CF6
• editorLineNumber.foreground#9CA3AF
• editorWhitespace.foreground#E5E7EB
• input.background#FAFAFA
• input.border#D1D5DB
• input.foreground#1F2937
• input.placeholderForeground#9CA3AF
• inputOption.activeBorder#8B5CF6
• inputValidation.errorBackground#FEE2E2
• inputValidation.errorBorder#DC2626
• list.activeSelectionBackground#8B5CF630
• list.activeSelectionForeground#1F2937
• list.focusBackground#8B5CF620
• list.hoverBackground#F3F4F6
• list.inactiveSelectionBackground#F9FAFB
• minimap.background#F9FAFB
• minimap.findMatchHighlight#FBBF2460
• minimap.selectionHighlight#8B5CF630
• panel.background#FAFAFA
• panel.border#E5E7EB
• panelTitle.activeBorder#8B5CF6
• panelTitle.activeForeground#8B5CF6
• panelTitle.inactiveForeground#6B7280
• progressBar.background#8B5CF6
• scrollbar.shadow#00000010
• scrollbarSlider.activeBackground#6B728080
• scrollbarSlider.background#D1D5DB80
• scrollbarSlider.hoverBackground#9CA3AF80
• sideBar.background#F9FAFB
• sideBar.border#E5E7EB
• sideBar.foreground#374151
• sideBarSectionHeader.background#F3F4F6
• sideBarSectionHeader.border#E5E7EB
• sideBarSectionHeader.foreground#8B5CF6
• sideBarTitle.foreground#8B5CF6
• statusBar.background#8B5CF6
• statusBar.border#7C3AED
• statusBar.debuggingBackground#EF4444
• statusBar.debuggingForeground#FFFFFF
• statusBar.foreground#FFFFFF
• statusBar.noFolderBackground#6B7280
• tab.activeBackground#FAFAFA
• tab.activeBorder#8B5CF6
• tab.activeForeground#1F2937
• tab.border#E5E7EB
• tab.inactiveBackground#F5F5F5
• tab.inactiveForeground#6B7280
• terminal.ansiBlack#1F2937
• terminal.ansiBlue#2563EB
• terminal.ansiBrightBlack#6B7280
• terminal.ansiBrightBlue#60A5FA
• terminal.ansiBrightCyan#22D3EE
• terminal.ansiBrightGreen#34D399
• terminal.ansiBrightMagenta#A78BFA
• terminal.ansiBrightRed#F87171
• terminal.ansiBrightWhite#FFFFFF
• terminal.ansiBrightYellow#FBBF24
• terminal.ansiCyan#0891B2
• terminal.ansiGreen#059669
• terminal.ansiMagenta#8B5CF6
• terminal.ansiRed#DC2626
• terminal.ansiWhite#F9FAFB
• terminal.ansiYellow#D97706
• terminal.background#FAFAFA
• terminal.foreground#374151

tokenColors

TextMate scopes and font styles (syntax highlighting rules).