F
Filament•2y ago
qcol

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
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 🙌
qcol
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
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.
qcol
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
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 . ';'
   ]);
qcol
qcolOP•2y ago
It works beautifully, thank you for this tip!

Did you find this page helpful?