Guides
Theme your Space
Guides
Theme your Space
Learn how to customize the look and feel of Flatfile to match your brand.
Flatfile supports modifying most UI elements including colors, fonts, borders, padding, and more via the SpaceA micro-application... endpoint.
- Start by simply updating
theme.root.primaryColor
andtheme.sidebar.logo
when callingspaces.update()
. - 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
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
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
borderColor
string
The color of horizontal rules in Documents.
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
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
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
inputs.checkbox.color
string
The color of the checkboxes in the table.