From 8074bb1f90cc75ea24eb2b20f6517c69f444ef05 Mon Sep 17 00:00:00 2001 From: Younes ENNAJI Date: Sun, 1 Mar 2026 22:11:00 +0000 Subject: [PATCH] docs: add themes gallery page at /themes/ Features: - Hero section with animated gradient background - Themes organized by category (Brand-Inspired, Gemstone, Minimal) - Visual cards with gradient previews for each theme - Interactive "Try All Themes" section with demo buttons - Usage code examples for setting default or per-notification themes - CTA linking to playground - Added "All Themes" link to navigation menu --- docs/_data/menu.yml | 1 + docs/pages/themes/index.html | 441 +++++++++++++++++++++++++++++++++++ 2 files changed, 442 insertions(+) create mode 100644 docs/pages/themes/index.html diff --git a/docs/_data/menu.yml b/docs/_data/menu.yml index c047649c..a20f89b9 100644 --- a/docs/_data/menu.yml +++ b/docs/_data/menu.yml @@ -13,6 +13,7 @@ Toastr: '/library/toastr/' Themes NEW: + All Themes: '/themes/' Minimal: '/theme/minimal/' Amber: '/theme/amber/' Crystal: '/theme/crystal/' diff --git a/docs/pages/themes/index.html b/docs/pages/themes/index.html new file mode 100644 index 00000000..f01981de --- /dev/null +++ b/docs/pages/themes/index.html @@ -0,0 +1,441 @@ +--- +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. +--- + +
+ +
+ +
+
+
+ + +
+
+ +
+
+ + 26 Beautiful Themes +
+ +

+ Theme Gallery +

+ +

+ Choose from professionally designed themes. From minimalist to brand-inspired styles - find the perfect look for your application. +

+ +
+ + + Browse Themes + + + + Try in Playground + +
+
+
+ + +
+ +
+
+
+ +
+
+

Brand-Inspired

+

Familiar styles from popular platforms

+
+
+ +
+ + +
+ +
+
+

Material

+

Google Material Design

+
+
+ +
+ + + + +
+ +
+
+

iOS

+

Apple iOS notifications

+
+
+ +
+ + + + +
+ +
+
+

Slack

+

Slack messaging style

+
+
+ +
+ + + + +
+ +
+
+

Amazon

+

Amazon-inspired alerts

+
+
+ +
+ + + + +
+ +
+
+

Facebook

+

Facebook notification style

+
+
+ +
+ + + + +
+ +
+
+

Google

+

Google-style notifications

+
+
+ +
+ +
+
+ + +
+
+
+ +
+
+

Gemstone Collection

+

Elegant color palettes inspired by precious stones

+
+
+ +
+ + +
+ +
+
+

Ruby

+

Bold ruby red accents

+
+
+ +
+ + + + +
+ +
+
+

Sapphire

+

Elegant blue elegance

+
+
+ +
+ + + + +
+ +
+
+

Emerald

+

Modern green palette

+
+
+ +
+ + + + +
+ +
+
+

Jade

+

Soft jade colors

+
+
+ +
+ + + + +
+ +
+
+

Amber

+

Warm amber tones

+
+
+ +
+ + + + +
+ +
+
+

Onyx

+

Dark mode sleek

+
+
+ +
+ + + + +
+ +
+
+

Crystal

+

Transparent design

+
+
+ +
+ + + + +
+ +
+
+

Aurora

+

Gradient effects

+
+
+ +
+ +
+
+ + +
+
+
+ +
+
+

Minimal & Classic

+

Clean, simple, and versatile designs

+
+
+ +
+ + +
Default
+
+ +
+
+

Flasher

+

Default clean design

+
+
+ +
+ + + + +
+ +
+
+

Minimal

+

Ultra-clean and simple

+
+
+ +
+ + + + +
+ +
+
+

Neon

+

Bright attention-grabbing

+
+
+ +
+ +
+
+
+ + +
+
+

Try All Themes

+

Click any button to see the theme in action

+
+ +
+ + + + + + + + + + + + + + + + + +
+
+ + +
+
+

How to Use Themes

+ +
+
+
+
+ 1 +
+

Set as Default Theme

+
+ 
// config/flasher.php (Laravel)
+return [
+    'default' => 'theme.material',
+];
+
+ +
+
+
+ 2 +
+

Use Per-Notification

+
+ 
// PHP
+flash()->use('theme.material')->success('Operation completed!');
+
+// JavaScript
+flasher.use('theme.material').success('Operation completed!');
+
+
+
+
+ + +
+

Can't decide?

+

+ Try all themes in our interactive playground and see which one fits your project best. +

+ + + Open Playground + +
+
+ +