WaveMaker Docs

WaveMaker Docs

  • Get started
  • Widgets
  • Mobile
  • How-to
  • Enterprise
  • Releases
  • Blog
  • Sign-in

›Custom Development

Getting started

  • Introduction
  • Walkthrough

Pages

  • Pages Overview
  • Creating a Page
  • Layout and Styles

    • Page Layout
    • Templates
    • Themes
    • Accessibility

    Page Configure

    • Page Artefacts
    • Page Cache
    • Partial Page
    • Page Parameters
    • Examples

    Page Actions

    • Navigation
    • Events

    Custom Development

    • Theme Editor
    • Manual Theme
    • Create Template

SSPA

  • Micro Frontend App

Databases

  • Database Services Overview
  • Database Tools
  • Database Designing

    • Working with Databases
    • Data Modelling
    • DataBase Schema Modes
    • Working with DB Schema
    • Database Views
    • Temporal Support

    Accessing Database

    • Accessing Database

    Queries and Procedures

    • Working with Queries
    • Working with Stored Procedures
    • Version Queries & Procedures
    • Blob Queries and Procedures
    • Queries & Procedures - Java Services

    Database Variables & API

    • Database CRUD
    • CRUD Event Listeners
    • Database APIs
    • Database Service APIs

REST & SOAP

  • Web Services Overview
  • Restful

    • REST Services
    • Secure Server-side Properties
    • REST Request Timeouts
    • REST Services using OAuth 2.0

    SOAP

    • Working with SOAP Services
    • Imported SOAP APIs

    Websocket

    • Working with WebSockets

    APIs

    • API Designer
    • Mocking APIs
    • Mocking REST API
    • Swagger Import

    Variables

    • CRUD Variable
    • Service Variable
    • WebSocket Variable

Java Services

  • Java Service
  • Java Services

    • Java Integration Services
    • DB Service Integration
    • API Composition
    • Variables for Invocation
    • Generated REST APIs (API Designer)

    Java Services Variables & API

    • Variable for Java Service
    • Java Service APIs

    Source Files

    • Resources and Third-party Libraries
    • Using 3rd party JavaScript files
    • Using 3rd party jar files

Variables & Actions

    Variables

    • Variables Overview
    • Model Variable
    • Device Variables

    Binding

    • Variable Binding
    • Custom Formatter

    Actions

    • Actions
    • Navigation Action
    • Login Action
    • Logout Action
    • Timer Action
    • Notification Action

    Events

    • Events
    • JavaScript Access

Security

    App Security

    • Overview
    • Authentication
    • Authorization
    • Access Levels & Permissions
    • Login Configuration
    • Session Persistence
    • SSL Encryption
    • XSS antisamy policy configuration
    • OWASP
    • XSS Prevention
    • Central Authentication System
    • Token Based Authentication
    • SAML Integration
    • Secure Connection for Deployed Apps
    • Concurrent Sessions
    • HostHeader Injection

    Security Variable and API

    • Security Variables
    • Remember Me
    • Variable for Security Service
    • Security Service APIs

Developer options

  • Test and Run (Preview) Apps
  • Chrome Extension: Devtool
  • Debugging
  • Inspection Framework
  • Build Options
  • WaveMaker Mobile Apps Automation
  • Developer Integration

    • Project User Management
    • Developer Collaboration
    • Extending the Application using IDEs
    • Import, Export & Update Apps
    • Project Shells

    Add-ons

    • Localization
    • Artifacts Repository

