Creative Frontend HTML Demo - Dark Mode Testing

This page demonstrates the dark mode functionality with different configurations. Test each mode by scrolling through the examples below.

🧪 How to Test Dark Mode:

Automatic Mode: Change your system/browser dark mode preference to see the theme update automatically
Always Dark Mode: Forced dark theme regardless of system preference
Always Light Mode: Forced light theme (default behavior)
Custom Colors: Both light and dark themes can have custom color palettes
Open DevTools: Inspect elements to see CSS variables like --chat-primary-color, --chat-background-color, etc.
Check Attributes: Look for data-theme="light" or data-theme="dark" on the container
Browser DevTools: Use Rendering > Emulate CSS media feature prefers-color-scheme to test automatic mode

1. Automatic Dark Mode (Follows System Preference)

Configuration: data-dark-mode="automatic"

This widget automatically switches between light and dark themes based on your system/browser preference.

Try it: Change your OS dark mode setting or use DevTools to emulate dark mode preference.

Chat interface will load here

2. Always Dark Mode

Configuration: data-dark-mode="on"

This widget is always in dark mode, regardless of system preference.

Expected: Dark background, light text, adjusted colors for dark theme.

Chat interface will load here

3. Always Light Mode (Default)

Configuration: data-dark-mode="off" (or omitted)

This widget is always in light mode, regardless of system preference.

Expected: Light background, dark text, standard colors.

Chat interface will load here

4. Custom Colors (Automatic with Custom Palettes)

Configuration: Custom light and dark theme colors via data-theme-light and data-theme-dark

This shows custom color palettes for both light and dark modes.

Light theme: Blue primary (#2196F3), light backgrounds

Dark theme: Purple primary (#9C27B0), dark backgrounds

Chat interface will load here

5. System Defaults (No Dark Mode Configuration)

Configuration: No dark mode attributes provided

When no dark mode configuration is specified, the widget uses system defaults.

Expected: Automatic mode with default light theme (blue #007bff) and dark theme (light blue #4dabf7).

Behavior: Follows system preference with default color schemes.

Chat interface will load here

6. Legacy Primary Color Support (Backward Compatibility)

Configuration: Only data-primary-color (no dark mode attributes)

For backward compatibility, if only data-primary-color is provided, it creates basic light and dark themes using that color.

Expected: Green primary color (#4CAF50) in both light and dark modes with system defaults for other colors.

Note: This is the legacy fallback - new implementations should use data-theme-light and data-theme-dark.

Chat interface will load here

7. Custom Font Assets (data-font-assets Array)

Configuration: Custom fonts loaded via data-font-assets array

Demonstrates loading custom fonts that are applied widget-scoped (won't affect parent page).

Font: Custom font loaded from URL and applied via theme fontFamily

Note: Font is scoped to this widget instance only.

Chat interface will load here

8. Voice Enabled - Safari Mobile Warning Test

Configuration: Voice features enabled with data-voice-enabled="true"

Purpose: Test the Safari Mobile warning banner that appears when voice is enabled on Safari mobile devices.

Testing Instructions:

Desktop Testing: Open DevTools → Device Toolbar (Cmd+Shift+M / Ctrl+Shift+M) → Select iPhone/iPad
Mobile Testing: Open this page on Safari on iPhone/iPad
Expected Behavior:
- On Safari Mobile: Warning banner appears saying "Browser not fully supported - Use Chrome"
- On Chrome Mobile: No warning banner
- On Desktop Safari: No warning banner (not mobile)
- On Desktop Chrome: No warning banner

⚠️ Note: To simulate Safari mobile in Chrome DevTools, you need to change the user agent to Safari Mobile.

Chat interface will load here