Update packages and regenerate your custom theme with the latest available in order to solve accessibility or style related bugs

Issue

Sometimes in order to solve user interface bugs (like accessibility or style related), our customers need to update their custom themes with the latest versions available of liferay-frontend-theme-unstyled , liferay-frontend-theme-styled and liferay-font-awesome
This is needed because with each release these packages receive fixes for various bugs and in order to have them in your portal you need to update them and regenerate your custom theme.

Environment

DXP 7.0 or higher

Resolution

First, you need to update the dependencies in your package.json using the latest themes available for your DXP version (see liferay-theme-tasks#get-the-right-dependency-version-for-your-theme)
For example, for DXP 7.4, we need to use the latest major version 6.x.x for both liferay-frontend-theme-unstyled and liferay-frontend-theme-styled based themes (use 5.x.x for DXP 7.3 instead). Regarding liferay-font-awesome you can use the latest one available as it is compatible with all DXP 7.0 or higher.

As a result, our package.json would look like this (using the latest available at the moment of writing this article):

{...
	"liferayTheme": {
		"baseTheme": "styled",
		"fontAwesome": true,
		"templateLanguage": "ftl",
		"version": "7.4"
	},
	"devDependencies": {
		"compass-mixins": "0.12.12",
		"gulp": "4.0.2",
		"liferay-frontend-css-common": "6.0.5",
		"liferay-frontend-theme-styled": "6.0.52",
		"liferay-frontend-theme-unstyled": "6.0.45",
		"liferay-theme-tasks": "11.4.0",
		"liferay-font-awesome": "3.5.2"
	},
  "scripts": {
		"gulp": "gulp",
		"init": "gulp init",
		"build": "gulp build",
		"deploy": "gulp deploy",
		"extend": "gulp extend",
		"kickstart": "gulp kickstart",
		"status": "gulp status",
		"upgrade": "gulp upgrade",
		"watch": "gulp watch"
	}
  }

In order to see the results, you need to run npm install(this will download the new libraries in your node_modules folder) and gulp deploy (this would deploy the newly generated theme to your portal and includes guld build);
In case you don't see any results or changes after deploying your newly generated theme, clear the browser cache (each browser has its way) and also the portal cache from Control Panel > Server Administration > Execute Clear content cached by this VM and Clear content cached across the cluster (for more details, check: Server Administration Resources)
Important note: If you overwrite the original templates in src/templates of unstyled theme (see frontend-theme-unstyled/src/main/resources/META-INF/resources/_unstyled/templates). You have to check if there are any changes needed, in order for your theme to work correctly in the new version.

Additional Information

Starting with DXP 7.4 we recommend the use of Site appearance page, see all links here:
In case all these new features are not up to your design needs, you can create a Custom theme
Liferay Frontend NPM Toolkit compatibility matrix for Node.js, NPM, Yeoman, Gulp and Generator Liferay Theme
Error in plugin "sass" when migrating themes "... is deprecated and will be removed in Dart Sass 2.0.0."