Action button has no background in Livewire component

I have created a full-page Livewire component and followed the documentation for using an Action in a Livewire component.

<?php

namespace App\Livewire\App;

use App\Models\Event;
use Filament\Actions\Action;
use Filament\Actions\Concerns\InteractsWithActions;
use Filament\Actions\Contracts\HasActions;
use Filament\Forms\Components\RichEditor;
use Filament\Forms\Components\TextInput;
use Filament\Forms\Concerns\InteractsWithForms;
use Filament\Forms\Contracts\HasForms;
use Livewire\Component;

class MessageBoard extends Component implements HasForms, HasActions
{
    use InteractsWithActions;
    use InteractsWithForms;

    public Event $event;

    public function render()
    {
        return view('livewire.app.message-board');
    }

    public function createAction(): Action
    {
        return Action::make('create')
            ->button()
            ->color('primary')
            ->form([
                TextInput::make('title')->required(),
                RichEditor::make('content')->required(),
            ])
            ->action(fn () => $this->post->delete());
    }
}


When viewing the page, the button has no background. It looks like the var(--primary-600) is not found for the bg-custom-600; I have no idea how to get that working.
Was this page helpful?