Styling

When we load the <file-pond> custom element it also automatically loads default styles. We can customize these styles with CSS.

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;
    }
}

Different colors

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

Stack

The default list layout is a vertical stack of items.

Grids

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;
}