Themes

Theming allows you to adjust styling, coloring and look and feel to suit your application styling.

Two themes are bundled with this library:

Layer Basic Blue

This is a chat style that is optimized for one-on-one conversations, though works well for small groups as well.

  • shows chat messages in bubbles
  • Right aligns messages you send, left aligns messages you receive
  • shows expanded conversation lists with avatars and last messages

This theme can be imported using:

<link rel='stylesheet' href='//cdn.layer.com/xdk/4.0/themes/layer-basic-blue.css' />

Or

import '@layerhq/web-xdk/themes/layer-basic-blue.css';

Layer Groups

This is a chat style that is optimized for larger group conversations.

  • shows chat messages without bubbles and in a denser format
  • All messages are left aligned (except status messages which remain centered)
  • A compact conversation list is used that does not show each conversation’s last message

This theme requires npm to use:

import '@layerhq/web-xdk/themes/layer-groups.css';
import '@layerhq/web-xdk/themes/layer-groups-customizations.js';

var client = Layer.init({
    appId: "layer:///apps/staging/YOUR-APP-ID"
});

Custom Themes

Before building a custom theme, its worth reviewing how themes are put together.

Background

There are three types of styling associated with a UI component:

  1. Built-in styles: each UI component comes with a template that determines the DOM structure of the component, and any CSS needed to layout those dom nodes. Typically, the CSS built into the UI Component is setting display and Flex Box settings, and is not setting Colors, border, margin, padding or other thematic styles. In other words: The CSS that is built in handles very basic layouts.
  2. Themed styles: Layer comes with a set of theme files that can be customized to reflect the colors/styles of your application. These themes focus primarily on the coloring and styling within each component. Themes should not size or position Layer Widgets within your application, but may size XDK Components that go inside of other XDK Componponents.
  3. App styles: Your application styles control the positioning and sizing of any XDK Component used within your web application. These should be kept separate from the Themed Styles. Do you want a border between a Conversation List and a Conversation View? You want the Conversation List and Conversation View to have the same height, and want the List to only be 300px wide? That is all styling within your Application Styleseheets.

Creating a Theme

Layer provides themes using Less. To adapt and adjust a theme from this repository, follow these steps.

  1. first install and setup less
> npm install less --save-dev
  1. Copy in the theme files:
> cp -r node_modules/@layerhq/web-xdk/themes/src/layer-basic-blue src/mytheme
  1. Put the following into your package.json file, adjusting argument 2 (input theme.less) and argument 3 (output theme.css) as needed:
{
    "scripts": {
        "build-css": "./node_modules/less/bin/lessc --include-path=./node_modules/@layerhq/web-xdk/themes/src/layer-basic-blue src/mytheme/theme.less src/css/theme.css",
    }
}
  1. Update the colors and sizes in variables.less
  2. For any UI Component that needs styling, find the appropriate variables file in the component-variables folder and adjust the variables as needed. You may also add style rules to this file for styles that aren’t covered. Note that these variables are applied to .less files in ./node_modules/@layerhq/web-xdk/themes/src/common/.
  3. For any Message Types that need styling, find the appropriate variables file in the message-type-variables folder and adjust the variables as needed. You may also add style rules to this file for styles that aren’t covered. Note that these variables are applied to .less files in ./node_modules/@layerhq/web-xdk/themes/src/common/.
  4. Run npm run build-css

You can if needed, copy ./node_modules/@layerhq/web-xdk/themes/src/common/ into your project, and update your build-css --include-path to insure its found; and then directly edit the .less that applies styles instead of just editing variables.

Hiding Avatars in the Message List

There are many applications that prefer not to show Avatars next to messages within a Message List. While the default is to show Avatars, find @message-item-text-indent and @mesage-item-show-avatars in the Theme Files and follow the instructions within the file to hide/show the avatars.

Templates Lifecycle