Step by step guide to create a theme in liferay with Angular Material UI

Liferay theme is a collection of files that define the look and feel of a Liferay portal instance. It includes files such as CSS, JavaScript, images, and templates that control the presentation and layout of the portal’s pages, as well as its overall styling and behavior.

Themes in Liferay can be customized and created from scratch to meet specific design requirements, or they can be based on pre-built templates that are available from the Liferay community or commercial sources. They can also be applied to individual sites or globally to affect the appearance of the entire portal.

In addition to providing a consistent and visually appealing user interface, Liferay themes can also improve the accessibility and usability of a portal, enhance its branding and identity, and help to create a seamless and engaging user experience for visitors and users.

What is Angular Material UI and how it can help building a better UI (User Interface) ?

Material UI is a popular user interface (UI) library for building web applications using Angular, a JavaScript library for building user interfaces. Material UI provides a set of pre-built UI components that follow Google’s Material Design guidelines, which is a design language for creating intuitive and engaging user experiences across platforms and devices.

The library includes components for common UI elements such as buttons, forms, dialogs, navigation, and more. It also provides support for responsive design, accessibility, and internationalization.

Material UI can help to speed up the development process by providing a consistent and visually appealing set of UI components that can be easily customized to fit specific design requirements. It is also widely used and supported by a large community, with regular updates and improvements being made to the library.

Here’s an example of creating Liferay theme with Angular Material UI

1. Create an Angular application using the Angular CLI:

ng new my-app

2. Add Angular Material and the Liferay theme dependencies to the Angular project:

ng add @angular/material
npm install --save-dev liferay-theme-deps liferay-theme-tasks

3. Use the Liferay Theme Generator to generate a base Liferay theme for Angular, and select Angular Material as the UI framework:

yo liferay-theme:import --includeAngular --includeJSP --includeSass --framework=material

4. Customize the theme as needed by modifying the Angular code and using the Liferay theme configuration files. For example, you can modify the styles in the _custom.scss file:

@import "node_modules/@angular/material/theming";
@import "node_modules/liferay-font-awesome-web/css/font-awesome.min.css";

@include mat-core();

// Define your custom theme
$liferay-theme-primary: mat-palette($mat-deep-purple);
$liferay-theme-accent: mat-palette($mat-amber, 600, 800, A200);
$liferay-theme-warn: mat-palette($mat-red);

$liferay-theme-theme: mat-light-theme($liferay-theme-primary, $liferay-theme-accent, $liferay-theme-warn);

// Include Material Design icons from the icon font
$md-icon-font-path: "~@angular/material/prebuilt-themes/indigo-pink/"; // adjust path to match your setup
@import "~@angular/material/prebuilt-themes/indigo-pink/prebuilt-themes.css";

5. Use Angular Material’s theming capabilities to customize the look and feel of the UI components. For example, you can change the color scheme of a button:

<button mat-raised-button color="primary">My Button</button>

6. Build the theme using the Liferay theme tasks and deploy it to your Liferay instance:

gulp build
gulp deploy

Note that this is just a basic example and there are many other customization options available for both Liferay and Angular Material. Also, make sure to check the official documentation and best practices for each technology to ensure proper usage.