Your Web News in One Place

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
May 18, 2021 04:29 pm GMT

Theming with PrimeNG CSS Variables

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 primengColorcd 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.

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

Implementation

We'll start with surfaces and general colors.

General colors are:
genaral_colors_primeng

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

Surface colors are:
surface_colors_primeng

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:

Now we can create our simple application.

Topbar

p-shadow-2 and p-p-2 are coming from PrimeFlex. p-shadow-* is an elevation helper. We can use it to specify the separation between surfaces and elements along the z-axis. p-p-* is a spacing helper. p-p-* gives padding to elements. In our case this padding is 0.5rem.

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

Sidebar & Simple Form

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

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

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

p-fluid there are for input width's .p-formgrid, p-gird coming from PrimeFlex!

Now our app looks like this:
sagablue_primeng_colors

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

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

bootstrap4-dark-purple_primeng_colors

Let's try with vela-green too!

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

vela-green_primeng_colors

Voil!

Variables always will be compatible with your theme choices!

Thanks for your reading.

Playground:

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


Original Link: https://dev.to/yigitfindikli/theming-with-primeng-css-variables-5ai2

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To