Filament•10mo ago

How can change the background color in Widget card

Hey guys, i have 4 card in my dashboard and i want change the background color for this in light Mode. How can do this? This is my widget code:

<?php

namespace App\Filament\Company\Widgets;

use Filament\Widgets\ChartWidget;

class ExpenseChart extends ChartWidget
{
    protected static ?string $heading = 'Egresos del mes';

    protected static ?int $sort = 3;

    protected static ?string $pollingInterval = null;

    public ?string $filter = 'today';

    protected static string $color = 'info';

   /*  protected function getFilters(): ?array
    {
        return [
            'today' => 'Today',
            'week' => 'Last week',
            'month' => 'Last month',
            'year' => 'This year',
        ];
    } */

    protected function getData(): array
    {
        //$activeFilter = $this->filter;

        return [
            'datasets' => [
                [
                    'label' => 'Egresos registrados',
                    'data' => [0, 89, 10, 21, 32, 45, 74, 65, 45, 37 ],
                ],
            ],
            'labels' => ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
        ];
    }

    protected function getType(): string
    {
        return 'line';
    }
}

<?php

namespace App\Filament\Company\Widgets;

use Filament\Widgets\ChartWidget;

class ExpenseChart extends ChartWidget
{
    protected static ?string $heading = 'Egresos del mes';

    protected static ?int $sort = 3;

    protected static ?string $pollingInterval = null;

    public ?string $filter = 'today';

    protected static string $color = 'info';

   /*  protected function getFilters(): ?array
    {
        return [
            'today' => 'Today',
            'week' => 'Last week',
            'month' => 'Last month',
            'year' => 'This year',
        ];
    } */

    protected function getData(): array
    {
        //$activeFilter = $this->filter;

        return [
            'datasets' => [
                [
                    'label' => 'Egresos registrados',
                    'data' => [0, 89, 10, 21, 32, 45, 74, 65, 45, 37 ],
                ],
            ],
            'labels' => ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
        ];
    }

    protected function getType(): string
    {
        return 'line';
    }
}

2 Replies

Igor•10mo ago

I'm not sure if there is any property for this, but you can customize the theme freely, I'm doing it

awcodes•10mo ago

You will have to use css to change a cards background color.

Gaming

Programming

How can change the background color in Widget card