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)) {
        &: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!

Jump to solution

Filament•8mo ago•

13 replies

Jonas

v4 - Flicker when using a custom theme

Solution

.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!

Jump to solution

v4 - Flicker when using a custom theme

Similar Threads

v4 - Flicker when using a custom theme

Similar Threads

Similar Threads

Similar Threads