php-flasher/docs/pages/themes/amazon.md

layout, permalink, title, subtitle, description, theme_name, theme_name_short, theme_class, icon, color, has_assets, visual_features, accessibility_features, css_variables, html_structure

layout	permalink	title	subtitle	description	theme_name	theme_name_short	theme_class	icon	color	has_assets	visual_features	accessibility_features	css_variables	html_structure
theme	/theme/amazon/	Amazon Theme	E-commerce inspired notification system	Transform your notifications with the Amazon-inspired theme for PHPFlasher. Create clean, minimal notifications that match Amazon's design language with built-in accessibility and dark mode support.	theme.amazon	amazon	fl-amazon	fa-duotone fa-shopping-bag	amber	true	Clean, minimal design inspired by Amazon's UI Distinct colors for each notification type Dark mode support with automatic detection Customizable color scheme	ARIA roles and live regions for screen readers Keyboard accessible controls High contrast text meeting WCAG 2.1 AA standards Supports reduced motion preferences	:root { /* Amazon theme colors - Light mode */ --amazon-success-bg: #f0fff5; /* Success background */ --amazon-success-border: #7fda95; /* Success border */ --amazon-success-icon: #007600; /* Success icon color */ --amazon-info-bg: #f3f9ff; /* Info background */ --amazon-info-border: #7fb4da; /* Info border */ --amazon-info-icon: #0066c0; /* Info icon color */ --amazon-warning-bg: #fffcf3; /* Warning background */ --amazon-warning-border: #ffd996; /* Warning border */ --amazon-warning-icon: #c45500; /* Warning icon color */ --amazon-error-bg: #fff5f5; /* Error background */ --amazon-error-border: #ff8f8f; /* Error border */ --amazon-error-icon: #c40000; /* Error icon color */ /* Dark mode colors */ --amazon-success-bg-dark: #0a3317; --amazon-success-border-dark: #2a6e3f; --amazon-success-icon-dark: #7fda95; --amazon-info-bg-dark: #0a2940; --amazon-info-border-dark: #2a5d6e; --amazon-info-icon-dark: #7fb4da; --amazon-warning-bg-dark: #3d2800; --amazon-warning-border-dark: #6e5c2a; --amazon-warning-icon-dark: #ffd996; --amazon-error-bg-dark: #400a0a; --amazon-error-border-dark: #6e2a2a; --amazon-error-icon-dark: #ff8f8f; }	<div class="fl-amazon fl-[type]" role="[role]" aria-live="[ariaLive]" aria-atomic="true"> <div class="fl-amazon-alert"> <div class="fl-alert-content"> <div class="fl-icon-container"> <!-- SVG icon --> </div> <div class="fl-text-content"> <div class="fl-alert-title">Title</div> <div class="fl-alert-message">Message</div> </div> </div> <div class="fl-alert-actions"> <button class="fl-close" aria-label="Close notification"> <!-- Close icon --> </button> </div> </div> </div>

Usage

To use the Amazon theme, specify it in your flash notification:

flash()->use('theme.amazon')->success('Your order has been placed successfully!');
flash()->use('theme.amazon')->error('Unable to process your payment.');
flash()->use('theme.amazon')->warning('This item is almost out of stock.');
flash()->use('theme.amazon')->info('Free shipping on orders over $25.');

Or set it as the default theme in your configuration:

Laravel - config/flasher.php:

return [
    'default' => 'theme.amazon',
];

Symfony - config/packages/flasher.yaml:

flasher:
    default: theme.amazon