Appfarm Documentation
Getting startedDocumentationCommunityAppfarm Create
  • Overview
  • Getting Started
    • What is Appfarm?
    • Key concepts
    • Quickstart
      • Speed intro
      • Step-by-step guide
    • Appfarm Showroom
    • FAQ
  • Appcademy
    • Learning paths
    • Appfarm Fundamentals
      • Intro Course
        • 1. Intro to No-Code and Appfarm
        • 2. Navigation in Appfarm Create
        • 3. What is Apps?
        • 4. Intro to UI Editor
        • 5. Data Model
        • 6. App Data
        • 7. Actions
        • 8. Tips and Tricks
        • 9. Intro to practical walkthrough
        • 10. Create a details view of a Project
        • 11. Create a Custom List
        • 12. Swipe and Delete
        • 13. Functionality for simple Create of Data
        • 14. Upload and Download Photos
        • 15. Input Dialog with Validation and Save
        • 16. Dashboard
        • 17. Summary
        • Quiz
      • User Interface Fundamentals
        • Container - Sectioning, Styling and Repeating
        • Conditional Styles
        • Motions
        • Responsive Design
        • Step-by-step workflow
        • Featured UI Components
        • Quiz
      • App Data Fundamentals
        • Data Source Filtering
        • App Variables and Runtime Properties
        • URL Parameters
        • Quiz
      • Actions & Logic Fundamentals
        • Event Handlers
        • Featured Action Nodes
        • Context Parameters
        • Quiz
      • Services Fundamentals
        • Introduction to Services
        • Setting up a Service
        • Scheduling a Service
      • Integration Fundamentals
        • The web request action node
        • Fetch data from an endpoint
        • Map data to a data source
        • Modify the response
        • Nested data mapping
        • Path parameters
        • Authentication
        • Send data to an endpoint
        • Quiz
      • User handling and permissions
        • Users and roles
        • Permissions
        • Creating users
        • Extending the User object class
        • Updating and deleting users
        • Unauthenticated access
        • Quiz
    • Appfarm Professional
      • User Interfaces
        • Featured UI Components
        • Concepts and Use Cases
      • Data Structures & Data Handling
        • Data Features
        • Search & Filters
        • Featured Action Nodes
        • GraphQL
      • Logic & Flow
        • Logical Concepts
        • Date and Time Handling
        • Featured Action Nodes
        • Exception Handling
      • Login & Configuration
        • Login and Authentication
        • Settings, Configuration and Languages
      • Security & Operations
        • Security and Permissions
        • Deployment
        • Schedules and Logs
        • Debugging and App Health
      • Performance & Optimization
        • Optimizing Performance
        • Enhancing Functionality
    • Appfarm Sales Representative
    • Appfarm Developer Forum
      • Session 1: Data Modeling in Appfarm Create
      • Session 2: App Data in Appfarm Create
      • Session 3: Services in Appfarm Create
      • Session 4: Optimizing Performance
    • Background
      • Databases
        • Data modeling 101
        • Database normalization
  • Library
    • UI components
      • Advanced bar chart
      • Advanced bubble chart
      • Advanced combined chart
      • Advanced gantt chart
      • Advanced heatmap chart
      • Advanced line/area chart
      • Advanced pie chart
      • Advanced scatter plot chart
      • Advanced solid gauge chart
      • Animated component
      • Avatar
      • Avatar group
      • Basic bar chart
      • Basic gauge chart
      • Basic line chart
      • Basic pie chart
      • Bottom navigation
      • Button
      • Checkbox
      • Chip group
      • Circular progress
      • Coded component
      • Container
      • Date & time picker
      • Drawable canvas
      • Floating action button
      • Icon
      • Icon button
      • Iframe
      • Image
      • Linear progress
      • List
      • Map
      • Menu list
      • Multi select
      • PDF reader
      • Popover
      • Radio buttons
      • Rich text editor
      • Rich text
      • Select
      • Slider
      • Speed dial
      • Switch
      • Table
      • Tabs
      • Text
      • Text edit
      • View container
      • Visibility group
    • Action nodes
      • Aggregate data
      • Advanced search
      • Auth operations
      • Block
      • Catch exception
      • Copy to clipboard
      • Create file archive
      • Create file object
      • Create object
      • Create user account
      • Delete objects
      • Delete user account
      • Duplicate objects
      • End execution
      • Exit block
      • Exit loop
      • Export data
      • Foreach
      • Generate document
      • If
      • Import data
      • Invalidate cache
      • Log in
      • Log to console
      • Log out
      • Next iteration
      • Navigate
      • Open/close popover
      • Open confirm dialog
      • Open print dialog
      • Open snackbar
      • Open Unsplash dialog
      • Open URL
      • Persist objects
      • Push notifications
      • Read objects
      • Request permissions
      • Run code
      • Run other action
      • Run service
      • Scan barcode/QR code
      • Send email
      • Send SMS
      • Set client language
      • Set data source attributes
      • Set selection
      • Set theme
      • Set user account image
      • Show install app prompt
      • Sleep
      • Sort objects
      • Throw exception
      • Toggle drawer
      • Update object
      • Update secret
      • Update user account
      • Web request
      • While
  • Reference
    • Appfarm Create
      • Appfarm Commander
      • Blue dots
      • Copy & Paste
      • Farmer's Market
      • Find references
      • Find usage
      • Keyboard shortcuts
      • Undo/Redo
      • User preferences
    • Platform concepts
      • Conditions
      • Data bindings
      • Date and time
      • Event handlers
      • Filters
      • Functions
      • Markdown
      • Objects
      • Operators
      • Value processor
    • Dashboard
    • Apps
      • UI
        • Views
          • Dialog
          • Drawer
        • Layout designer
        • Component properties
        • Shareable UI components
      • Data
        • App variables
        • Data sources
        • Calendar data sources
      • Actions
      • App settings
      • App size
      • App health
    • Services
      • Service Endpoints
      • Service settings
      • Service health
      • API explorer
    • Data model
      • Object classes
      • Object class properties
      • Enumerated types
      • GraphQL
        • Queries
        • Mutations
      • Data Extract API
      • Time series data
    • Operations
      • Deploy
      • Schedules
      • Logs
    • Resources
      • Themes
      • Files
      • Fonts
      • Internationalization
    • Configuration
      • Environments
      • Login
        • Custom auth providers
    • Security
      • Users
      • Service accounts
      • Roles
      • Secrets
      • Permissions
        • Conditional Permissions
    • Appfarm Client
      • Developer tools for Apps
      • Developer tools for Services
      • Warnings and errors
  • How to
    • Data modeling
      • Many-to-many relationships
      • Use naming conventions
      • Offline data handling
      • Data silos and White labelling
    • User interface
      • Manage a many-to-many relationship with a Chip group
      • Configure drag and drop
      • Build a drag-and-drop calendar
      • Design a responsive layout
      • Work with flexbox
      • Use Mapbox as a map layer
      • Understand charts
    • Logic and flow
      • Event Log Design
      • Configure advanced search
    • Themes and styling
      • Change the active theme
      • Add custom email templates
    • Enhance your app
      • Add deep links
      • Add keyboard shortcuts
      • Add link previews for social media
      • Apply SEO best practices
      • Change the active language
      • Generate a PDF from a Container
    • Integrations
      • Integrate with external systems
      • Integrate with OpenAI
      • Integrate with Google Analytics (GA4)
      • Configure a custom email account
      • Integrate with a payment provider
      • Integrate with Signicat
      • Integrate directly with an external database
      • Retrieve a Bearer token from Google Cloud
      • Fetch data from BigQuery
      • Retrieve access token from Microsoft Entra ID
    • Workflow automation
      • Update an OAuth 2.0 access token from a service
    • Authentication and access control
      • Add users and assign roles
      • Configure unauthenticated access
      • Implement third-party authentication
    • Security, testing and deployment
      • Add a custom domain
      • Install an app on a device
      • Get ready for Production
      • Optimize performance
      • Security checklist
      • Test and debug
    • Example apps
      • Create an Instagram clone
        • The end result
        • Designing the feed
        • Create new post
        • Add a like-button
        • Add comment-functionality
  • Solution administration
    • Subscription and billing
    • Dedicated tier benefits
    • Guide to GDPR
      • Key principles
      • How Appfarm protects personal data
      • How you can protect your clients’ data
      • Glossary
    • Appfarm and the EU AI Act
  • Policies
    • Appfarm Policies
    • Data Processors
    • Privacy Policy
