Filament•2y ago

How to globally costumize filament colors

Im not using admin panel. I'd like to know if there is a way to change all the blue colors to another color in a "easy way", globally or something

6 Replies

LeandroFerreira•2y ago

Did you run this setup? https://filamentphp.com/docs/2.x/tables/installation#configuring-tailwind-css

//https://tailwindcss.com/docs/customizing-colors
primary: colors.blue

//https://tailwindcss.com/docs/customizing-colors
primary: colors.blue

Filament

Installation - Table Builder - Filament

The elegant TALL stack table builder for Laravel artisans.

ericmp #2OP•2y ago

yes but it says vendor/filament/forms/dist/module.esm.css:1618:3: The bg-primary-600 class does not exist i changed it to my custom color primary: #mycolor

LeandroFerreira•2y ago

like this? https://tailwindcss.com/docs/customizing-colors#color-object-syntax

primary: {
    50: "#cffafe",
    100: "#cffafe",
    200: "#a5f3fc",
    ...

primary: {
    50: "#cffafe",
    100: "#cffafe",
    200: "#a5f3fc",
    ...

Customizing Colors - Tailwind CSS

Customizing the default color palette for your project.

ericmp #2OP•2y ago

no, since i only have a color, not a palette of that color: sorry if wasnt clear i did:

colors: {
    ...
    primary: '#06b6d4',
   ...

colors: {
    ...
    primary: '#06b6d4',
   ...

im getting to do it slowly by doing this on my css:

@layer components {
    .bg-primary-600 {
        @apply bg-my-color;

@layer components {
    .bg-primary-600 {
        @apply bg-my-color;

not sure if its a good idea

LeandroFerreira•2y ago

try this: https://www.tints.dev/primary/06B6D4

primary: {
      50: "#E1FAFE",
      100: "#C8F6FD",
      200: "#8DEBFC",
      300: "#56E2FA",
      400: "#1BD7F9",
      500: "#06B6D4",
      600: "#0590A9",
      700: "#046E81",
      800: "#024854",
      900: "#01262D"
    }

primary: {
      50: "#E1FAFE",
      100: "#C8F6FD",
      200: "#8DEBFC",
      300: "#56E2FA",
      400: "#1BD7F9",
      500: "#06B6D4",
      600: "#0590A9",
      700: "#046E81",
      800: "#024854",
      900: "#01262D"
    }

Tailwind CSS 11-color Palette Generator and API

A fast and flexible, HSL-tweakable palette generator and API for Tailwind CSS

ericmp #2OP•2y ago

o wow nice page discovered here it works just magical dude thanks a lot appreciate ur time 🙏

Gaming

Programming

How to globally costumize filament colors