WaveMaker Docs

WaveMaker Docs

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

›All Blog Posts

All Blog Posts

  • Mutual TLS Support in REST APIs
  • Monitoring performance and health of deployed WaveMaker app
  • Mitigating Spring Zero-day Vulnerability CVE-2022-22965
  • WaveMaker application pom.xml
  • Upgrading saml to saml2-service-provider
  • Archiving WaveMaker 9 Projects
  • URL Change in WaveMaker Android WebView
  • Announcement about Angular 11 Update
  • Mitigating Log4J 2 Vulnerability CVE 2021 44228
  • Ending Support of WaveMaker 9 Projects
  • Git Branching Strategy
  • Important Announcement about Angular 10 Update
  • Accessibility Support in WaveMaker
  • Generating .aab files using wm-cordova-cli or AppChef
  • WaveMaker Studio enables faster database imports
  • Integrate SAP HANA Database with WaveMaker
  • Redshift Database Integration
  • Important Announcement about Changes to Documentation Domain
  • WaveMaker Releases 10.7 Version
  • Theme Builder with some coding (Build + Edit)
  • Understanding Scaling of WaveMaker Applications
  • Automatically Import your Website Branding Styles into a Theme
  • Certificate Pinning Case Study
  • Cordova 10.0.0 Upgrade
  • WaveMaker Releases 10.6 Version
  • Retain UI State in WaveMaker Apps
  • Theme builder is ready with a new update
  • PostgREST OpenAPI support in WaveMaker
  • Fully automated and scalable test execution using k8s
  • New file picker for mobile apps - Improvements in UI to select files in mobile
  • WaveMaker releases 10.5 version
  • Deliver faster applications with WaveMaker!
  • GraphQL in a Micro Services Architecture
  • Build Themes for WaveMaker Apps Without Any Coding
  • COVID-19 Visualization using WaveMaker - Part 2
  • COVID-19 Visualization using WaveMaker - Part 1
  • WaveMaker Integrates with DigitalOcean Kubernetes for App Deployments
  • Deployment Experience made better!
  • OpenAPI support in WaveMaker
  • WaveMaker platform is updated to use WKWebView.
  • Deliver WaveMaker Apps as Micro Frontend Modules
  • All-new WaveMaker docs with a powerful Search
  • Welcome to the WaveMaker Developers Blog

Build Themes for WaveMaker Apps Without Any Coding

June 1, 2020

Lovin Ahmed

Creating and customizing the look and feel of WaveMaker applications is just a few clicks away now. We have introduced a theme building tool for changing color schemes and creating branding specs. Theme-builder brings the benefit of codeless theme creation in a few simple steps. With a built-in code editor, one can make changes and see custom styles instantly applied to the web components.

A theme is a preset package containing graphical appearance details. It is often used to change the look and feel of multiple things at once, which makes the elements less granular than allowing the user to set each option individually. For example, you can specify your company's branding colors for your project.

Link to the app: http://apps.wavemakeronline.com/Theme_Builder/#/Dashboard

theme builder

Customize color, typography, and style

To begin customizing a theme, one can modify values for color, typography, and style. By default, the preview application starts with the material theme applied. We can switch between different theme styles and instantly preview the changes.

theme preview

Color

To change your theme colors, replace the predefined #HEX color code with a custom color.

Primary color maps to all active components and elements like(primary buttons, selected tabs, nav items, etc), while secondary color accents the icon colors for date and time selection. Background color applies to the scrollable content, while the text color maps to the body text and captions used in the application.

Header and Left nav colors define the coloring scheme for background, text, and active links. We also have More options to handle the notification and disable state colors.

apply colors

Typography

To change your theme's typography, choose the options from the dropdown, be it font-family, or the size of headings and body text.

apply font

Style

Applying different styles like Flat, Material, and Gradient. This will help you understand how the components change. Each selection will override the existing behaviour of the elements displayed in the preview section.

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 style

How to build a theme

  1. Go to https://apps.wavemakeronline.com/Theme_Builder/#/Dashboard
  2. Click on the Explore/Create themes
  3. On the Editor page, customize the #HEX values with your brand colors.
  4. Select applicable font-family and sizes for your content and heading texts.
  5. Switch between styles types to suit your requirement accordingly.
  6. Icons changes are in progress (coming soon)
  7. Click done, and give a name to your newly created theme from the dialog.
  8. Import and apply the downloaded theme into any of your WaveMaker applications.

Modifying all the variables in your editor will create your new theme ready to download. Once provided a name, the theme will be downloaded as a .zip file. Import and apply to the WaveMaker built applications.

Bingo! We are ready with the theme.

What's next

In the next release version, we will feature the icons and more styling options.

Update: Check out additions we made in the second release since this announcement.

See Also

For more information on developing themes, see Creating themes.

Tweet
Recent Posts
  • Customize color, typography, and style
    • Color
    • Typography
    • Style
    • How to build a theme
  • What's next
  • See Also
WaveMaker
  • PRICING
  • PARTNERS
  • CUSTOMERS
  • ABOUT US
  • CONTACT US
Terms of Use | Copyright © 2013-2023 WaveMaker, Inc. All rights reserved.