Summary  
This chapter explains how to customize a component’s appearance by applying built-in themes or writing custom CSS selectors to override styling properties such as colors, borders, and spacing.

General domain of usage  
Web-based file uploads

PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDxtZXRhIGNoYXJzZXQ9IlVURi04IiAvPgogICAgPGxpbmsKICAgICAgaHJlZj0iaHR0cHM6Ly91bnBrZy5jb20vZmlsZXBvbmQvZGlzdC9maWxlcG9uZC5taW4uY3NzIgogICAgICByZWw9InN0eWxlc2hlZXQiCiAgICAvPgogICAgPGxpbmsKICAgICAgaHJlZj0iaHR0cHM6Ly91bnBrZy5jb20vZmlsZXBvbmQtcGx1Z2luLWltYWdlLXByZXZpZXcvZGlzdC9maWxlcG9uZC1wbHVnaW4taW1hZ2UtcHJldmlldy5taW4uY3NzIgogICAgICByZWw9InN0eWxlc2hlZXQiCiAgICAvPgogICAgPGxpbmsgcmVsPSJzdHlsZXNoZWV0IiBocmVmPSJzdHlsZS5jc3MiIC8+CiAgPC9oZWFkPgogIDxib2R5PgogICAgPGlucHV0IHR5cGU9ImZpbGUiIGNsYXNzPSJmaWxlcG9uZCIgbmFtZT0iZmlsZXBvbmQiIG11bHRpcGxlIC8+CgogICAgPHNjcmlwdCBzcmM9Imh0dHBzOi8vdW5wa2cuY29tL2ZpbGVwb25kL2Rpc3QvZmlsZXBvbmQubWluLmpzIj48L3NjcmlwdD4KICAgIDxzY3JpcHQgc3JjPSJodHRwczovL3VucGtnLmNvbS9maWxlcG9uZC1wbHVnaW4taW1hZ2UtcHJldmlldy9kaXN0L2ZpbGVwb25kLXBsdWdpbi1pbWFnZS1wcmV2aWV3Lm1pbi5qcyI+PC9zY3JpcHQ+CgogICAgPHNjcmlwdD4KICAgICAgRmlsZVBvbmQucmVnaXN0ZXJQbHVnaW4oRmlsZVBvbmRQbHVnaW5JbWFnZVByZXZpZXcpOwoKICAgICAgRmlsZVBvbmQuY3JlYXRlKGRvY3VtZW50LnF1ZXJ5U2VsZWN0b3IoIi5maWxlcG9uZCIpLCB7CiAgICAgICAgY3JlZGl0czogZmFsc2UsCiAgICAgICAgYWxsb3dNdWx0aXBsZTogdHJ1ZSwKICAgICAgICBsYWJlbElkbGU6CiAgICAgICAgICAnPHNwYW4gY2xhc3M9ImZpbGVwb25kLS1sYWJlbC1hY3Rpb24iPkJyb3dzZTwvc3Bhbj4gb3IgRHJvcCBmaWxlcycKICAgICAgfSk7CiAgICA8L3NjcmlwdD4KICA8L2JvZHk+CjwvaHRtbD4=

