Filament•9mo ago

Using filament theme on custom page

I am trying to use the Filament theme on a custom page. The custom page is using a Livewire component. I want to sync the color for the custom page and the panel. And yes, I have set up the custom theme with the "make:filament-theme" command.

<x-filament-panels::page>
    <livewire:component/>
</x-filament-panels::page>

<x-filament-panels::page>
    <livewire:component/>
</x-filament-panels::page>

livewire/components.blade.php


<div>
 <h1 class="primay">{{ $hello }}</h1>
</div>

livewire/components.blade.php


<div>
 <h1 class="primay">{{ $hello }}</h1>
</div>

6 Replies

Dennis Koch•9mo ago

.primary is not a valid Tailwind class. Did you setup your colors in tailwind.config.js?

Lucky0OP•9mo ago

I did not set up any colors. Also, I know that ".primary" is not a valid Tailwind class. I put it there just for reference. Sorry for any confusion. What I want is to sync the panel's primary color with the custom page color.

Dennis Koch•9mo ago

You need to define them inside tailwind.config.js if you want to use the TW classes. Otherwise you can use text-custom-500 and get_color_css_variables() method

Lucky0OP•9mo ago

I appreciate your assistance, but I am currently experiencing difficulties in understanding the necessary steps and procedures. Would it be possible for you to provide me with a reference link that I can consult to gain a better understanding?

Vp•9mo ago

Like this in your tailwind config

const colors = require('tailwindcss/colors')

export default {
    .....
    theme: {
        extend: {
            colors: {
                primary: colors.amber,
            },
        }
    },
}

const colors = require('tailwindcss/colors')

export default {
    .....
    theme: {
        extend: {
            colors: {
                primary: colors.amber,
            },
        }
    },
}

Lucky0OP•9mo ago

Thank you. Will try it out..

Gaming

Programming

Using filament theme on custom page