User guideCustomizing themes for Kissflow Apps
Themes in Kissflow Apps offers a variety of color customization options that allow you to personalize several core aspects of your app components to reflect your organization’s unique brand identity and to maintain a consistent visual experience for your users.
Theme settings in Apps
To customize a theme for your app, click the settings icon in the left pane and click Theme settings.
In the theme settings page, you will find several color palette options that lend colors to different components of your apps.
Theme color options
Primary color
When you choose a primary color, it is applied to many components, such as buttons, badges, and text selection. It sets a uniform color tone across elements in your app. By default, the color selected here will be the default color set at the account level. You can modify this setting and apply a different primary color for a specific app. The Apply relevant changes to the background toggle will replace the background color with the tint of the selected primary color and adjust the neutral colors to complement the primary color's tone.
This option is similar to the applying tint at an account level. However, you can remove the tint under theme settings to override the global setting.
Secondary colors
Secondary colors allow you to customize individual elements in your app at a granular level. This means you can customize background labels for status chips, sliders, the rating component, and badges.
Semantic colors
Semantic colors help indicate specific status and actions or convey information to the user. Under theme settings, there are four default colors for success, warning, error, and info scenarios. You can choose to modify these colors as per your organization’s conventions.
Neutral colors
Neutral colors are shades of gray applied to the text labels and toolbars as background colors across the app. If you have applied the tint of your chosen primary color in the app, the neutral color palette will be updated to complement the selected primary color.
Chart colors
The themes feature offers ten different chart colors that can help you make them more visually appealing.
Each color is designed to look as different from the nearest one as possible, thereby enhancing the visibility of each data category and improving accessibility with easily distinguishable colors. Similar to the other color options, chart colors are also entirely customizable.
In addition to modifying colors, you can adjust the opacity of the selected color from the color picker. This applies to all the aforementioned color options.
Theme preview
The live preview of the theme will let you visualize in real-time how certain components will appear in your app after the color adjustments.
The preview page includes components that cover all the color options that are offered. By previewing your changes, you can ensure visual consistency in your app when you choose custom colors for different elements.
Additionally, previewing aids in accessibility considerations; for instance, if a selected primary color compromises readability by being too light, you will receive a warning message that can help you make better color choices.
Reset to default options
The themes feature provides palette-level as well as global reset to default option.
Each color option in every palette comes with an individual reset-to-default option, allowing you to reset individual resets. Every color palette has a reset option to reset all changes under the particular palette. The global Reset to defaults button will reset all theme changes and apply the primary color and tint settings that are set at the account level.
FAQs
Would the theme changes in an app affect other apps in the same Kissflow account?
No, the theme changes are app-specific and will not be carried over to other apps in the account.
Can I set a different font for a specific app?
No, it is not possible to change the font that has been set at an account level. Learn how to change fonts for your Kissflow account.
What is the order of precedence for the theme colors?
Color changes made locally on a page, a form, or a report will always override the theme settings. Theme colors will override the primary color set at the account level.