What you'll learn:

How to customize your app's complete visual theme
Using the intelligent color system for professional results
Setting up light and dark mode options
Advanced customization techniques and best practices

Understanding Themes

Themes makes it easy to customize your app by automatically generating complete, harmonious color palettes from your primary color selection. This intelligent system eliminates guesswork while ensuring professional design consistency.

When you select a primary color, the system calculates complementary colors, appropriate contrast ratios, and harmonious variations that work seamlessly together. You get a polished, professional appearance without extensive design expertise or hours of fine-tuning individual colors.

Key Features

Intelligent color generation: Complete palettes from one color choice
Light and dark modes: User-selectable viewing preferences
Real-time preview: Instant visual feedback with Quick View
Brand flexibility: Override specific colors while maintaining harmony

Tip: Use the Quick View feature to see exactly how your theme changes appear in your live application as you make adjustments.

Getting Started

Accessing Theme Settings

Open your Knack Builder
Click Themes in the left navigation menu
Select My Custom Theme to open Theme Settings
You'll see two main sections:
- Styles: Color customizations and typography
- Layout: Navigation positioning and structural elements

The interface organizes options logically, so you can focus on specific customization aspects without feeling overwhelmed.

Theme Styles Tab

The Theme Styles interface is divided into two main areas:

Left Navigation Panel - Configuration options and settings
Main Content Area - Theme Preview and real-time visual feedback

Colors Section

Mode

System
Light Mode Only
Dark Mode Only

When "System" is selected in the Mode dropdown:

App automatically follows the Live App user's device settings
Switches between Light and Dark modes based on system preferences

User Toggle Option

When "System" is selected, you have an addition option to enable:

"Allow your users to toggle between Light, Dark and System modes". When enabled,

Users see mode selection controls in your live app
They can manually choose their preferred viewing mode
Options include Light, Dark, and System modes
Settings are remembered for each user

Mode Preview

Use the Light Mode/Dark Mode toggle buttons at the top of the preview to:

See how your color choices work in both modes
Verify text readability in light and dark themes
Ensure your brand colors work effectively in both contexts

Setting Your Primary Color

Your primary color serves as the foundation for your entire theme. This color influences all other generated colors. When Mode is set to System, you'll be able to set up primary colors for light mode and dark mode.

Selection Methods:

Color Picker: Choose from curated common colors for quick selection
Custom Picker: Access the full spectrum with:
- Visual color selection or:
  - RGB, HSL, or Hex input

Advanced Color Options

While the intelligent system works well for many applications, you can override specific colors for brand requirements when you choose a custom color:

Secondary Primary Color: Customize the secondary color
Navigation Background: Customize the navigation menu background color
Page Background: Set a specific background color for pages. You'll find options to use one color or to create a custom gradient with two colors.

💡
When using gradients:

Opt for angles between 120° and 165° for a natural flow

Avoid straight vertical (90°) or horizontal (0°) gradients

Consider 135° as a safe default angle

Ensure text remains readable across the entire gradient

Font Section

Expand the Font section in the left panel to access:

Font Family Selection - Choose from provided fonts or upload custom fonts

Action Links Section

Coming Soon! Customize styling options for clickable text elements

Labels Section

Coming Soon! Customize field label styling and appearance options

Appearance Section

Expand to set general visual styling options:

Rounded or sharp corners for buttons and cards
Shadows for cards

Table Design Section

Data table customization options include:

Borders

Rows only: Shows horizontal borders between table rows
Rows and columns: Shows both horizontal and vertical borders creating a full grid

Max Height

Enables/disables maximum height constraints for tables. When enabled, tables will have scrollable content if they exceed the maximum height.

Row Spacing

Compact: Minimal padding for dense data display
Default: Standard spacing for balanced readability
Comfortable: Extra padding for improved readability and touch interaction

Visual Enhancements

Alternate row background colors: Creates zebra striping for easier row scanning
Hover on a row highlights it: Provides visual feedback when users hover over table rows

Theme Preview Area

Header Section

In the top header section, you'll find your theme name, along with:

Quick View - Launch a live preview of your application
Cancel - Discard unsaved changes
Save Changes - Save your changes, or Save and Apply your changes to the Live App.

Save Process

Make your desired changes in the left panel settings
Review changes in the Theme Preview area
Test using Quick View if needed
Click Save Changes
1. Select Save Changes to save your progress
2. Select Save and Make Active to save your progress and apply them immediately to your Live App

Cancel Changes

Click Cancel to discard all unsaved modifications
This returns all settings to their last saved state
Any unsaved work will be lost

How to Use Quick View

Click Quick View button in the top-right area
Your app opens in a new window/tab with current theme applied
Navigate through different pages to test your theme
Return to Theme Settings to make adjustments
Click Stop Quick View to end the preview session

