The Sass approach

The second way is more flexible and accurate. It is preferable to create a new theme manually by Sass because the theme is better maintainable. The main CSS settings, such as font, colors, border radius, and many more can be done configurable by Sass variables. You can create a new theme by setting custom values for those variables. This is exactly the approach followed by PrimeNG. The mostly free themes were created in such manner.

Every theme has a separate folder with a Sass file where variables are set. The variables themselves are used in _theme.scss--shared file for all free themes. This file can be found under node_modules/primeng/resources/themes/, if you install PrimeNG as the dependency. Sometimes, you also need to set custom fonts or special settings for particular CSS selectors. You can overwrite default style rules with your own ones--just write them after importing _theme.scss. The general structure of the custom theme file looks like as follows:

<predefined Sass variables>

@import "primeng/resources/themes/theme";

<your custom style rules>

Let's create the following folder structure with three Sass files for a new crazy theme:

- src
    - assets
        - themes
            - crazy
                - fonts
                    ...
                - _variables.scss
                - theme.scss

Sass variables can be copied from any other theme, such as Omega and placed in _variables.scss. Some of them get custom values as shown here:

$fontFamily: "Quicksand", "Trebuchet MS", Arial, Helvetica, sans-serif;
...

// Header
$headerBorderWidth: 2px;
$headerBorderColor: #f0a9df;
...

// Content
$contentBorderWidth: 2px;
$contentBorderColor: #ffafaf;
...

// Forms
$invalidInputBorderColor: #ff0000;
...

As you see, we would like to use a custom font Quicksand. You can download this font in the .otf format (OpenType Font) from this free resource: https://www.fontsquirrel.com/fonts/quicksand. For cross-browser support, we need fonts in four formats: .ttf, .eot, .woff, and .svg. There are many converter tools and one of these can be found at http://www.font2web.com, which allows converting any .otf file to the mentioned four formats. After conversion, custom fonts should be moved to the fonts folder and installed via the @font-face rule.

Furthermore, we want to have pink gradient colors for widget's header and red borders around invalid fields. All these custom rules are done in the theme file theme.scss. An excerpt from this file illustrates the idea:

@import 'variables';
@import "primeng/resources/themes/theme";

@font-face {
  font-family: 'Quicksand';
  src: url('fonts/Quicksand-Regular.eot');
  url('fonts/Quicksand-Regular.woff') format('woff'),
  url('fonts/Quicksand-Regular.ttf') format('truetype'),
  url('fonts/Quicksand-Regular.svg') format('svg');
  font-weight: normal;
  font-style: normal;
}

.ui-widget-header {
  background: linear-gradient(to bottom, #fffcfc 0%, #f0a9df 100%);
}

.ui-inputtext.ng-dirty.ng-invalid,
p-dropdown.ng-dirty.ng-invalid > .ui-dropdown,
... {
  border-color: $invalidInputBorderColor;
}

The proposed structure allows to create as many themes as you want. But, how to compile theme.scss to theme.css? There are two ways to compile Sass to CSS:

1. Install the Sass from the command line. The installation process is described on the Sass homepage (http://sass-lang.com/install). Note that you need preinstalled Ruby. Once Sass is installed, you can run sass theme.scss theme.css from your terminal.
2. Use node-sass (https://github.com/sass/node-sass) under Node.js.

In the project on GitHub, we used node-sass along with autoprefixer (https://github.com/postcss/autoprefixer) and cssnano (http://cssnano.co). All required dependencies are installed locally:

npm install node-sass autoprefixer cssnano postcss postcss-cli --save-dev

Four handy npm scripts in package.json help to create the theme file:

"premakecss": "node-sass --include-path node_modules/ src/assets/themes/crazy/theme.scss -o src/assets/themes/crazy/",
"makecss": "postcss src/assets/themes/crazy/theme.css --use 
autoprefixer -d src/assets/themes/crazy/",
"prebuild:css": "npm run makecss",
"build:css": "postcss src/assets/themes/crazy/theme.css --use cssnano
             > src/assets/themes/crazy/theme.min.css"

The npm run build:css command will produce theme.min.css, which should be included on the page:

<link rel="stylesheet" type="text/css" href="src/assets/themes/crazy/theme.min.css"/>

The look and feel of the new theme is amazing: