Getting Started

Minimal Setup

Install via Composer
```
composer require spykapps/theme-edinburgh
```
Ensure your project uses Laravel 12.x and PHP 8.3+.
Publish Assets Run the publisher to copy theme assets (CSS/JS) to your project:
```
php artisan vendor:publish --tag=edinburgh-theme-assets
```
This generates a public/vendor/spykapps/theme-edinburgh directory.

Apply the Theme In your app/Providers/AppServiceProvider.php, add the theme to Filament’s configuration:

use SpykApps\Edinburgh\EdinburghTheme;

public function boot(): void
{
    Filament::registerTheme(EdinburghTheme::make());
}

Verify Refresh your Filament admin panel to see the theme applied. Check the dark mode toggle (if enabled) and sidebar gradients.

First Use Case: Quick Styling Override

Modify the theme’s colors or fonts by extending the published assets:

Locate the published CSS at resources/css/filament/edinburgh.css (if published).

Override variables (e.g., --edinburgh-gray, --edinburgh-brass) in your project’s CSS:

@import 'vendor/spykapps/theme-edinburgh/css/edinburgh.css';
:root {
    --edinburgh-gray: #1a1a2e; /* Darker gray */
}

Implementation Patterns

1. Theme Customization Workflow

Extend the Theme Class: Create a custom theme class extending EdinburghTheme to modify defaults:

namespace App\Filament\Themes;

use SpykApps\Edinburgh\EdinburghTheme;

class CustomEdinburghTheme extends EdinburghTheme
{
    public static function make(): static
    {
        return parent::make()
            ->colors([
                'primary' => '#d4af37', // Custom brass
            ]);
    }
}

Filament::registerTheme(CustomEdinburghTheme::make());

Dynamic Theming: Use Filament’s Theme service to toggle the theme programmatically:
```
use Filament\Support\Facades\FilamentTheme;

FilamentTheme::enable('edinburgh');
```

2. Asset Integration

Compile Custom CSS/JS: If you extend the theme, compile your customizations into a single file:
```
npm run dev  # or `npm run build` for production
```
Link the compiled file in resources/views/layouts/filament-app.blade.php:
```
@vite(['resources/css/filament/custom-edinburgh.css'])
```

Lazy-Loading Assets: For large projects, defer non-critical CSS/JS:

<link rel="preload" href="{{ asset('vendor/spykapps/theme-edinburgh/css/edinburgh.css') }}" as="style" onload="this.onload=null;this.rel='stylesheet'">

3. Dark Mode Support

Toggle via User Preference: Use Filament’s useDarkMode hook to sync with user settings:

Filament::registerTheme(EdinburghTheme::make()->useDarkMode());

Override dark mode colors in your CSS:

@media (prefers-color-scheme: dark) {
    :root {
        --edinburgh-gray: #0a0a1a;
        --edinburgh-brass: #e6d5b8;
    }
}

4. Sidebar and Layout Customization

Gradient Overrides: Modify the sidebar gradient in edinburgh.css:

.filament-sidebar {
    background: linear-gradient(to bottom, #1a1a2e, #2d1b69);
}

Ornate Corners: Use CSS clip-path to replicate the "ornate details":

.filament-page {
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 calc(100% - 20px), 0 100%);
}

5. Integration with Filament Plugins

Table/Widget Styling: Target Filament’s table classes (e.g., .filament-table) in your CSS:

.filament-table th {
    background-color: var(--edinburgh-gray);
    border-bottom: 2px solid var(--edinburgh-brass);
}

Form Field Styling: Style inputs/buttons using Filament’s utility classes:
```
.filament-forms input {
    border: 1px solid var(--edinburgh-brass);
}
```

Gotchas and Tips

Pitfalls

Asset Publishing Issues:
- Symlink Conflicts: If using Laravel Mix/Vite, ensure no duplicate asset paths exist. Run:
```
php artisan storage:link
```
- Missing Assets: After publishing, verify files exist in public/vendor/spykapps/theme-edinburgh. If not, re-run the publisher.
Theme Registration Order:
- Register the theme after Filament’s core setup in AppServiceProvider::boot(). Overriding too early may break Filament’s default styles.
CSS Specificity Wars:
- The theme uses high-specificity selectors (e.g., .filament-page). Override with !important sparingly:
```
.filament-page .custom-class {
    background: red !important; /* Last resort */
}
```
Dark Mode Inconsistencies:
- Some Filament components (e.g., modals) may not fully respect dark mode. Extend the theme’s dark mode CSS:
```
@media (prefers-color-scheme: dark) {
    .filament-modal {
        background: #1a1a2e;
    }
}
```
PHP Version Mismatch:
- The package requires PHP 8.3+. If using an older version, expect runtime errors (e.g., TypedProperty issues).

Debugging Tips

Inspect Element: Use browser dev tools to verify CSS variables are applied:
```
:root {
    --edinburgh-gray: initial; /* Test if variable loads */
}
```
Disable Cache: Clear Filament’s view cache if styles don’t update:
```
php artisan filament:cache:clear
```
Check for Conflicts: Disable other Filament themes/plugins to isolate issues:
```
// Temporarily remove other themes in AppServiceProvider
```

Log Theme Events: Add debug logs in your custom theme class:

public static function make(): static
{
    \Log::info('Edinburgh theme initialized');
    return parent::make();
}

Extension Points

Custom Theme Variables: Extend the theme’s SCSS variables by publishing the source files:
```
php artisan vendor:publish --tag=edinburgh-theme-scss
```
Modify _variables.scss in resources/scss/filament/edinburgh.

Plugin-Specific Overrides: Create a Filament plugin to dynamically apply theme tweaks:

namespace App\Filament\Plugins;

use Filament\Plugin;

class EdinburghCustomizer implements Plugin
{
    public function getId(): string
    {
        return 'edinburgh-customizer';
    }

    public function register(ContainerRegistry $container): void
    {
        $container->theme(function (Theme $theme) {
            $theme->colors(['danger' => '#d4351c']);
        });
    }
}

Animation Enhancements: Add subtle animations using Filament’s transition classes:
```
.filament-sidebar {
    transition: background 0.3s ease;
}
```

Localization: Override text colors for RTL languages:

[dir="rtl"] .filament-text {
    color: var(--edinburgh-text-rtl);
}

Performance Optimizations

Critical CSS: Inline critical CSS for the theme in your layout:

<style>
    :root { --edinburgh-gray: #1a1a2e; }
    .filament-page { background: var(--edinburgh-gray); }
</style>

Purge Unused CSS: Use Laravel Mix/PurgeCSS to remove unused theme classes:

// vite.config.js
export default defineConfig({
    css: {
        postcss: {
            plugins: [require('tailwindcss'), require('autopref

Theme Edinburgh Laravel Package