Customizing Uploader Styling

Custom Button Styling

Osmos supports setting custom styling on the button element of an uploader. This can be done either by setting a style property on the element itself or via css with the .ftl-button class.


You can change the theme of Osmos Uploaders. To configure the theme, please add this section into your code snippet embedded in your HTML:

    theme: {
      colors: {
        primary: "#1888e2",
        secondary: "#ffd626",
        success: "#38d800",
        warning: "#fba21d",
        error: "#ef2929",
  fonts: {
    body: {
      fontFamily: "'Roboto', 'Segoe UI', 'Oxygen', sans-serif",
    h1: {
      fontFamily: "'Beatrice', 'Segoe UI', 'Oxygen', sans-serif",
      fontWeight: 500,
      fontSize: 24,
      lineHeight: '36px',
      marginBottom: '16px',
    h2: {
      fontFamily: "'Roboto', 'Segoe UI', 'Oxygen', sans-serif",
      fontWeight: 500,
    h3: {
      fontFamily: "'Roboto', 'Segoe UI', 'Oxygen', sans-serif",
      fontWeight: 500,
  buttons: {
    borderRadius: '4px',
   schema: {
     // continue with Uploader snippet

Theme Notes

  • Each of the styling fields are optional

  • For the font body and headers, any CSS property can be used to customize them such as fontFamily, marginTop, marginBottom, padding, lineHeight, fontSize, and fontWeight.

  • The colors must be a valid CSS color Hex, HSL or RGB in the following formats: "#nnn", "#nnnnnn", "rgb()", "rgba()", "hsl()", or "hsla()". For example, "#32A852" or "hsl(46, 100%, 50%)".

  • Spinner colors are tied to the primary color.

Last updated