flatfile.com home pagelight logo
Guides
Theme your Space

Flatfile supports modifying most UI elements including colors, fonts, borders, padding, and more via the Space endpoint.

  1. Start by simply updating theme.root.primaryColor and theme.sidebar.logo when calling spaces.update().
  2. If needed, you can customize the theme further with additional css variables.

​
Building a theme

Learn how to create a Space with a theme, and update a theme from an event listener.

const updateSpace = await api.spaces.update(spaceId, {
    environmentId: environmentId,
     metadata: {
      theme: {
        root: {
          primaryColor: "red",
        },
        sidebar: {
          logo: "https://image.png",
        },
        //See reference for all possible variables
      }
    }
  }
});

​
Theme reference

​
theme.root

theme.root

The sidebar, table and document will automatically inherit theming from your root variables!

fontFamily
string
The font family used throughout the application.
buttonBorderRadius
string
The border radius for all buttons.
primaryColor
string
The primary color used throughout the application.
dangerColor
string
The color used for error messages.
warningColor
string
The color used for warning messages.
actionColor
string
The color used for the primary action.
successColor
string
The color used for successful actions.

​
theme.sidebar

theme.sidebar

You can override the default colors of the sidebar below. If these are not set they will inherit from your root colors.

logo
string
The img path for the logo displayed in the sidebar.
textColor
string
The color of the text in the sidebar.
titleColor
string
The color of the title in the sidebar.
focusBgColor
string
The background color of the sidebar when it is focused.
focusTextColor
string
The text color of a navigation link when it is focused.
activeTextColor
string
The text color of a navigation link when it is the active page.
backgroundColor
string
The background color of the sidebar.
footerTextColor
string
The text color of the footer in the sidebar.
textUltralightColor
string
The color of the icons in the sidebar.
borderColor
string
The color of horizontal lines between sections in the navigation.

​
theme.document

theme.document

borderColor
string
The color of horizontal rules in Documents.

​
theme.table

theme.table

You can override the default colors of the table below. If these are not set they will inherit from your root colors.

fontFamily
string
The font family used throughout the table.
theme.table.column

theme.table.column

column.header.backgroundColor
string
The background color of the column headers in the table.
column.header.color
string
The text color of the column headers in the table.
theme.table.indexColumn

theme.table.indexColumn

indexColumn.backgroundColor
string
The background color of the first column in the table.
indexColumn.color
string
The text color of the first column in the table.
indexColumn.selected.color
string
The text color of the selected first column in the table.
indexColumn.selected.backgroundColor
string
The background color of the first column in the table when selected.
theme.table.inputs

theme.table.inputs

inputs.checkbox.color
string
The color of the checkboxes in the table.