How to dynamically update the properties of _variables.scss?

Post Reply
jfranko2020
Posts: 2
Joined: 18 Jun 2019, 21:16

19 Jun 2019, 21:31

I am building a web application wherein an admin can go and set custom properties such as 1) changing global font size 2) changing the panel background colors 3) changing button color 4) changing button dimensions etc. I have looked at PrimeNg designer API and I see that they have a list of about 500 variables in their scss file. What I would like to do is create a form so that user can set the values on the UI. Scenario 1--> Example --> https://ibb.co/BtV9k8Z

In my HTML file -->

<input type="color" id="#globalBodyColor" #globalBodyColor value="#ff4545" (input)="setBodyColor($event.target.value)">

In my styles.css file -->
:root {
--body-color: yellow;
--text-color: red;
--font-size: 0.85rem;
--button-color: #007ad9;
}
body {
/*padding-top: 70px;*/
/*padding-bottom: 70px;*/
font-family: "Open Sans", sans-serif;
font-size: var(--font-size);
line-height: 1.42857;
color: #343434;
background-color:var(--body-color);
}

In my component.ts file -->

body = document.querySelector('body');

setBodyColor(bodyColor) {
this.body.style.setProperty('--body-color', bodyColor);
}


So here I clicked on the input color selector (color palette). My expectation is that when I select a color here, the color of the 'body' should get updated with that color dynamically.
I don't want to pre-set some fixed colors. I want to give my users full control over what colors they want.

Similarly, they should be able to select any font size or button size and the UI should get updated accordingly.
How can PrimeNg desinger API help me in this regard?

I am aiming to provide lot of customization to my users with respect to the UI of the app. I don't mind buying a license if that helps me do this, but I need good information to work through this.

Link to my stackoverflow question is -->

https://stackoverflow.com/questions/566 ... -from-html

Note that the answers on that link aren't useful. I answered my own question over there but I am not too sure about it.

Appreciate the help!

Post Reply

Return to “PrimeNG Theme Designer API”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 3 guests