AgileApps Support Wiki Pre Release

Theme Templates

From AgileApps Support Wiki

Introduction

Theming the AgileApps Custom Element Components

What is an 'ace-lib-theme'?

An 'ace-lib-theme' is the set of colors and typography definitions that are applied on the AgileApps Custom Elements (ACE) library components. Using the ace-lib-theme package, you can customize the color and typography of the ace-lib components.
An ace-lib-theme package contains the core `scss` files that are used to create a theme. Compile these `scss` files as `css`.

Creating a Custom Theme

You can create a theme file as follows:
1. Install the ace-lib-theme package. You can install the 'ace-lib-theme' from the npm package manager using the following command:
npm i ace-lib-theme
2. Create a new file named `my-theme.scss` file inside the assets' directory in my template package. For example, `~/mytemplate/assets/theme/scss/my-theme.scss`
3. Open `my-theme.scss` file and assign values to the [theme-variables](./../variables/) (Optional step).
4. At the end of the file, import the core theme scss definitions using the following syntax: @import "node_modules/ace-lib-theme/assets/scss/theme.scss";
5. Compile the scss files into css using the `node-sass` npm utility. Execute the `node-sass` command to compile the scss files into the theme css file as shown here:
node-sass -c ~path\to\mytemplate\assets\theme\scss\ -o ~path\to\mytemplate\assets\theme\css\
Tip:

  • If you have not installed the `node-sass` package globally, install it before you use the command listed earlier. Use `npm i node-sass -g` to install it.
  • If you get any compilation error, review the path reference for the @import statement in step 4. It should be relative to the directory from which you execute the compile command.

6. Import the generated `css` file into the `index.html` file of the template using the following HTML code:
<link href="assets/theme/css/my-theme.css" rel="stylesheet">

Theme Variables

  • accordion
  • autocomplete
  • buttons
  • checkbox
  • chip
  • colors
  • date_picker
  • dialog
  • divider
  • global
  • input
  • menu
  • paginator
  • progressbar
  • radio_button
  • tables
  • tabs
  • tooltip
  • typography

Theme Components

  • activity-history
  • app-tabs-list
  • bookmark
  • object-views-list
  • record-actions
  • record-attachment
  • record-process
  • record-table-view
  • record-task-view
  • related-info
  • role-switcher
  • user-profile
  • view-config