Changing navigation color text.

How can I change the color of navigation item text to black?

7 Replies

Create a custom theme and customize the css https://filamentphp.com/docs/3.x/panels/themes/#creating-a-custom-theme

dyo•2w ago

So this is my custom theme

@import '/vendor/filament/filament/resources/css/theme.css';

@config 'tailwind.config.js';

.fi-sidebar-item {
    color: black !important;
    background-color: blue !important;
}

@import '/vendor/filament/filament/resources/css/theme.css';

@config 'tailwind.config.js';

.fi-sidebar-item {
    color: black !important;
    background-color: blue !important;
}

i've followed the step below ⇂ First, add a new item to the input array of vite.config.js: resources/css/filament/admin/theme.css ⇂ Next, register the theme in the admin panel provider using ->viteTheme('resources/css/filament/admin/theme.css') ⇂ Finally, run npm run build to compile the theme But the custom class style is not applying. what posibly am i missing? here's my vite.config.js file

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

export default defineConfig({
    plugins: [
        laravel({
            input: ['resources/css/app.css', 'resources/js/app.js','resources/css/filament.css', 'resources/css/filament/admin/theme.css'],
            refresh: true,
        }),
    ],
});

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

export default defineConfig({
    plugins: [
        laravel({
            input: ['resources/css/app.css', 'resources/js/app.js','resources/css/filament.css', 'resources/css/filament/admin/theme.css'],
            refresh: true,
        }),
    ],
});

LeandroFerreira•2w ago

.fi-sidebar-item a {
    @apply text-black;
}

.fi-sidebar-item-label {
    @apply text-black;
}

.fi-sidebar-item a {
    @apply text-black;
}

.fi-sidebar-item-label {
    @apply text-black;
}

Did you add in the theme.css? Did you run npm run dev?

dyo•2w ago

yes did run npm run dev and I add the style in resources/css/filament/admin/theme.css I also copied your style in that css file, while running npm run dev, and refresh the page, but the nav label still not colored black @Leandro Ferreira

Dennis Koch•2w ago

Check your DevTools. Does the class exists? Good your theme was compiled. Is it applied at the correct level?

dyo•2w ago

yes the class is exist the last time i checked. but I just realize I got some warning messages when running npm build.. some of them like

...warnings when minifying css:
▲ [WARNING] Unexpected "li" [css-syntax-error]

    <stdin>:8976:42:
      8976 │ .menu > :where(.dark\:disabled:is(.dark *)li > *:not(ul):focus) {
           ╵                                           ~~


▲ [WARNING] Unexpected "*" [css-syntax-error]

    <stdin>:8979:36:
      8979 │ .btm-nav>.dark\:disabled:is(.dark *)*,
           ╵                                     ^


▲ [WARNING] Unexpected "li" [css-syntax-error]

    <stdin>:8988:33:
      8988 │ .menu .dark\:disabled:is(.dark *)li > * {

...warnings when minifying css:
▲ [WARNING] Unexpected "li" [css-syntax-error]

    <stdin>:8976:42:
      8976 │ .menu > :where(.dark\:disabled:is(.dark *)li > *:not(ul):focus) {
           ╵                                           ~~


▲ [WARNING] Unexpected "*" [css-syntax-error]

    <stdin>:8979:36:
      8979 │ .btm-nav>.dark\:disabled:is(.dark *)*,
           ╵                                     ^


▲ [WARNING] Unexpected "li" [css-syntax-error]

    <stdin>:8988:33:
      8988 │ .menu .dark\:disabled:is(.dark *)li > * {

Could be the issue?

Dennis Koch•2w ago

Might be an issue but if you say the compiled CSS file contains your class it shouldn't be the current issue

Gaming

Programming

Changing navigation color text.