Is it possible to replace the color gray to zinc when using dark mode?

Is it possible to replace the color gray to zinc when using dark mode on the Filament Panels?

Solution:

You could always reset the css properties in your theme.

‘zinc’ => Color::Zinc

‘zinc’ => Color::Zinc

```css...

Jump to solution

7 Replies

Vp•3mo ago

Yeah, using custom theme https://filamentphp.com/docs/3.x/panels/themes#creating-a-custom-theme

Themes - Panel Builder - Filament

Vp•3mo ago

But you have to check each and every place to replace dark, you can do like

.some-class {
  @apply !dark:bg-zinc-900 !dark:border-zinc-950;
}

.some-class {
  @apply !dark:bg-zinc-900 !dark:border-zinc-950;
}

Abi•3mo ago

so, I have to do this for each element? The one thing I tried and am not quite sure if this will work is override the default gray in the colors method on the Panel Provider to

$panel->colors([
  'gray' => Color:Zinc
]);

$panel->colors([
  'gray' => Color:Zinc
]);

Not quite sure if this will work though

Vp•3mo ago

This may also work, but I don't know.. I try to change dark color in v2 so I did it like my previous reply, now I don't want to change dark theme color anymore 😆

Abi•3mo ago

ok, my questions was more with v3

Solution

awcodes•3mo ago

You could always reset the css properties in your theme.

‘zinc’ => Color::Zinc

‘zinc’ => Color::Zinc

.dark {
  :root {
    —gray-50: var(—zinc-50);
    —gray-100: var(—zinc-100);
    Etc
  }
}

.dark {
  :root {
    —gray-50: var(—zinc-50);
    —gray-100: var(—zinc-100);
    Etc
  }
}

Something like that should work.

Abi•3mo ago

ok, thank you

Gaming

Programming

Is it possible to replace the color gray to zinc when using dark mode?