Custom Themes
Customize your dashboard by passing a custom theme
For pixel-perfect control over theming and styling, all Quill components accept custom components as props. See our dashboard docs for an example.
import { QuillProvider } from "@quillsql/react";
// You can a custom theme to be applied to the default Quill
// components, or you can pass your own components with
// pixel-perfect styling.
const MY_CUSTOM_THEME = {
fontFamily: "Inter; Helvetica",
backgroundColor: "#FFFFFF",
primaryTextColor: "#364153",
secondaryTextColor: "#6C727F",
chartLabelFontFamily: "Inter; Helvetica",
chartLabelColor: "#666666",
chartTickColor: "#CCCCCC",
chartColors: ["#4E80EE", "#E14F62", "#55B5A6", "#E9A23B"],
borderColor: "#E5E7EB",
primaryButtonColor: "#364153",
secondaryButtonColor: "#384151",
borderWidth: 1,
labelFontWeight: 500,
fontSize: 14,
loadingStateBackgroundColor: "#F9F9FA",
hoverBackgroundColor: "#F4F4F5",
};
function App() {
return (
<QuillProvider
publicKey={process.env.QUILL_API_KEY}
organizationId={user.organizationId}
theme={MY_CUSTOM_THEME}>
{children}
</QuillProvider>
);
}
QuillTheme
The font family you want Quill to use. This is usually the same font your app uses. ex: “Inter”
The default font size you want Quill to use. This is usually the same as the fontSize of your app (eg. 16 for “16px”).
The background color you want Quill to use. This is usually the same background color your app uses. ex: “#FFFFFF”
The background color you want Quill to use while hovering.
The color you want Quill to use for primary text. This is usually the same primary text color color your app uses. ex: “#000000”
The text color you want Quill to use for secondary text. This is usually the same secondary font color your app uses. ex: “#888888”
The font family you want Quill to use for chart labels. This is usually the same as your base font family. ex: “Inter”
The text color you want Quill to use for chart labels. This is usually the same as or similar to the secondary color your app uses. ex: “#666666”
The color you want Quill to use for chart ticks. This is usually the same as or similar to the secondary color your app uses. ex: “#CCCCCC”
The chart colors you want Quill to use. This is usually the same as the primary and secondary colors your app uses. You can pass in as many colors as you want, and you can also override these by passing in an array for the colors prop in the Chart component. ex: [‘#6269E9’, ‘#E14F62’]
The border color you want Quill to use. This is usually the same as or similar to the border color your app uses. ex: “#CCCCCC”
The border width you want Quill to use. This is usually the same as or similar to the border width your app uses. ex: 1 (ie. “1px”)
The color of the primary buttons you want Quill to use. Typically, you can just pass in a custom button with the styling you want instead of using this.
The color of the secondary buttons you want Quill to use. Typically, you can just pass in a custom button with the styling you want instead of using this.
The font weight you want Quill to use for buttons. Typically, you can just pass in a custom button with the styling you want instead of using this. (eg. 600)
The font weight you want Quill to use for labels. Typically, you can just pass in a custom label component with the styling you want instead of using this. (eg. 400)
The background color you want Quill to use while in a loading state. This is usually the same as the background color you app uses (eg. ‘#FFFFFF’).