LogoLogo
v4.2
  • Docs
  • Connector Configuration
  • Knowledge Base
  • Changelog
v4.2
  • Introduction
  • Migration from 4.1
  • Overview
    • Introduction
    • Component
    • Flow
    • End User Guide
  • Component Definition
    • Basic Structure
    • Manifest
      • name
      • label
      • icon
      • marker
      • author
      • description
      • auth
      • authConfig
      • quota
      • properties
      • inPorts
      • outPorts
      • firePatterns
      • tick
      • private
      • webhook
      • state
      • localization
    • Behaviour
    • Dependencies
    • Authentication
    • Quotas & Limits
    • Configuration
    • Example Component
  • Customizing UI
    • Custom Inspector Fields
    • Custom Theme
    • Custom Strings
    • Custom API
    • Custom Component Strings
    • Custom Component Shapes
  • Appmixer Self-Managed
    • Installation
    • Getting Started
    • Custom Component: HelloAppmixer
    • Using Appmixer SDK
    • Using Appmixer API
    • Using OAuth applications
    • Installation GCP
    • System Webhooks
    • Appmixer Architecture
  • API
    • ACL
    • Accounts
    • Apps
    • Authentication
    • Charts
    • Data Stores
    • Files
    • Flows
    • Insights
    • Modifiers
    • People Task
    • Service Configuration
    • Unprocessed Messages
  • Appmixer SDK
    • Getting Started
    • API Reference
      • Constructor
      • API
      • FlowManager
      • Designer
      • InsightsLogs
      • InsightsDashboard
      • InsightsChartEditor
      • Accounts
      • Storage
      • PeopleTasks
      • Components
      • Wizard
      • Integrations
    • Developer mode
  • Appmixer Backoffice
    • Getting Started
    • Services
  • Tutorials
    • Managing Authentication
    • Sharing Flows
    • Flows Metadata & Filtering
    • People Tasks
    • Customizing modifiers
    • Setting ACL
  • Appmixer CLI
    • Appmixer CLI
  • App Registration
    • Google
    • DeepAI
    • Highrise
    • Screenshot API
    • Slack
    • Trello
    • Typeform
    • Utilities
      • Email
      • Language
      • Tasks
      • Weather
Powered by GitBook
On this page
  • Setting a Custom Theme
  • Structure of the Theme Object
  • Complete Theme Object

Was this helpful?

Export as PDF
  1. Customizing UI

Custom Theme

Appmixer SDK allows you to completely change the look&feel of all the UI widgets it provides (Designer, FlowManager, Insights, ...).

Setting a Custom Theme

A theme is represented as a JSON object that you set on your Appmixer SDK instance using the set('theme', myTheme)method:

var appmixer = new Appmixer({ baseUrl: BASE_URL });
appmixer.set('theme', THEME);

You can set the theme anywhere in your application but usually you'll do that right after initializing your appmixer instance. Note that you can even set the theme multiple times with different configuration in which case the Appmixer SDK will automatically re-render all the UI widgets using the new theme configuration.

If you don't set a theme, the default theme will be applied.

Structure of the Theme Object

The theme object is a JSON object that contains references to various UI elements and their CSS-like properties. Each UI element is named and prefixed with the $ character. UI elements can have different states each having a different styling (e.g. disabled, hovered, ...). States are prefixed with the @ character. All other keys in the theme object are CSS-like properties that you can assign CSS values. Properties are inherited in the hierarchical structure of the UI elements. For example, setting a blue text color on the entire FlowManager ($flowManager) will make all the text within the nested UI elements of FlowManager (e.g. pagination) blue as well unless the text color is overwritten in that nested UI element.

Example of a theme object:

appmixer.set('theme', {
    $flowManager: {
        backgroundColor: 'lightgray',
        color: 'blue',
        $header: {
            $btnCreateFlow: {
                '@hover': {
                    backgroundColor: 'black',
                    color: 'white'
                }
            }
        },
        $thumbnails: {
            spacing: '15px',
            $flow: {
                color: 'white'
            }
        }
    }
});

The theme object above produces the following result in the FlowManager widget:

And here's how the default styling looked like before we applied our custom theme:

Complete Theme Object

For reference, we prepared a dark theme for all the Appmixer UI widgets that you can use as a quick overview of all the UI elements that you can set your custom theme for:

Screenshots of the dark theme for some of the UI widgets:

PreviousCustom Inspector FieldsNextCustom Strings

Last updated 4 years ago

Was this helpful?

554KB
theme-dark.json
Appmixer Dark Theme
FlowManager Dark Theme
Designer Dark Theme
Insights Logs Dark Theme
Insights Chart Editor