Filament•2y ago

How to check the status of a theme in resource?

I use colouring for one of the table columns. However, I need to use a different colour depending on the selected theme (light/dark). How do I check which theme is currently being used in my resource? current code:

6 Replies

ByteXR•2y ago

You could do something along these lines:

->extraAttributes([
  'style' =>  Arr::toCssStyles([
      'color: NOT_DARK_MODE' => !config('tables.dark_mode'),
      'color: DARK_MODE' => config('tables.dark_mode'),
  ])
])

->extraAttributes([
  'style' =>  Arr::toCssStyles([
      'color: NOT_DARK_MODE' => !config('tables.dark_mode'),
      'color: DARK_MODE' => config('tables.dark_mode'),
  ])
])

Tho I suggest using classes instead 🙌

qcolOP•2y ago

Thanks for the reply. Unfortunately config('tables.dark_mode') is always true despite changing the theme. It is probably taken from the config/filament.php file as the default setting. I am looking for a solution that will change the colour as soon as the theme changes in the top right corner.

awcodes•2y ago

This would be best handled by CSS since the mode is handled on the client side. Then you can set the color via css properties with a style attribute instead of a class attribute.

qcolOP•2y ago

I don't know if I understand correctly, but in order to use something conditionally on the client side (be it a style or a class), I first have to handle the condition on the server side. So something like ->extraAttributes(fn (Order $record): array => ['style' => 'color:#' . (config('tables.dark_mode')? "FFFFFF": "000000")]), The thing is, config('tables.dark_mode') always gives true here and I'm concerned with reading the theme state change immediately. So I switch the theme in the top right corner from light to dark and I have the text colour instantly adjusted to the one I selected for the theme.

awcodes•2y ago

Pesudo code, but something along these lines. In a stylesheet:

:root {
  --field-text-light: #000000;
  --field-text-dark: #ffffff;
}

.my-custom-field {
  color: var(--field-text-light);
}

.dark .my-custom-field {
  color: var(--field-text-dark);
}

:root {
  --field-text-light: #000000;
  --field-text-dark: #ffffff;
}

.my-custom-field {
  color: var(--field-text-light);
}

.dark .my-custom-field {
  color: var(--field-text-dark);
}

In your resource:

TextInput::make('blah')
   ->extraAttributes([
        'class' => 'my-custom-field',
        'style' => '--field-text-light: ' . $record->color_light . '; --field-text-dark: ' . $record->color_dark . ';'
   ]);

TextInput::make('blah')
   ->extraAttributes([
        'class' => 'my-custom-field',
        'style' => '--field-text-light: ' . $record->color_light . '; --field-text-dark: ' . $record->color_dark . ';'
   ]);

qcolOP•2y ago

It works beautifully, thank you for this tip!

Gaming

Programming

How to check the status of a theme in resource?