
Liferay version: 7.3
This guide allows creating a Liferay theme which helps us to override the look & feel of the Liferay control panel.
Assuming that you have already created a Liferay-workspace project in eclipse IDE.
1. Create a theme:
Link to create the theme.

This is the file structure for your custom theme

2. Edit Liferay-look-and-feel.xml file
Remove all XML tags under theme tag and add below one
<control-panel-theme>true</control-panel-theme>
Now your Liferay-look-and-feel.xml will look like below.
<?xml version="1.0"?>
<!DOCTYPE look-and-feel PUBLIC "-//Liferay//DTD Look and Feel 7.2.0//EN" "http://www.liferay.com/dtd/liferay-look-and-feel_7_2_0.dtd">
<look-and-feel>
<compatibility>
<version>7.2.0+</version>
</compatibility>
<theme id="custom-admin" name="custom-admin">
<control-panel-theme>true</control-panel-theme>
</theme>
</look-and-feel>
3. Copy the theme code:
You need to copy below theme folder from the liferay source code "${liferay-portal-src}/modules/apps/frontend-theme/frontend-theme-admin/src" in the "${custom-admin-theme}/src" folder

4. Edit _custom.scss:
As per your requirement, you can add/edit CSS rules in _custom.scss file.
We have added below CSS rules _custom.scss file for example. We have changed the control panel color from blue to green.
.product-menu,
.product-menu .panel-header {
background-color: #21716a !important;
}
.product-menu .panel .panel-body {
background-color: #21716a;
}
.product-menu a.list-group-heading.active,
.product-menu a.list-group-heading.active:hover,
.product-menu a.list-group-heading.active:focus {
background-color: #21716a;
}
.product-menu a.list-group-heading.active+div {
background-color: #21716a;
}
.product-menu .list-group-heading.panel-header:not(.collapsed){
background-color: #21716a;
}
.product-menu .show .list-group-item{
background-color: #2e837b !important;
}
#content-wrapper .control-menu-level-1 {
background-color: #2e837b;
}
5. Edit portal-ext.properties:
Add this property "control.panel.layout.regular.theme.id={add your theme id}" to your portal-ext.properties file
Note: Here theme id that you have entered while creating a custom theme.
6. Deploy the theme:
- Deploy the theme
- Restart your Liferay server
- Go to Control Panel → configuration → instance setting → instance configuration.
- Select the custom theme from Default Control Panel Theme dropdown and save.