Theme Styles

What You'll Learn

You'll discover how to personalize your Knack app's visual appearance using theme styles. This includes setting color schemes, font options, applying visual effects, and creating a consistent branded experience for your users that enhances both aesthetics and usability.

Theme Styles Overview

Theme styles control the visual appearance of your Knack app, including colors, fonts, and visual effects. By customizing your theme styles, you can create a cohesive look that matches your brand and enhances the user experience.

Color Options

Preset vs. Custom Colors

You can choose between:

Preset: Select between several default color schemes
Custom Colors: Define your own color palette

Primary Color

The primary color is used for buttons, focus rings, brand text, and active navigation states. Choose a color that represents your brand and provides good contrast against your background.

Light and Dark Mode

Knack allows you to customize colors for both light and dark modes:

Light Mode Background Color: Sets the background color when in light mode
Dark Mode Background Color: Sets the background color when in dark mode
Toggle Option: You can allow users to switch between light and dark modes

Tip: When selecting colors, ensure sufficient contrast between text and background colors for accessibility.

Font Settings

Customize how text appears throughout your app by adjusting the font settings:

Default Font: Choose from available system fonts
Custom Font: Upload or link to custom fonts

Row Settings

Customize how table rows and data appear:

Row Spacing: Choose between Compact, Default, or Comfortable spacing
Max Height: Set maximum height for rows

Advanced Settings

Rows and columns: Configure advanced layout grid settings
Table Design: Customize table appearance parameters

Visual Effects

Enhance your app's appearance with visual effects:

Use shadows on cards: Adds dimension to card elements
Alternate row background colors: Improves readability in tables
Hover on a row highlights it: Makes interactive rows more obvious
Use a gradient for the page: Creates a subtle background effect

Appearance Settings

Corners

Choose the corner style for elements:

Rounded: Softer, more modern appearance
Square: More traditional, structured look

Surface Styles

Select from various surface styles:

Default: Standard appearance
Raised: Slightly elevated appearance
Subtle: Minimalist look
Bold: Strong visual presence
Error: For error states

Border Styles

Customize borders throughout your app:

Default: Standard border appearance
Subtle: Minimalist borders
Emphasis: More prominent borders
Brand: Borders using your brand color
Error: Borders for error states

Reset All Colors

If you need to start fresh, you can reset all color customizations to Knack defaults using the "Reset All Colors" button at the bottom of the Styles panel.

Note: Before resetting, consider saving your current theme if you might want to reuse your customizations later.