✨ feat: Add multi-template theme support with Tokyonight variants

[kalidyasin]

✨ feat: Add multi-template theme support with Tokyonight variants

What This PR Does

Adds support for generating themes from multiple templates, starting with:

• Tokyonight variants (Storm, Day, Night, Moon)
• Maintains existing Catppuccin compatibility

Key Additions

✅ Dynamic template handling system
✅ 4 new Tokyonight color schemes
✅ Template-specific color validation

Technical Approach

1. Template Isolation

   • Separate TOML templates for each theme family
   • Shared generation logic with theme-specific overrides

2. Color Safety

   • Mode-aware color contrast checks (dark/light)

3. Backward Compatibility

   • Existing Catppuccin themes remain unchanged

Template System

scripts/
├── templates/
│   ├── catppuccin.toml
│   └── tokyonight.toml  # Add new templates here as <name>_template.toml
└── generate.js  # Update VARIANTS object with new template references

Plugin Enhancement

This is a significant addition to Yazi's theming ecosystem, enabling:

• Simplified creation of new flavor packs
• Consistent theming across plugin components
• Community-driven theme development

Verification Checklist

• Tokyonight variants render correctly
• Catppuccin output remains identical to previous versions
• All template placeholders are properly substituted

Benefits:

• Provides users with additional attractive and customizable color schemes.
• Enhances the flexibility and user experience of Yazi.

I believe this PR is a valuable addition to the Yazi project.

[sxyazi]

Thanks for the change, but I don't want to introduce a new template file because it would increase maintenance cost.

The whole purpose of template.toml is to create a theme-agnostic target, i.e., ideally, it should work for all themes.

I have a few questions:

• Why is a separate template needed for tokyonight? Can't the existing template.toml be used for tokyonight?
• If template.toml can't be used, what's the reason exactly?

[kalidyasin]

While aiming for theme-agnosticism, Tokyonight's structure fundamentally differs in:

1. Structural Divergence Between Theme Families

Tokyo Night requires components that don't exist in Catppuccin's design system:

# Tokyo Night-specific sections
[confirm]  
btn_yes = { bg = "${surface2}" }

[spot]     
border = { fg = "${border_accent}" }

2. Needs Additional Colors

• Needs 10 extra color variables

3. Forcing these into a single template would:

• ❌ Require dummy sections for Catppuccin
• ❌ Bloat variables with unused fallbacks
• ❌ Couple unrelated theme architectures

4. Separate templates actually reduce maintenance by:

• ✅ Isolating theme-specific logic
• ✅ Clean Validation: No "if TokyoNight..." conditional logic
• ✅ Allowing clean evolution of each theme family

I'm happy to demonstrate how this approach keeps the core engine simple while accommodating structural differences between theme philosophies.

[sxyazi]

Tokyo Night requires components that don't exist in Catppuccin's design system:

Which components, can you elaborate on them?

template.toml is a Yazi-specific color system, newly designed based on Yazi's preset themes. Its goal is to be compatible with all themes, and it's unrelated to the Catppuccin design system, as it's not specific to Catppuccin.

Needs 10 extra color variables

Which colors? Can these colors be merged or omitted? If they can't be omitted, meaning they are necessary colors, is it possible to support them on top of the existing template.toml color system?

Currently, Yazi's color system supports 16 colors. From my experience, this should be enough. Too many colors usually lead to more visual confusion. Supporting all colors in a single theme is not the goal here. For example, Catppuccin provides 26 colors, but Yazi only uses 16 of them.

[kalidyasin]

[confirm]
border  = { fg = "#0db9d7" }
title   = { fg = "#27a1b9" }
content = {}
list    = {}
btn_yes = { bg = "#283457" }
btn_no  = {}
btn_labels = [ "  [Y]es  ", "  (N)o  " ]



[spot]
border  = { fg = "#27a1b9" }
title   = { fg = "#27a1b9" }

This Sections don't exist in Catppuccin's design.

and

const VARIANTS = {
    "Tokyonight Storm": {
		text: "#c0caf5",
		text_secondary: "#a9b1d6",
		text_inverted: "#1d202f",
		background: "#24283b",
		background_alt: "#1f2335",

		surface: "#292e42",
		surface1: "#3b4261",
		surface2: "#2e3c64",
		surface3: "#22374b",

		primary: "#7aa2f7",
		secondary: "#bb9af7",
		tertiary: "#9d7cd8",

		accent: "#0db9d7",
		border_accent: "#29a4bd",

		red: "#f7768e",
		red_dark: "#db4b4b",
		green: "#9ece6a",
		green_light: "#73daca",
		yellow: "#e0af68",
		orange: "#ff9e64",

		cyan: "#41a6b5",
		cyan_light: "#7dcfff",

		blue_dark: "#3d59a1",

		onSurface1: "#3b4261",
		onSurface2: "#414868",
		onSurface3: "#565f89",

	},
}

here are the full color variables

Here is some Screenshots , i don't think it is visually confusing

[sxyazi]

I noticed that Tokyonight provides 33 colors, which seems like too many to me. It's hard to use all of them. Is it possible to refine it down to just 16 colors? Even for a theme like Catppuccin, which offers 36 colors, only 16 are actually used, and there's not much of a noticeable visual difference. As for other popular themes like Solarized and Dracula, they provide even fewer colors—16 and 11, respectively.

[kalidyasin]

I Tested and it is Differences from Original Tokyonight Theme

[kalidyasin]

If it is too many for you don't worry close the PR