Theming with PrimeNG CSS Variables
Tags: angular, primeng, webdev, tutorial
Published: 2021-05-18 16:29:28

We introduced CSS variables in Version 11.3.0-RC.1. This article will explain how to use the new PrimeNG CSS variables and design logic. Let's start!

###Project Setup

Let's create a brand new angular application using angular-cli.

```
ng new primengColor
cd primengColor
```

Let's add PrimeNG, PrimeFlex, and PrimeIcons.

```
npm install primeng primeicons primeflex
```

We need to import PrimeNG's CSS dependencies to Angular.json.

```
node_modules/primeicons/primeicons.css 
node_modules/primeng/resources/themes/saga-blue/theme.css 
node_modules/primeng/resources/primeng.min.css
```

Lastly, we need to import a couple of PriemNG components. I want to create a simple form and a sidebar. We're gonna use ButtonModule, SidebarModule, InputTextModule, InputTextareaModule, and ToastModule.

{% gist https://gist.github.com/yigitfindikli/06a5d8db1d4fb0d0c163cff617a58cf1 %}

We're ready for using PrimeNG, let's start!

####Implementation

We'll start with surfaces and general colors.

General colors are:
![genaral_colors_primeng](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r3jsgfbrd2ymvwnvvcwv.png)

Our project gonna use text-color and font-family.

Surface colors are:
 ![surface_colors_primeng](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o1hdh38tvhb7j1rbhklp.png)

Surface colors can be useful when designing the surface layers and separators.

Each PrimeNG theme exports its own color palette so all colors will be adaptive to our theme.

Let's use it in our style.css:
{% gist https://gist.github.com/yigitfindikli/6b40ef026049e0d0589e83fa7acbb377 %}

Now we can create our simple application.

###Topbar

{% gist https://gist.github.com/yigitfindikli/757c9b36facdedeee6ad0aa12cbfb1c4 %}

p-shadow-2 and p-p-2 are coming from [PrimeFlex](https://primefaces.org/primeng/showcase/#/primeflex). p-shadow-* is an [elevation helper](https://primefaces.org/primeng/showcase/#/primeflex/elevation). We can use it to specify the separation between surfaces and elements along the z-axis. p-p-* is a [spacing helper](https://primefaces.org/primeng/showcase/#/primeflex/spacing). p-p-* gives padding to elements. In our case this padding is 0.5rem.

{% gist https://gist.github.com/yigitfindikli/b352a716e1b4feb394abae6acd6bf113 %}

I'm gonna use the primary color for the topbar's background color. I want to topbar's background color the same as the button's color (The pButton's default background color is already the primary color).

![topbar_primeng_colors](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5dgud1epc81akt5fmz38.png)

####Sidebar & Simple Form

We don't need CSS variables now because PrimeNG components using already! Let's create properties for our components!

{% gist https://gist.github.com/yigitfindikli/10831f28a394c95b14da9f4bbad584d3 %}

Message Service there is for p-toast and PrimeNGConfig there is for activation ripple.

We're gonna add our components to app.component.html!

{% gist https://gist.github.com/yigitfindikli/3822c109d1ab068a44696257b1702dc2 %}

p-fluid there are for input width's .p-formgrid, p-gird coming from [PrimeFlex](https://primefaces.org/primeng/showcase/#/primeflex/formlayout)!

Now our app looks like this:
![sagablue_primeng_colors](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u85x3spt1a41aykwk1ad.png)

Let's change the theme to bootstrap4-dark-purple:

```
node_modules/primeng/resources/themes/bootstrap4-dark-purple/theme.css
```

![bootstrap4-dark-purple_primeng_colors](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/daq1mrpl1epd76mcidyl.png)

Let's try with vela-green too!

```
node_modules/primeng/resources/themes/vela-green/theme.css
```

![vela-green_primeng_colors](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lbl557tlzyoey55zbaly.png)

Voilà!

Variables always will be compatible with your theme choices!

Thanks for your reading.

[Playground](https://stackblitz.com/edit/primeng-colors):

{% stackblitz primeng-colors %}

Github repo: https://github.com/yigitfindikli/primeng-colors-example