Powered by GitBook
On this page
  • Changing colors
  • Light theme or dark theme
  • Color palette
  • Contrast text
  • Custom colors
  • Text colors
  • Primary
  • Secondary
  • Disabled Text
  • Backgrounds
  • Default
  • Paper
  • Action
  • Active
  • Hover
  • Selected
  • Disabled
  • Disabled Background
  • States
  • Info
  • Success
  • Warning
  • Error
  • Other
  • Divider
  • Link
  • Settings
  • Theme Border Radius
  • Button
  • Input
  • Popover
  • Tooltip
  • Font families
  • Typography variants

Was this helpful?

Export as PDF
  1. Reference
  2. Resources

Themes

PreviousResourcesNextFiles

Last updated 1 year ago

Was this helpful?

With themes, you can define a custom color palette, default border radius, button and input variants, tooltip size and color, and typography settings to be applied across an app. A default theme is applied to new apps, but you can change the theme in or on app creation if you already have the theme defined.

As you edit a theme, example components will be rendered on the right-hand side of theme editor. Individual components can be customized within the , but some general settings such as available colors and font families must be declared within a theme.

Changing colors

To change a color, click the existing color in the theme editor and either:

  • Select an option from the Material Palette

  • Use the Color Picker to define a custom color.

With the color picker, you can also enter hex, RGB, and opacity values directly. Click the hex or rgb label to switch between the two.

With the exception of Primary and Secondary colors, you can also enter hex and opacity values directly into the input field.

Light theme or dark theme

By default, a theme is set to be a Light Theme. This means your app will have white or light-colored backgrounds and dark text. Alternatively, you can set a theme to be a Dark Theme, often known as dark mode. With a dark theme, your app will have black or dark-colored backgrounds and white or light-colored text.

Set the palette with your audience and primary use cases in mind. Dark palettes are more popular for mobile apps and night-time use, while they are rarely used for corporate solutions. When in doubt, choose a light theme.

Good to know

If you want to offer your users the choice of a light or dark theme, these must created as two separate themes.

Color palette

Under Color palette, you can define the primary and secondary colors for your theme. These are the colors that you want to feature most prominently in your app and are available everywhere you can adjust the color in your UI. In a typical app, the primary color will be used for the main user interface elements and the secondary color as an accent color where required. For both of these colors, a lighter and darker version is automatically generated.

Contrast text

You can choose to override the contrast text color for the primary and secondary colors. Contrast colors are used when the the main colors are used as solid backgrounds, for example in the App Bar or as buttons. The theme will apply sensible defaults, and ensure that dark text is used on light backgrounds and vice versa.

Custom colors

If you need additional colors available throughout your UI, you can add those under Custom colors. When you add a custom color, you should set a sensible key (name).

Important

If a color key is changed, any reference to that color from an app will be lost.

Text colors

Text colors are automatically assigned based on the context in the UI, and can also be assigned directly to some components.

Primary

The primary color for body text.

Secondary

A secondary color for body text and also used to style to input fields.

Disabled Text

Used to style input field labels and values when the component is disabled.

Backgrounds

Default

Paper

Action

Action colors are applied to UI components either manually or automatically depending on their state.

Active

This color can can be manually applied to Icon buttons (Button Color: Default) and Icons (Icon Color: Action).

Hover

Selected

Disabled

Disabled Background

Applied to Buttons when disabled.

States

State colors are used to consistently represent messages of various severity within your app. These colors are available within the color picker when styling UI components.

Info

Typically used to provide general information in the context of a user action.

Success

Typically used to indicate a user or automated action was successfully completed.

Warning

Typically used to indicate that there are consequences to be aware of before performing an action or that non-critical functionality has failed.

Error

Typically used to indicate invalid data or that critical functionality has failed.

This color is used to highlight an input field and for any helper text if the Error property for that component equates to true.

Other

Divider

Link

Override the default link text color.

Settings

Theme Border Radius

This Theme Border Radius sets the border radius in pixels for relevant UI components, such as Text Inputs and Buttons.

Button

Border Radius Override

By default, buttons will inherit the border radius from the Theme Border Radius. You may override this border radius by ticking Override Border Radius.

Default variant

Select the default variant (Text, Outlined, Contained) for Buttons added to your UI.

Border Radius

Visible when Override Border Radius is selected. Select the number of pixels to be applied as border radius for all buttons.

Disable elevation

Remove elevation from buttons with variant Contained.

Input

Default variant

Select the default variant (Text, Outlined, Contained) for Inputs (Text Input, Date and Time Picker, Select etc) added to your UI.

Popover

Border Radius Override

By default, Popovers will inherit the border radius from the Theme Border Radius. You may override this border radius by ticking Border Radius Override.

Tooltip

Arrow

Select whether arrows should be visible on tooltips.

Border Radius Override

By default, Tooltips will inherit the border radius from the Theme Border Radius. You may override this border radius by ticking Border Radius Override.

Font Size

Change the default font size for all tooltips. The default font size is 11px.

Background Color

Change the background color for tooltips.

Color

Change the text color for tooltips.

Font families

To add a new font family to your Theme:

  • Click the + icon to open the Add Theme Font dialog.

  • Select a font family from either the Featured, Google Fonts, or Custom Fonts tabs. A sample will be displayed along with a list of the styles available.

  • Select the styles required for your app(s). These can be adjusted later.

  • Click Add Font.

Each theme has a default font family that is applied to UI components. This font family is marked with a star icon. To select a new default font family:

  • Click the font family in the list of font families added to the theme.

  • Click the star icon in the top-right of the popover.

Good to know

If you have modified the typography variants, changing the default font family will not change the font family in any variant.

To replace one font family with another:

  • Click the font family in the list of font families added to the theme.

  • Click the left/right arrows icon in the top-right of the popover.

  • Select a font family and the styles required.

  • Click Replace Font.

Typography variants

  • H1–H6

  • Subtitle1

  • Subtitle2

  • Body2 (Container loader messages)

  • Button (Button components)

  • Caption (Input helper text)

  • Overline

Each variant has the following properties which can all be customized.

Property
Description

Font Family

Font Color

The color and opacity of the font.

Font Size

The size of the font, in pixels. This value is converted to rem in the Appfarm Client.

Font Weight

The weight (boldness) of the font. The options are restricted to the styles added for the selected font family.

Line Height

The distance between lines of text. This value is unitless and the line height is calculated by multiplying this number by the element's font size.

Letter Spacing

The horizontal spacing between text characters, in pixels.

Uppercase

Convert all characters to uppercase.

Note that when applying a color to a UI component using the , an additional set of nine shades of grey is available. These are not customizable.

The background color applied to new .

An alternative background color often used for to provide contrast to the default background.

Automatically applied as the background color of a row in a or an item in a on hover. Note that hover must be enabled on the component.

Automatically applied as the background color of an item in a when selected. Note that selection must be enabled on the component.

Automatically applied to Buttons, Icon buttons, and checkboxes when disabled.

The divider color is applied to dividers enabled within UI components such as . You can also use it as a border color when setting up custom borders.

For some UI Components, such as the Container, this value serves as a default that can be applied to the UI Components by selecting the Use Border Radius from Theme checkbox in .

Add and manage fonts from Google Fonts or your own custom fonts. Custom fonts must first be .

There is a pre-defined array of typography variants configured. These variants are applied automatically to some UI components while you can also apply a variant manually, such as on the . The variants, with some of their default applications in parentheses, are:

Body1 ( components)

The .

App Settings
UI designer
style properties
views
containers
Table
List
List
Radio buttons
Lists
uploaded under Fonts
Text component
Text
font family
Style properties