Deployment

  • Overview
  • Deployment Profile
  • One-click Deployment
  • WaveMaker CI/CD Pipeline

    • Overview
    • Configuration Profiles
    • Configuration Management
    • Pipelines and Phases

    Pipeline Configuration

    • Default Pipelines in WMO
    • Configure Pipeline in WME

    Deploy to Cloud Providers

    • AWS
    • Azure
    • Google Cloud
    • DigitalOcean

    Pipeline Configuration cont.

    • Phase configurations
    • Webhooks Integration
    • Tests Integration

    Manage Deployed Apps

    • Manage Deployed Apps

    Integrate with your CI/CD Providers

    • Push Code to External repo
    • Custom VCS Integration
    • Export WaveMaker Application
    • Building Project with Maven
    • Build with Docker
    • Jenkins Integration
    • Deploy using Docker Compose
    • Deployment to Heroku

    WaveMaker apps Interation with CDN

    • App Integration with AWS CDN
    • App Integration with Azure CDN

    Deployment to external web servers

    • Application Server Overview
    • Deploy to Tomcat
    • WebSphere
    • JBoss - WildFly
    • WebLogic Server

Connectors

  • Introduction
  • Architecture
  • Import Connectors
  • List of Connectors
  • Build a New Connector

Teams

  • Overview
  • Team Setup
  • Dashboard
  • Manage Users
  • Manage Projects
  • Manage Prefabs
  • Project Branches
  • Manage Roles
  • Code Repository
  • Import VCS Project
  • Team Profile
  • Manage Subscription
  • FAQs
Edit

Creating Themes using the Editor Tool


Themes are used to apply a style to the entire application. Develop themes for web apps instantly without needing to code; you can do this by using WaveMaker theme builder.

note

Theme Builder is supported for web responsive themes only.

tip

You can also develop more advanced themes by installing the setup which requires you to know HTML, CSS, LESS, and Grunt. For more information on manual setup, see Creating Themes using the Manual Setup.

Theme Builder

Theme Builder is a WaveMaker application that allows you to build a theme by changing colors, typography, and styles of the components and elements without needing to edit the code.

Follow the steps below to build a theme.

  • Go to the WaveMaker Theme Builder app.

  • Click the Explore/Create themes option.

    theme options

  • On the Editor page, you can customize the existing #HEX values with custom hex, rgba, rgb colors, choose font-family and sizes, and select styles for the component and elements in a few simple steps.

Step 1: Choose Colors

Change the existing #HEX values by choosing colors from the color picker for primary, secondary, and additional colors that you want to modify for the pages.

  1. Colors: Set global colors for components and elements
  2. LeftNav: Set colors for the left navigation
  3. Header: Set colors to change the header styles
  4. More options: Set the colors for the disabling, links, and alerting properties

apply colors

Step 2: Apply Font Styles

Customize the typography for the header, body, and caption styles. You can choose the font-family from the options available in the dropdown.

  1. Heading font: Select the font-family for headers, which apply to H1, H2, H3, H4, H5, and H6
  2. Body font: Select the font-family for body and captions
  3. More options: Set font-weight, font-size and case sensitive preferences

apply font

Step 3: Select Theme Variation Style

Change the variation of theme style as per the aesthetics. Switching between themes will allow you to preview the relative changes instantly. You can select from the following options.

  • Flat: The flat-theme includes a solid background to the elements with active states. It also adds an outlined border for user inputs.

  • Material: The material-theme has a sleek finish with elevated shadows to understand each element's relative importance and focus their attention.

  • Gradient: The gradient theme fills the content blocks with a linear gradient shade starting from top to bottom.

apply theme style

Next Steps

note

Step 4: Changing the behavior of icons (coming soon).

When you have made all the changes, you can proceed to save the theme.

  • Click Done, and your changes are ready to download.
  • Provide a Name for your theme, and click Download Theme.

download theme

important

The theme will be downloaded as a .zip file.

  • Import and apply the downloaded theme into any of your WaveMaker applications.

For more information on how to import a theme, see Importing Theme.

Last updated on 6/9/2020 by Swetha Kundaram
← EventsManual Theme →
  • Theme Builder
    • Step 1: Choose Colors
    • Step 2: Apply Font Styles
    • Step 3: Select Theme Variation Style
  • Next Steps
WaveMaker
  • PRICING
  • PARTNERS
  • CUSTOMERS
  • ABOUT US
  • CONTACT US
Terms of Use | Copyright © 2013-2023 WaveMaker, Inc. All rights reserved.