🎨Creating a theme
You can create a theme to choose how the Databrain Plugin in your application should look like.
Step 1: Please visit the databrain app and in the sidebar click on the "Settings" button at the bottom.
Step 2: In the top navigation please click on the tab "UI Theming" and then a UI form page will appear like in the image below.
Step 3: To fill out the UI form we need to understand different sections and what each does to reflect in the UI.
General - As the name suggests it is general things that will apply to all things.
We have a "Theme Name" field where you can give any name to the theme you are going to create. At the time of writing only a single theme can be created but you can edit and update it to make changes to the theme.
We have a "Font Family" field where you can specify which font family to use throughout the plugin. But remember this exact font family should be available in your app otherwise it will not work. By default, it is using databrain app font family "Inter".
Dashboard - As the name suggests it is for customizing the dashboard itself.
We have a "Dashboard Background Color" field where you can specify the background color of the dashboard where all the metric charts will be shown.
We have a "CTA Button Color" field where you can specify the background color of the primary call to action button. You can either choose a color from the color picker on the left side or manually input any valid color values e.g. rgb, hex, hsl, and color name.
We have a "CTA Text Color" field where you can specify the text color of the primary button.
Card Title - The title of the metric card "Area Chart" like in the image above. You can customize it too by providing font-weight, font-size, and color.
Card Description - The optional description value that you have given at the time of metric creation. You can customize it too similar to the card title.
Chart - This field lets you customize colors to be used to show the graphics in charts. You can choose the chart palette from the available options or create your own.
Choose any chart palette you want or create your own custom chart palette by clicking on the "Add a custom chart button".
After clicking a input field and some color fields will be shown when you click on the color fields then you can choose the color in the right either using color picker or manually inputing the color hex, rgb, hsl or any valid color name.
Then click on the "Save Color Palette" this will add the color palette to the options to choose from. Then you can select your newly created palette.
Step 4: Now you have filled out the form and wanted to save the theme to see the reflected changes, for the same in the top navigation on the right there is a "Save Theme" button, please click on the button to save your inputs.
Yahoo! now you have successfully created a theme from scratch. Please read the next article to know how to see this saved theme in action.
Last updated