Themes Setup

Beautiful, customizable themes for your Laravel forms with Material Design. Choose from Default and Dark themes, or create your own custom themes using CSS variables.

Default Theme 🌟

Clean, modern Material Design theme with light background - perfect for professional applications.

Features:

• Light background with high contrast
• Modern blue primary color (#6200ee)
• Material Design components
• Responsive design

Usage:

protected function buildForm()
{
    return Vueform::build()
        ->theme('default') // or omit for default
        ->schema([
            // your form elements
        ]);
}

🌙 Dark Theme

Modern dark theme optimized for low-light environments and user preference.

Features:

• Dark background (#1f2937)
• Purple accent color (#BB86FC)
• High contrast text
• Eye-friendly for extended use

Usage:

protected function buildForm()
{
    return Vueform::build()
        ->theme('dark')
        ->schema([
            // your form elements
        ]);
}

Customizing Theme CSS Style Values ⚙️

VueForm Laravel themes are highly customizable through CSS variables. Modify the theme configuration in config/vueform-laravel.php to change colors, fonts, spacing, and more.

Configuration Structure:

<?php

return [
    'themes' => [
        'default' => [
            '--vf-primary' => '#6200ee',
            '--vf-danger' => '#B00020',
            '--vf-success' => '#4CAF50',
            '--vf-gray-50' => '#FAFAFA',
            // ... hundreds of variables
        ],
        'dark' => [
            '--vf-primary' => '#BB86FC',
            '--vf-bg-input' => '#1E1E1E',
            '--vf-color-input' => '#e2e8f0',
            // ... dark theme overrides
        ],
    ],
];

How to Modify:

1. Open config/vueform-laravel.php
2. Locate the 'themes' array
3. Modify CSS variable values (hex colors, rem units, etc.)
4. Run php artisan vueform:build to regenerate assets
5. Changes apply to all forms using that theme

Available CSS Variables:

Pro Tips:

• Use browser dev tools to inspect elements and find variable names
• Test color combinations for accessibility (WCAG compliance)
• Create theme presets for different brands/clients
• Use CSS custom properties for dynamic theming