Ym9keSB7CiAgZm9udC1mYW1pbHk6ICJJbnRlciIsIHNhbnMtc2VyaWY7CiAgYmFja2dyb3VuZDogI2YyZjZmNzsKICBkaXNwbGF5OiBmbGV4OwogIGp1c3RpZnktY29udGVudDogY2VudGVyOwogIHBhZGRpbmctdG9wOiA4MHB4Owp9CgouZmlsZXBvbmQtLXJvb3QgewogIG1heC13aWR0aDogNDYwcHg7CiAgd2lkdGg6IDEwMCU7CiAgYm9yZGVyLXJhZGl1czogMTZweDsKICBvdmVyZmxvdzogaGlkZGVuOwogIGJvcmRlcjogMnB4IGRhc2hlZCAjNGZhM2I2OwogIGJhY2tncm91bmQ6ICNmZmZmZmY7CiAgYm94LXNoYWRvdzogMCA4cHggMjRweCByZ2JhKDAsIDAsIDAsIDAuMDgpOwogIHRyYW5zaXRpb246IDAuMnMgZWFzZTsKfQoKLmZpbGVwb25kLS1yb290OmhvdmVyIHsKICBib3JkZXItY29sb3I6ICMzYThkOWQ7CiAgYm94LXNoYWRvdzogMCAxMHB4IDI4cHggcmdiYSgwLCAwLCAwLCAwLjEyKTsKfQoKLmZpbGVwb25kLS1wYW5lbC1yb290IHsKICBiYWNrZ3JvdW5kLWNvbG9yOiAjZjBmYmZkICFpbXBvcnRhbnQ7CiAgYm9yZGVyLXJhZGl1czogMTZweCAhaW1wb3J0YW50Owp9CgouZmlsZXBvbmQtLWRyb3AtbGFiZWwgewogIGZvbnQtc2l6ZTogMS4xcmVtOwogIGNvbG9yOiAjM2E4ZDlkOwogIGZvbnQtd2VpZ2h0OiA2MDA7CiAgcGFkZGluZzogMS40cmVtOwp9CgouZmlsZXBvbmQtLWl0ZW0gewogIGJvcmRlci1yYWRpdXM6IDEycHg7CiAgb3ZlcmZsb3c6IGhpZGRlbjsKICBib3gtc2hhZG93OiAwIDRweCAxMnB4IHJnYmEoMCwgMCwgMCwgMC4wNik7CiAgbWFyZ2luLWJvdHRvbTogMTJweDsKICB0cmFuc2l0aW9uOiAwLjJzIGVhc2U7Cn0KCi5maWxlcG9uZC0taXRlbTpob3ZlciB7CiAgdHJhbnNmb3JtOiB0cmFuc2xhdGVZKC0ycHgpOwogIGJveC1zaGFkb3c6IDAgOHB4IDIwcHggcmdiYSgwLCAwLCAwLCAwLjEpOwp9CgouZmlsZXBvbmQtLWZpbGUtYWN0aW9uLWJ1dHRvbiB7CiAgYmFja2dyb3VuZC1jb2xvcjogIzRmYTNiNiAhaW1wb3J0YW50OwogIGNvbG9yOiAjZmZmICFpbXBvcnRhbnQ7CiAgYm9yZGVyLXJhZGl1czogOHB4ICFpbXBvcnRhbnQ7CiAgdHJhbnNpdGlvbjogYmFja2dyb3VuZCAwLjJzIGVhc2U7Cn0KCi5maWxlcG9uZC0tZmlsZS1hY3Rpb24tYnV0dG9uOmhvdmVyIHsKICBiYWNrZ3JvdW5kLWNvbG9yOiAjM2E4ZDlkICFpbXBvcnRhbnQ7Cn0KCi5maWxlcG9uZC0tY3JlZGl0cyB7CiAgZGlzcGxheTogbm9uZSAhaW1wb3J0YW50Owp9

To customize FilePond's appearance, you can use **built-in themes** or write your own **CSS** to override its styles. FilePond includes a default theme, but you can switch themes by including different CSS files or plugins designed for specific looks. For example, adding a dark theme or image preview plugin will change the widget's appearance. To further match your site's branding, use custom CSS selectors targeting FilePond's class names, such as `filepond--root`, `filepond--panel-root`, and `filepond--drop-label`. By overriding these styles, you can adjust **colors**, **borders**, **spacing**, and more, making the uploader feel like a seamless part of your website.

How can you change the appearance of FilePond to match your website's branding?

Create modern, customizable file upload interfaces using FilePond with minimal configuration. Learn how to integrate FilePond, style it, enable advanced features, and extend it with plugins. Build polished, real-world upload components for practical web projects.

Explore the fundamentals of file uploads on the web and learn how FilePond streamlines the process. Set up FilePond and prepare your first working upload interface.

Customize FilePond's appearance and behavior to match your application's design. Adjust styling, layout, and functionality using built-in settings.

Use FilePond's advanced features to enhance user experience, including drag-and-drop, validation, and plugin-powered extensions.

Put your FilePond skills into practice by building real-world upload solutions and integrating optional plugins for professional results.

Styling FilePond

Styling FilePond