What to Test in Quick View

Text readability across all content types
Button and link visibility and contrast
Navigation element clarity and usability
Form field appearance and usability
Table and list readability
Overall visual hierarchy and balance

💡Test major changes in Quick View before saving

💡 Save changes incrementally as you work

Theme Preview Panel

The examples in this area show how your selected theme settings will be reflected in your app. To view these changes in your actual app, please select the 'Quick View' option.

Preview Mode Toggles:

Use the Light Mode/Dark Mode toggle buttons at the top of the preview to:

See how your color choices work in both modes
Verify text readability in light and dark themes
Ensure your brand colors work effectively in both contexts

Styles Preview

There are different expandable sections to show how theme configurations are applied across your app

Live App Colors Section

A display of your complete color palette showing how colors are applied:

Primary: Primary buttons, links, accent color
Secondary: Tags, labels, other selections
Navigation: Navigation Menu background
Background: Page background
Border: Borders for grids, lists, dividers
Heading Text: Page and column headings, titles
Normal Text: Text in tables, lists, modals etc.
Lighter Text: Labels, hint text

Fonts Section

Preview of your selected font across different text styles and hierarchy levels

Typography Hierarchy Display:

Page Title - Large, bold text sample
Card and Section Headings - Medium, semi-bold text sample
Body Text - Regular weight text sample
Small Text - Smaller, regular weight text sample

Buttons Section

Interactive button styles with your theme colors

Interactive button styles: Shows how theme colors are applied to different button states
Multiple button variations: Displays primary, secondary, and other button styles
Real-time color application: Buttons update automatically when theme colors change

Navigation and Link Groups Section

Main navigation menu and link group styling

Selected and unselected navigation menu items and hover states
Selected, unselected, and inactive Link Group tabs

Action Links

Shows how the different view, edit and delete links which are used across various elements

Cards Appearance

Displays a card with the appearance configurations selected

Table Design

An example grid with the theme colors and grid settings applied

Understanding Knack's Intelligent Color System

How It Works

The intelligent color system uses established color theory principles to generate complete, harmonious palettes from your primary color selection. When you select a primary color using the dropdown in the left panel, the system automatically:

Creates complementary colors using color harmony calculations
Ensures professional consistency across all elements
Balances visual appeal with practical usability
Updates all color swatches in real-time in the preview

Color Functions Explained

Each generated color serves specific interface functions as shown in the Live App Colors section:

Primary Color

Used for primary buttons, important links, and accent colors
The dominant color that reinforces your brand identity
Appears prominently in call-to-action elements

Secondary Color

Applied to the active page in the navigation menu and filter tabs
Supporting elements that complement your primary color
Used for less prominent interactive elements

Navigation Color

Background color for the main navigation tabs and menus
Provides wayfinding structure throughout your app
Ensures navigation elements are clearly distinguished

Background Color

Main page background color
Foundation element that provides visual structure
Affects overall app brightness and contrast

Border Color

Applied to borders for grids, lists, and dividers
Creates subtle boundaries that organize content clearly
Helps separate different content areas

Text Colors

Heading Text - Page and column headings, titles (darkest for maximum readability)
Normal Text - Text in tables, lists, modals, and main content (medium contrast)
Lighter Text - Labels and hint text (lighter for secondary information)

👍
Each text color is automatically calculated for optimal readability against its intended background while maintaining clear content hierarchy

Color Psychology Considerations

Blue - Conveys trust and professionalism (popular for business applications)

Green - Suggests growth, success, and environmental consciousness

Red - Indicates urgency or importance (use carefully to avoid creating anxiety)

Purple - Implies creativity and innovation

Orange - Energetic and friendly, good for engaging applications

Gray - Professional and neutral, works well for business tools

Testing Your Theme

Use this handy checklist:

Visual Testing:

Navigate through all major app sections using Quick View
Verify text readability in all contexts (forms, tables, navigation)
Check button visibility and contrast
Test both Light and Dark modes if user toggle is enabled
Ensure visual hierarchy is clear and logical

User Experience Testing:

Get feedback from colleagues or beta users
Test on different devices and screen sizes

Brand Consistency:

Ensure theme aligns with your brand guidelines
Verify logo and brand elements work with new colors
Test brand recognition with your color choices

Coming Soon Features

The Next-Gen Themes system continues evolving with new capabilities:

Preview Specific Elements Tab

Targeted preview for particular interface components
Detailed view of how themes affect specific page elements

Accessibility Report Tab

WCAG contrast validation and compliance checking
Suggestions for improving accessibility
Action Links Styling - Control over clickable text elements
Labels Customization - Field label appearance and formatting options

👍
These upcoming features reflect our commitment to making theme customization both powerful and accessible for all users