php-flasher/docs/pages/themes/index.html

---
permalink: /themes/
title: Theme Gallery
description: Explore 26 beautiful notification themes for PHPFlasher. From minimal to material design, iOS to Slack-style - find the perfect look for your application.
---

<div class="container max-w-7xl mx-auto px-4 lg:px-6 py-4">
    <!-- Try All Themes Section -->
    <section class="bg-white rounded-2xl border border-slate-200 p-8 mb-8">
        <div class="text-center mb-6">
            <h2 class="text-2xl font-bold text-slate-800 mb-2">Try All Themes</h2>
            <p class="text-slate-600">Click any button to see the theme in action</p>
        </div>

        <div class="flex flex-wrap justify-center gap-2" id="theme-demo-buttons">
            <button onclick="demoTheme('flasher')" class="px-4 py-2 bg-indigo-100 hover:bg-indigo-200 text-indigo-700 rounded-lg text-sm font-medium transition-colors">Flasher</button>
            <button onclick="demoTheme('material')" class="px-4 py-2 bg-blue-100 hover:bg-blue-200 text-blue-700 rounded-lg text-sm font-medium transition-colors">Material</button>
            <button onclick="demoTheme('ios')" class="px-4 py-2 bg-slate-100 hover:bg-slate-200 text-slate-700 rounded-lg text-sm font-medium transition-colors">iOS</button>
            <button onclick="demoTheme('slack')" class="px-4 py-2 bg-purple-100 hover:bg-purple-200 text-purple-700 rounded-lg text-sm font-medium transition-colors">Slack</button>
            <button onclick="demoTheme('amazon')" class="px-4 py-2 bg-orange-100 hover:bg-orange-200 text-orange-700 rounded-lg text-sm font-medium transition-colors">Amazon</button>
            <button onclick="demoTheme('facebook')" class="px-4 py-2 bg-blue-100 hover:bg-blue-200 text-blue-700 rounded-lg text-sm font-medium transition-colors">Facebook</button>
            <button onclick="demoTheme('google')" class="px-4 py-2 bg-red-100 hover:bg-red-200 text-red-700 rounded-lg text-sm font-medium transition-colors">Google</button>
            <button onclick="demoTheme('minimal')" class="px-4 py-2 bg-slate-100 hover:bg-slate-200 text-slate-700 rounded-lg text-sm font-medium transition-colors">Minimal</button>
            <button onclick="demoTheme('neon')" class="px-4 py-2 bg-pink-100 hover:bg-pink-200 text-pink-700 rounded-lg text-sm font-medium transition-colors">Neon</button>
            <button onclick="demoTheme('ruby')" class="px-4 py-2 bg-red-100 hover:bg-red-200 text-red-700 rounded-lg text-sm font-medium transition-colors">Ruby</button>
            <button onclick="demoTheme('sapphire')" class="px-4 py-2 bg-blue-100 hover:bg-blue-200 text-blue-700 rounded-lg text-sm font-medium transition-colors">Sapphire</button>
            <button onclick="demoTheme('emerald')" class="px-4 py-2 bg-emerald-100 hover:bg-emerald-200 text-emerald-700 rounded-lg text-sm font-medium transition-colors">Emerald</button>
            <button onclick="demoTheme('jade')" class="px-4 py-2 bg-teal-100 hover:bg-teal-200 text-teal-700 rounded-lg text-sm font-medium transition-colors">Jade</button>
            <button onclick="demoTheme('amber')" class="px-4 py-2 bg-amber-100 hover:bg-amber-200 text-amber-700 rounded-lg text-sm font-medium transition-colors">Amber</button>
            <button onclick="demoTheme('onyx')" class="px-4 py-2 bg-slate-700 hover:bg-slate-800 text-white rounded-lg text-sm font-medium transition-colors">Onyx</button>
            <button onclick="demoTheme('crystal')" class="px-4 py-2 bg-cyan-100 hover:bg-cyan-200 text-cyan-700 rounded-lg text-sm font-medium transition-colors">Crystal</button>
            <button onclick="demoTheme('aurora')" class="px-4 py-2 bg-gradient-to-r from-green-100 to-purple-100 hover:from-green-200 hover:to-purple-200 text-purple-700 rounded-lg text-sm font-medium transition-colors">Aurora</button>
        </div>
    </section>

    <!-- Theme Categories -->
    <section id="themes">
        <!-- Brand-Inspired Themes -->
        <div class="mb-12">
            <div class="flex items-center mb-6">
                <div class="w-10 h-10 bg-indigo-100 rounded-lg flex items-center justify-center mr-3">
                    <i class="fas fa-building text-indigo-600"></i>
                </div>
                <div>
                    <h2 class="text-xl font-bold text-slate-800">Brand-Inspired</h2>
                    <p class="text-sm text-slate-500">Familiar styles from popular platforms</p>
                </div>
            </div>

            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
                <!-- Material -->
                <a href="/theme/material/" class="group relative bg-white rounded-2xl border border-slate-200 overflow-hidden hover:shadow-xl transition-all duration-300 hover:-translate-y-1">
                    <div class="h-24 bg-gradient-to-br from-blue-500 to-indigo-600 flex items-center justify-center">
                        <i class="fab fa-google text-4xl text-white/80"></i>
                    </div>
                    <div class="p-4">
                        <h3 class="font-semibold text-slate-800 mb-1">Material</h3>
                        <p class="text-sm text-slate-500">Google Material Design</p>
                    </div>
                    <div class="absolute top-3 right-3 w-8 h-8 bg-white/20 rounded-full flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity">
                        <i class="fas fa-arrow-right text-white text-sm"></i>
                    </div>
                </a>

                <!-- iOS -->
                <a href="/theme/ios/" class="group relative bg-white rounded-2xl border border-slate-200 overflow-hidden hover:shadow-xl transition-all duration-300 hover:-translate-y-1">
                    <div class="h-24 bg-gradient-to-br from-slate-600 to-slate-800 flex items-center justify-center">
                        <i class="fab fa-apple text-4xl text-white/80"></i>
                    </div>
                    <div class="p-4">
                        <h3 class="font-semibold text-slate-800 mb-1">iOS</h3>
                        <p class="text-sm text-slate-500">Apple iOS notifications</p>
                    </div>
                    <div class="absolute top-3 right-3 w-8 h-8 bg-white/20 rounded-full flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity">
                        <i class="fas fa-arrow-right text-white text-sm"></i>
                    </div>
                </a>

                <!-- Slack -->
                <a href="/theme/slack/" class="group relative bg-white rounded-2xl border border-slate-200 overflow-hidden hover:shadow-xl transition-all duration-300 hover:-translate-y-1">
                    <div class="h-24 bg-gradient-to-br from-purple-500 to-purple-700 flex items-center justify-center">
                        <i class="fab fa-slack text-4xl text-white/80"></i>
                    </div>
                    <div class="p-4">
                        <h3 class="font-semibold text-slate-800 mb-1">Slack</h3>
                        <p class="text-sm text-slate-500">Slack messaging style</p>
                    </div>
                    <div class="absolute top-3 right-3 w-8 h-8 bg-white/20 rounded-full flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity">
                        <i class="fas fa-arrow-right text-white text-sm"></i>
                    </div>
                </a>

                <!-- Amazon -->
                <a href="/theme/amazon/" class="group relative bg-white rounded-2xl border border-slate-200 overflow-hidden hover:shadow-xl transition-all duration-300 hover:-translate-y-1">
                    <div class="h-24 bg-gradient-to-br from-orange-400 to-orange-600 flex items-center justify-center">
                        <i class="fab fa-amazon text-4xl text-white/80"></i>
                    </div>
                    <div class="p-4">
                        <h3 class="font-semibold text-slate-800 mb-1">Amazon</h3>
                        <p class="text-sm text-slate-500">Amazon-inspired alerts</p>
                    </div>
                    <div class="absolute top-3 right-3 w-8 h-8 bg-white/20 rounded-full flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity">
                        <i class="fas fa-arrow-right text-white text-sm"></i>
                    </div>
                </a>

                <!-- Facebook -->
                <a href="/theme/facebook/" class="group relative bg-white rounded-2xl border border-slate-200 overflow-hidden hover:shadow-xl transition-all duration-300 hover:-translate-y-1">
                    <div class="h-24 bg-gradient-to-br from-blue-500 to-blue-700 flex items-center justify-center">
                        <i class="fab fa-facebook text-4xl text-white/80"></i>
                    </div>
                    <div class="p-4">
                        <h3 class="font-semibold text-slate-800 mb-1">Facebook</h3>
                        <p class="text-sm text-slate-500">Facebook notification style</p>
                    </div>
                    <div class="absolute top-3 right-3 w-8 h-8 bg-white/20 rounded-full flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity">
                        <i class="fas fa-arrow-right text-white text-sm"></i>
                    </div>
                </a>

                <!-- Google -->
                <a href="/theme/google/" class="group relative bg-white rounded-2xl border border-slate-200 overflow-hidden hover:shadow-xl transition-all duration-300 hover:-translate-y-1">
                    <div class="h-24 bg-gradient-to-br from-red-500 via-yellow-500 to-green-500 flex items-center justify-center">
                        <i class="fab fa-google text-4xl text-white/80"></i>
                    </div>
                    <div class="p-4">
                        <h3 class="font-semibold text-slate-800 mb-1">Google</h3>
                        <p class="text-sm text-slate-500">Google-style notifications</p>
                    </div>
                    <div class="absolute top-3 right-3 w-8 h-8 bg-white/20 rounded-full flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity">
                        <i class="fas fa-arrow-right text-white text-sm"></i>
                    </div>
                </a>
            </div>
        </div>

        <!-- Gemstone Themes -->
        <div class="mb-12">
            <div class="flex items-center mb-6">
                <div class="w-10 h-10 bg-purple-100 rounded-lg flex items-center justify-center mr-3">
                    <i class="fas fa-gem text-purple-600"></i>
                </div>
                <div>
                    <h2 class="text-xl font-bold text-slate-800">Gemstone Collection</h2>
                    <p class="text-sm text-slate-500">Elegant color palettes inspired by precious stones</p>
                </div>
            </div>

            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
                <!-- Ruby -->
                <a href="/theme/ruby/" class="group relative bg-white rounded-2xl border border-slate-200 overflow-hidden hover:shadow-xl transition-all duration-300 hover:-translate-y-1">
                    <div class="h-24 bg-gradient-to-br from-red-500 to-rose-600 flex items-center justify-center">
                        <i class="fas fa-gem text-4xl text-white/80"></i>
                    </div>
                    <div class="p-4">
                        <h3 class="font-semibold text-slate-800 mb-1">Ruby</h3>
                        <p class="text-sm text-slate-500">Bold ruby red accents</p>
                    </div>
                    <div class="absolute top-3 right-3 w-8 h-8 bg-white/20 rounded-full flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity">
                        <i class="fas fa-arrow-right text-white text-sm"></i>
                    </div>
                </a>

                <!-- Sapphire -->
                <a href="/theme/sapphire/" class="group relative bg-white rounded-2xl border border-slate-200 overflow-hidden hover:shadow-xl transition-all duration-300 hover:-translate-y-1">
                    <div class="h-24 bg-gradient-to-br from-blue-500 to-indigo-600 flex items-center justify-center">
                        <i class="fas fa-gem text-4xl text-white/80"></i>
                    </div>
                    <div class="p-4">
                        <h3 class="font-semibold text-slate-800 mb-1">Sapphire</h3>
                        <p class="text-sm text-slate-500">Elegant blue elegance</p>
                    </div>
                    <div class="absolute top-3 right-3 w-8 h-8 bg-white/20 rounded-full flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity">
                        <i class="fas fa-arrow-right text-white text-sm"></i>
                    </div>
                </a>

                <!-- Emerald -->
                <a href="/theme/emerald/" class="group relative bg-white rounded-2xl border border-slate-200 overflow-hidden hover:shadow-xl transition-all duration-300 hover:-translate-y-1">
                    <div class="h-24 bg-gradient-to-br from-emerald-500 to-green-600 flex items-center justify-center">
                        <i class="fas fa-gem text-4xl text-white/80"></i>
                    </div>
                    <div class="p-4">
                        <h3 class="font-semibold text-slate-800 mb-1">Emerald</h3>
                        <p class="text-sm text-slate-500">Modern green palette</p>
                    </div>
                    <div class="absolute top-3 right-3 w-8 h-8 bg-white/20 rounded-full flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity">
                        <i class="fas fa-arrow-right text-white text-sm"></i>
                    </div>
                </a>

                <!-- Jade -->
                <a href="/theme/jade/" class="group relative bg-white rounded-2xl border border-slate-200 overflow-hidden hover:shadow-xl transition-all duration-300 hover:-translate-y-1">
                    <div class="h-24 bg-gradient-to-br from-teal-500 to-green-600 flex items-center justify-center">
                        <i class="fas fa-leaf text-4xl text-white/80"></i>
                    </div>
                    <div class="p-4">
                        <h3 class="font-semibold text-slate-800 mb-1">Jade</h3>
                        <p class="text-sm text-slate-500">Soft jade colors</p>
                    </div>
                    <div class="absolute top-3 right-3 w-8 h-8 bg-white/20 rounded-full flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity">
                        <i class="fas fa-arrow-right text-white text-sm"></i>
                    </div>
                </a>

                <!-- Amber -->
                <a href="/theme/amber/" class="group relative bg-white rounded-2xl border border-slate-200 overflow-hidden hover:shadow-xl transition-all duration-300 hover:-translate-y-1">
                    <div class="h-24 bg-gradient-to-br from-amber-400 to-orange-500 flex items-center justify-center">
                        <i class="fas fa-sun text-4xl text-white/80"></i>
                    </div>
                    <div class="p-4">
                        <h3 class="font-semibold text-slate-800 mb-1">Amber</h3>
                        <p class="text-sm text-slate-500">Warm amber tones</p>
                    </div>
                    <div class="absolute top-3 right-3 w-8 h-8 bg-white/20 rounded-full flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity">
                        <i class="fas fa-arrow-right text-white text-sm"></i>
                    </div>
                </a>

                <!-- Onyx -->
                <a href="/theme/onyx/" class="group relative bg-white rounded-2xl border border-slate-200 overflow-hidden hover:shadow-xl transition-all duration-300 hover:-translate-y-1">
                    <div class="h-24 bg-gradient-to-br from-slate-700 to-slate-900 flex items-center justify-center">
                        <i class="fas fa-moon text-4xl text-white/80"></i>
                    </div>
                    <div class="p-4">
                        <h3 class="font-semibold text-slate-800 mb-1">Onyx</h3>
                        <p class="text-sm text-slate-500">Dark mode sleek</p>
                    </div>
                    <div class="absolute top-3 right-3 w-8 h-8 bg-white/20 rounded-full flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity">
                        <i class="fas fa-arrow-right text-white text-sm"></i>
                    </div>
                </a>

                <!-- Crystal -->
                <a href="/theme/crystal/" class="group relative bg-white rounded-2xl border border-slate-200 overflow-hidden hover:shadow-xl transition-all duration-300 hover:-translate-y-1">
                    <div class="h-24 bg-gradient-to-br from-cyan-400 to-blue-500 flex items-center justify-center">
                        <i class="fas fa-snowflake text-4xl text-white/80"></i>
                    </div>
                    <div class="p-4">
                        <h3 class="font-semibold text-slate-800 mb-1">Crystal</h3>
                        <p class="text-sm text-slate-500">Transparent design</p>
                    </div>
                    <div class="absolute top-3 right-3 w-8 h-8 bg-white/20 rounded-full flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity">
                        <i class="fas fa-arrow-right text-white text-sm"></i>
                    </div>
                </a>

                <!-- Aurora -->
                <a href="/theme/aurora/" class="group relative bg-white rounded-2xl border border-slate-200 overflow-hidden hover:shadow-xl transition-all duration-300 hover:-translate-y-1">
                    <div class="h-24 bg-gradient-to-br from-green-400 via-blue-500 to-purple-500 flex items-center justify-center">
                        <i class="fas fa-sparkles text-4xl text-white/80"></i>
                    </div>
                    <div class="p-4">
                        <h3 class="font-semibold text-slate-800 mb-1">Aurora</h3>
                        <p class="text-sm text-slate-500">Gradient effects</p>
                    </div>
                    <div class="absolute top-3 right-3 w-8 h-8 bg-white/20 rounded-full flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity">
                        <i class="fas fa-arrow-right text-white text-sm"></i>
                    </div>
                </a>
            </div>
        </div>

        <!-- Minimal & Classic Themes -->
        <div class="mb-12">
            <div class="flex items-center mb-6">
                <div class="w-10 h-10 bg-slate-100 rounded-lg flex items-center justify-center mr-3">
                    <i class="fas fa-minus text-slate-600"></i>
                </div>
                <div>
                    <h2 class="text-xl font-bold text-slate-800">Minimal & Classic</h2>
                    <p class="text-sm text-slate-500">Clean, simple, and versatile designs</p>
                </div>
            </div>

            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
                <!-- Flasher (Default) -->
                <a href="/theme/flasher/" class="group relative bg-white rounded-2xl border-2 border-indigo-200 overflow-hidden hover:shadow-xl transition-all duration-300 hover:-translate-y-1">
                    <div class="absolute top-3 left-3 px-2 py-1 bg-indigo-500 text-white text-xs font-medium rounded-full">Default</div>
                    <div class="h-24 bg-gradient-to-br from-indigo-500 to-indigo-600 flex items-center justify-center">
                        <i class="fas fa-bolt text-4xl text-white/80"></i>
                    </div>
                    <div class="p-4">
                        <h3 class="font-semibold text-slate-800 mb-1">Flasher</h3>
                        <p class="text-sm text-slate-500">Default clean design</p>
                    </div>
                    <div class="absolute top-3 right-3 w-8 h-8 bg-white/20 rounded-full flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity">
                        <i class="fas fa-arrow-right text-white text-sm"></i>
                    </div>
                </a>

                <!-- Minimal -->
                <a href="/theme/minimal/" class="group relative bg-white rounded-2xl border border-slate-200 overflow-hidden hover:shadow-xl transition-all duration-300 hover:-translate-y-1">
                    <div class="h-24 bg-gradient-to-br from-slate-400 to-slate-500 flex items-center justify-center">
                        <i class="fas fa-minus text-4xl text-white/80"></i>
                    </div>
                    <div class="p-4">
                        <h3 class="font-semibold text-slate-800 mb-1">Minimal</h3>
                        <p class="text-sm text-slate-500">Ultra-clean and simple</p>
                    </div>
                    <div class="absolute top-3 right-3 w-8 h-8 bg-white/20 rounded-full flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity">
                        <i class="fas fa-arrow-right text-white text-sm"></i>
                    </div>
                </a>

                <!-- Neon -->
                <a href="/theme/neon/" class="group relative bg-white rounded-2xl border border-slate-200 overflow-hidden hover:shadow-xl transition-all duration-300 hover:-translate-y-1">
                    <div class="h-24 bg-gradient-to-br from-pink-500 to-rose-600 flex items-center justify-center">
                        <i class="fas fa-lightbulb text-4xl text-white/80"></i>
                    </div>
                    <div class="p-4">
                        <h3 class="font-semibold text-slate-800 mb-1">Neon</h3>
                        <p class="text-sm text-slate-500">Bright attention-grabbing</p>
                    </div>
                    <div class="absolute top-3 right-3 w-8 h-8 bg-white/20 rounded-full flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity">
                        <i class="fas fa-arrow-right text-white text-sm"></i>
                    </div>
                </a>
            </div>
        </div>
    </section>

    <!-- Usage Section -->
    <section class="bg-slate-50 rounded-2xl p-8 mb-12">
        <div class="max-w-3xl mx-auto">
            <h2 class="text-2xl font-bold text-slate-800 mb-6 text-center">How to Use Themes</h2>

            <div class="space-y-6">
                <div class="bg-white rounded-xl p-6 shadow-sm">
                    <div class="flex items-center mb-4">
                        <div class="w-8 h-8 bg-indigo-100 rounded-lg flex items-center justify-center mr-3">
                            <span class="text-indigo-600 font-bold">1</span>
                        </div>
                        <h3 class="font-semibold text-slate-800">Set as Default Theme</h3>
                    </div>
                    <pre class="bg-slate-800 text-slate-200 p-4 rounded-lg text-sm overflow-x-auto"><code>// config/flasher.php (Laravel)
