Themes

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

Two themes are bundled with this library:

  • bubbles-basic.css: A chat style that shows chat messages in bubbles, and shows expanded conversation lists with avatars and last messages, and a tall Composer
  • bubbles-compact.css: A chat style that shows chat messages in bubbles, and shows expanded conversation lists with avatars and last messages, and a shorter Composer
  • groups-basic.css: A chat style that is more compact, doesn’t use bubbles, and compresses the conversation list items into a single line

Using the groups-basic.css theme you should also import a custom template:

<link rel='stylesheet' href='https://cdn.layer.com/ui/1.0/themes/groups-basic.css' />
<link rel='import' href="node_modules/layer-ui-web/themes/build/groups-basic-group-templates.html">

Warning

It will cause a CORS error to load a template file from a remote server such as a cdn The example above loads it out of node_modules, but you can fetch it and write it anywhere to your file system.

Understanding the Themes

There are three types of styling associated with a widget:

  1. Built-in styles: each widget comes with a template that determines the dom structure of the widget, and any CSS needed to layout those dom nodes within the widget. If the layout is not suited to an application’s needs, these built-in styles can be overridden. However, typically one would provide a new template that provided the desired layout. Some themes may include custom templates as a way to customize the structure and layout of the widget.
  2. Themed styles: Layer comes with a set of base themes that can be customized to reflect the colors/styles of your application. These themes focus primarily on the coloring and styling within each widget. Themes may influence your app’s layout, but typically only by adjusting margin, padding and border.
  3. App styles: Your application may want to size and position a widget within your app; CSS for doing this is typically kept separate from the widget theme itself.

Layer provides themes using Less. If you want to adapt and adjust a theme from this repository, it should be easy to copy a theme, and then use Less to build a css file. You may also generate a css file any way that works for your environment.

Within this repo, the themes folder contains a src folder with one folder per theme, and a build folder that contains the CSS and Custom Templates for each theme.

Each theme folder in src consists of:

  • A variables.less file defining colors used in multiple files
  • One widget-name.less file for each widget
  • A theme.less file to stitch them all together
  • Optional Custom Templates

To learn how to theme a component, such as <layer-conversation-item />:

It is not required that each Component have its own CSS or LESS file; this is simply an approach we have taken to help developers understand the theme and build their own.

To customize these themes:

  1. You can copy the theme into your file system
  2. Modify the .less files
  3. Add a less build step to your project
Templates Lifecycle