Page 1 of 1

Problems with creating a new theme. Best practice?

Posted: 13 Dec 2018, 13:11
by JHahn
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

Re: Problems with creating a new theme. Best practice?

Posted: 19 Dec 2018, 09:23
by JHahn
Doesn't anyone have an idea how to customize the PrimeDesigner files and keep them updateable? :(

Re: Problems with creating a new theme. Best practice?

Posted: 19 Dec 2018, 12:20
by cagatay.civici
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.

Re: Problems with creating a new theme. Best practice?

Posted: 29 Dec 2018, 12:28
by Lienanzor
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.

Re: Problems with creating a new theme. Best practice?

Posted: 23 Oct 2020, 09:42
by tidemann
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>';

Re: Problems with creating a new theme. Best practice?

Posted: 23 Oct 2020, 12:56
by mert.sincan
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,

Re: Problems with creating a new theme. Best practice?

Posted: 23 Dec 2020, 15:48
by tidemann
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