Styling

If we want to change the components and elements FilePond uses to render entries we can use templates or various render hooks.

We can style individual “parts” of FilePond using the ::part() selector. Please note that this doesn’t allow us to target children of the targeted part.

Generic styles

file-pond {
    /* Add some spacing around the file-pond element */
    margin: 1em 0;

    /* Show a hand cursor when hovering over "browse" */
    & u {
        cursor: pointer;
    }
}

Themes

FilePond uses the browser form element colors for its default styles.

Dark Mode

If we already switch between light and dark mode using color-scheme, then we don’t have to change anything and FilePond will automatically adjust its colors as well.

html {
    color-scheme: light;
}

@media (prefers-color-scheme: dark) {
    html {
        color-scheme: dark;
    }
}

If we’re not using color-scheme at the top level of our page we can tell FilePond to swap colors like this.

file-pond {
    color-scheme: light;
}

@media (prefers-color-scheme: dark) {
    file-pond {
        color-scheme: dark;
    }
}

Adjust colors

This flips the foreground and background colors of FilePond.

file-pond {
    --default-color: white;
    --default-background-color: black;
}

@media (prefers-color-scheme: dark) {
    file-pond {
        --default-color: black;
        --default-background-color: white;
    }
}

Entry Styles

Make all the things round.

file-pond {
    --default-border-radius: 2.25em;
}

Just circular buttons.

file-pond::part(entry-button) {
    --btn-border-radius: 2em;
}

file-pond::part(media-controls) {
    --panel-border-radius: 1.25em;
}

Rounded item corners.

file-pond::part(entry-list) {
    --entry-border-radius: 1.25em;
}

Different border colors.

file-pond {
    --default-color: white;
    --default-background-color: black;
}

file-pond::part(entry-list) {
    --entry-border-top: 1px solid rgba(255, 255, 255, 0.2);
    --entry-border-right: 1px solid rgba(255, 255, 255, 0.125);
    --entry-border-bottom: 1px solid rgba(255, 255, 255, 0.075);
    --entry-border-left: 1px solid rgba(255, 255, 255, 0.125);
}

Entry List Layouts

The layout engine automatically animated entry items to their new locations, this means we’re free to layout the list however we please

Stacks

The default list layout is a vertical stack of items.

Grids

With grids we can make the layout more exotic. The examples below are fairly straightforward, but entries in the list may also have different widths or heights, there are no technical limitations.

A basic two equal column grid.

file-pond::part(list) {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

If we want to align items to the top of their grid cell instead of stretching to fill the cell we can target the list-item part.

file-pond::part(list-item) {
    align-item: flex-start;
}