return [
    'default' => 'theme.material',
];</code></pre>
                </div>

                <div class="bg-white rounded-xl p-6 shadow-sm">
                    <div class="flex items-center mb-4">
                        <div class="w-8 h-8 bg-indigo-100 rounded-lg flex items-center justify-center mr-3">
                            <span class="text-indigo-600 font-bold">2</span>
                        </div>
                        <h3 class="font-semibold text-slate-800">Use Per-Notification</h3>
                    </div>
                    <pre class="bg-slate-800 text-slate-200 p-4 rounded-lg text-sm overflow-x-auto"><code>// PHP
flash()->use('theme.material')->success('Operation completed!');

// JavaScript
flasher.use('theme.material').success('Operation completed!');</code></pre>
                </div>
            </div>
        </div>
    </section>

    <!-- CTA Section -->
    <section class="bg-gradient-to-r from-indigo-600 to-purple-600 rounded-2xl p-8 md:p-12 text-center text-white">
        <h2 class="text-2xl md:text-3xl font-bold mb-4">Can't decide?</h2>
        <p class="text-indigo-100 mb-8 max-w-2xl mx-auto">
            Try all themes in our interactive playground and see which one fits your project best.
        </p>
        <a href="/playground/" class="inline-flex items-center px-8 py-4 bg-white text-indigo-600 font-semibold rounded-xl hover:bg-indigo-50 transition-colors shadow-lg">
            <i class="fas fa-flask mr-2"></i>
            Open Playground
        </a>
    </section>
</div>

<script>
    function demoTheme(themeName) {
        if (typeof flasher !== 'undefined') {
            const types = ['success', 'info', 'warning', 'error'];
            const messages = {
                success: 'Operation completed successfully!',
                info: 'Here is some useful information.',
                warning: 'Please review before continuing.',
                error: 'Something went wrong!'
            };

            const randomType = types[Math.floor(Math.random() * types.length)];

            flasher.use(`theme.${themeName}`).flash({
                type: randomType,
                message: messages[randomType],
                title: themeName.charAt(0).toUpperCase() + themeName.slice(1) + ' Theme'
            });
        }
    }

    // Smooth scroll
    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
        anchor.addEventListener('click', function (e) {
            e.preventDefault();
            const target = document.querySelector(this.getAttribute('href'));
            if (target) {
                target.scrollIntoView({ behavior: 'smooth', block: 'start' });
            }
        });
    });
</script>