Filament•4mo ago

v4 - Flicker when using a custom theme

When using a custom theme that overrides styles using the apply directive in v4 i get a slight flicker on loading when it changes from the default styles to the overriden styles. Is there any way to avoid this or maybe i am doing it wrong?

Solution:

Issue was on my side. fixed it by adding outline-transparent to the .fi-input-wrp, and then changing color on focus. Because of the transition applied to the .fi-input-wrp by default, the outline was black before turning blue, which was the issue i saw ``` .fi-input-wrp { @apply outline-transparent; &:not(.fi-disabled):not(:has(.fi-ac-action:focus)) {...

Jump to solution

9 Replies

JonasOP•4mo ago

In the example above i am overriding the form focus state color, but you can see the original black/gray being visible for a split second

awcodes•4mo ago

Maybe share some code.

JonasOP•4mo ago

Sorry, yes i should have. Here it is: For example in the theme.css:

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

@source '../../../../app/Filament/Client/**/*';
@source '../../../../resources/views/filament/client/**/*';


.fi-input-wrp {
    @apply shadow-sm rounded-md;

    @apply [&:not(:has(.fi-ac-action:focus))]:focus-within:outline-blue-500/30
    [&:not(:has(.fi-ac-action:focus))]:focus-within:outline
    [&:not(:has(.fi-ac-action:focus))]:focus-within:outline-4;

    @apply [&:not(:has(.fi-ac-action:focus))]:focus-within:ring-1
    [&:not(:has(.fi-ac-action:focus))]:focus-within:ring-blue-600;

    @apply dark:[&:not(:has(.fi-ac-action:focus))]:focus-within:ring-blue-400;
}

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

@source '../../../../app/Filament/Client/**/*';
@source '../../../../resources/views/filament/client/**/*';


.fi-input-wrp {
    @apply shadow-sm rounded-md;

    @apply [&:not(:has(.fi-ac-action:focus))]:focus-within:outline-blue-500/30
    [&:not(:has(.fi-ac-action:focus))]:focus-within:outline
    [&:not(:has(.fi-ac-action:focus))]:focus-within:outline-4;

    @apply [&:not(:has(.fi-ac-action:focus))]:focus-within:ring-1
    [&:not(:has(.fi-ac-action:focus))]:focus-within:ring-blue-600;

    @apply dark:[&:not(:has(.fi-ac-action:focus))]:focus-within:ring-blue-400;
}

JonasOP•4mo ago

Without the theme:

JonasOP•4mo ago

With the theme:

Dan Harrin•4mo ago

I think this is to do with the CSS you apply and the browser behaviour rather than Filament? we dont use outline for instance, but you are applying an outline on top of our right? check our CSS files and adapt to the ring we use?

JonasOP•4mo ago

ok thanks, yes it could be. I do both ring and outline for a cool effect, which worked fine in filament v3 but causes issues on v4. Though, might be a tailwind v4 quirck. Adding a transition to it seems to resolve it a bit to the point where its not really noticable

Dan Harrin•4mo ago

maybe remove the default filament ring before applying yours? if you look at the wrapper.css you can see what we use also its criminal to put so many arbitrary tailwind selectors in @apply statements, do proper selectors in css with nesting 😅

Solution

Jonas•4mo ago

.fi-input-wrp {
    @apply outline-transparent;
    &:not(.fi-disabled):not(:has(.fi-ac-action:focus)) {
        &:focus-within {
            @apply ring-blue-600 dark:ring-blue-400 ring-1 outline-4 outline-offset-1 outline-blue-500/20;
        }
    }
}

.fi-input-wrp {
    @apply outline-transparent;
    &:not(.fi-disabled):not(:has(.fi-ac-action:focus)) {
        &:focus-within {
            @apply ring-blue-600 dark:ring-blue-400 ring-1 outline-4 outline-offset-1 outline-blue-500/20;
        }
    }
}

Thanks for the help!

Gaming

Programming

v4 - Flicker when using a custom theme

Did you find this page helpful?