Dark Mode Configuration for Widgets

[chaseconey]

Package

Widgets

Package Version

v3.2

How can we help you?

Hello there 👋 .

I am trying to find a good way to change the colors of a Chart in a Widget in Filament based on the current Dark Mode setting.

Here is the return for my getData function:

return [
    'labels' => $labels,
    'datasets' => [
        [
            'type' => 'bar',
            'label' => 'Created',
            'data' => $data,

            // Here is where I am trying to pivot based on dark mode status
            'borderColor' => '#622CBC',
            'backgroundColor' => '#FAF1FE',
        ],
    ],
];

Things I have tried/thought about

Pivot colors on server side

I can't seem to find any server-side representation of that setting so that I can set the configuration value that way.

Inject Javascript into the widget

Is there a way to do this without making your own view for the widget? I can't seem to find a way to add a specific file or set of javascript to a widget. Then, I could just dig in on the ChartJS side of things.

Let me know if there are any other options as well!

Thanks

[herrwalter]

Haven't used it yet, but i noticed the HasDarkMode trait.
By the looks of the template, Filament itself check for darkmode with the following:

Filament::getCurrentPanel()->hasDarkMode()
||
Filament::getCurrentPanel()->hadDarkModeForced()

In your situation i'd use a helper to get the right colors. Something on the line of. But use it whatever you like

<?php

class MyBrandTheme {

    public static function getPrimaryColor(): string
    {
          return Filament::getCurrentPanel()->hasDarkMode() ? "#darkPrimaryColor" : "#lightPrimaryColor";
    }

}

return [
    'labels' => $labels,
    'datasets' => [
        [
            'type' => 'bar',
            'label' => 'Created',
            'data' => $data,

            // Here is where I am trying to pivot based on dark mode status
            'borderColor' => MyBrandTheme::getPrimaryColor(),
            'backgroundColor' => '#FAF1FE',
        ],
    ],
];

[chaseconey]

Hey @herrwalter - this is really cool, I hadn't seen that yet! Thank you for putting together an example and everything, super helpful!

I think this almost completely solves my problem, except there is no way to properly calculate it completely with just hasDarkMode and hasDarkModeForced. If I have my system theme set to dark mode, but I have forced light mode in Filament, your example would still return true (because the system is set to dark mode), but the rest of filament would be in light mode.

I didn't see a similar set of getters for light mode, so I am kind of back to square one.

[chaseconey]

Actually, hasDarkMode doesn't actually seem to work at all. Or if it does, it's really sticky? I can't get consistent behavior using it, only the forced, which is kind of unfortunate.

[herrwalter]

I haven’t used it, I took a brief look for you when I stumbled on your question. look up some examples and context in which it’s being used in the templates. That could clearify