Getting Started

Minimal Setup

Installation Add the package via Composer:
```
composer require raulfraile/ladybug-theme-modern
```
Register the theme in config/ladybug.php:
```
'theme' => 'modern',
```
First Use Case Apply the theme to a LadybugPHP project by publishing assets:
```
php artisan ladybug:publish-modern
```
Ensure public/css/ladybug-modern.css is linked in your layout:
```
<link rel="stylesheet" href="{{ asset('css/ladybug-modern.css') }}">
```
Where to Look First
- Source: vendor/raulfraile/ladybug-theme-modern/src/ for SCSS/Less files.
- Docs: Check README.md for basic overrides (if any).
- Config: config/ladybug.php for theme-specific settings.

Implementation Patterns

Workflow Integration

Asset Overrides Extend the theme by copying the original CSS file to resources/css/ladybug-modern.css and modifying it. Use Laravel Mix or Vite to compile if needed.

Dynamic Theming Toggle the theme via a config toggle (e.g., config(['ladybug.theme' => 'modern'])) or middleware:

// app/Http/Middleware/ThemeMiddleware.php
public function handle($request, Closure $next) {
    if ($request->user()->prefers_modern_theme()) {
        config(['ladybug.theme' => 'modern']);
    }
    return $next($request);
}

LadybugPHP Integration Use the theme with Ladybug’s built-in helpers:
```
// In a controller or view
Ladybug::theme('modern')->render();
```

Partial Overrides Target specific components (e.g., buttons, forms) by overriding SCSS variables in a custom file:

// resources/scss/overrides.scss
@import 'vendor/raulfraile/ladybug-theme-modern/src/scss/variables';
$button-bg: #3498db; // Override default

Common Use Cases

Admin Panels: Apply the theme globally for a cohesive backend.
Multi-Tenant Apps: Use middleware to switch themes per tenant.
Legacy Projects: Retrofit the theme to older LadybugPHP versions (tested with v1.x).

Gotchas and Tips

Pitfalls

Outdated Dependencies
- The package was last updated in 2014 and may not support modern LadybugPHP (v2+). Test thoroughly.
- Workaround: Fork the repo and update paths/dependencies (e.g., node_modules references).
Asset Path Assumptions
- The package assumes assets are published to public/css/. If using a custom path, update the config or publish manually:
```
php artisan vendor:publish --tag=ladybug-modern --path=custom/path
```
SCSS/Less Conflicts
- If using Laravel Mix/Vite, ensure no duplicate CSS injections. Use @import sparingly to avoid variable collisions.

Browser Caching

After updates, append a query string to the CSS file:

<link rel="stylesheet" href="{{ asset('css/ladybug-modern.css?v='.filemtime(public_path('css/ladybug-modern.css'))) }}">

Debugging Tips

Inspect Elements: Use browser dev tools to verify CSS specificity and overrides.

Log Variables: Dump SCSS variables to debug:

// Add to your overrides
body {
    color: red;
    @debug $button-bg; // Logs variable value
}

Check LadybugPHP Logs: Enable debug mode in config/ladybug.php to trace theme loading issues.

Extension Points

Custom Variables Extend the theme by defining variables in resources/scss/variables.scss before importing the theme:
```
@import 'vendor/raulfraile/ladybug-theme-modern/src/scss/variables';
// Override or add new variables here
```

Theme Switching Create a helper to toggle themes dynamically:

// app/Helpers/ThemeHelper.php
function setLadybugTheme($theme) {
    config(['ladybug.theme' => $theme]);
    return new \Ladybug\Ladybug(config('ladybug'));
}

Dark Mode Fork the theme and add dark-mode variables (e.g., $dark-bg: #222;), then use CSS classes to toggle:
```
<body class="dark-mode">
    
</body>
```

Ladybug Theme Modern Laravel Package