Problems with creating a new theme. Best practice?

Post Reply
JHahn
Posts: 2
Joined: 09 Oct 2018, 14:08

13 Dec 2018, 13:11

Hi.

I've bought PrimeDesigner and was a little bit disillusioned:
  1. Customize the basic theme only with the _variables.scss file leads not too far. The styling posibillities are limited. Individual stylings like different border widths AND different border.colors on one element are not possible with just one variable.
  2. There are inconsistencies, e.g. the variable $inputListItemHighlightBgColor is assigned to the selected element in a dropdown but also to a hovered element in an autocomplete input!
  3. Some elements like the password meter could not be styled because of inline styles that are added to the component in the JS module (password.js)
  4. Hardcoded units in the SASS files e.g. _forms.scss, line 412

    Code: Select all

     $inputListHeaderPaddingRight + .5em;
    lead to compiling errors in the Angular CLI when the variable contains an other unit then "em".
So my question is: Is there a best practice to create a custom theme without changing the designer core *.scss files?

It would be absolutely ok for me if it would be somehow possible to override the PrimeDesigner core files. but I don't want to change stuff in the files because then updates to newer version would be impossible. The idea was to do the basic settings with the variables in _variables.scss and do additional styling by overriding parts of the PrimeDesigner SASS files. Therefore I wanted to copy the selectors from the origin SASS files to my _overrides.scss file and include this as last in my _extensions.scss . But this breaks because of the point 4 (hardcoded units) when I try to use "rem" instead of "em" in _variables.scss.

Thanks in advance for your kind help :-). Cheers, Josef

JHahn
Posts: 2
Joined: 09 Oct 2018, 14:08

19 Dec 2018, 09:23

Doesn't anyone have an idea how to customize the PrimeDesigner files and keep them updateable? :(

cagatay.civici
Prime
Posts: 18616
Joined: 05 Jan 2009, 00:21
Location: Cybertron
Contact:

19 Dec 2018, 12:20

Best alternative is to avoid changing the designer/*.scss files since they are the ones that get updated and put your extensions (wiith copy to override) with your own variables in _extensions.scss.

User avatar
Lienanzor
Posts: 1
Joined: 29 Dec 2018, 10:31
Location: San Francisco

29 Dec 2018, 12:28

cagatay.civici wrote:
19 Dec 2018, 12:20
Best alternative is to avoid changing the designer/*.scss files since they are the ones that get updated and put your extensions (wiith copy to override) with your own variables in _extensions.scss.
Thanks for you advice.

tidemann
Posts: 6
Joined: 29 Sep 2020, 10:48

23 Oct 2020, 09:42

cagatay.civici wrote:
19 Dec 2018, 12:20
Best alternative is to avoid changing the designer/*.scss files since they are the ones that get updated and put your extensions (wiith copy to override) with your own variables in _extensions.scss.
I think I might have a suggestion for some improvement here:
If the inlcuded themes _variable.scss files could have a !default flag added to the variables, it would be possible to create an adjusted theme like this:
create a single scss file to set the variables I want to override and then include the theme.

Code: Select all

$primaryColor:#F755FF;
$linkButtonColor: #7C1B8B;
....etc etc..
import '<path_to_theme>';

mert.sincan
Posts: 5281
Joined: 29 Jun 2013, 12:38

23 Oct 2020, 12:56

Hi,

We added it to all themes. I guess the !default is not added in some themes. We'll check it and get back to you. Also, which theme are you using?

Best Regards,

tidemann
Posts: 6
Joined: 29 Sep 2020, 10:48

23 Dec 2020, 15:48

Hi,
I'm using material light -> standard -> purple at the moment.
As far as I can tell, none of the themes except mira, nano, saga-blue, soho-dark and soho-light defines colors with a !default flag.
Using primevue-designer 2.2.1.

Best regards,
Stig Salte Tidemandsen

Post Reply

Return to “PrimeNG Theme Designer API”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 2 guests