Page 1 of 1

Use $primaryColor for h1 for all themes - Sapphire

Posted: 15 Mar 2020, 06:49
by msbhalani
Trying to use $primaryColor for h1 (one of the component) and should work for all themes.
What's the way to use $primaryColor variable inside component scss?
I tried following entries as part of _theme_styles.scss but that does not work either.

/* Add your customizations of theme here */
h1.primary {
color:$primaryColor;
}

Can you please advise?

Thanks!

Re: Use $primaryColor for h1 for all themes - Sapphire

Posted: 20 Mar 2020, 08:43
by merve7
Hi,
I tried your code and it works but please, check your _theme.scss file (src/assets/sass/theme/_theme.scss), it should contain "@import '../overrides/theme_styles';". You can also try to enclose your code in the body tag;

Code: Select all

body {
     h1.primary {
         color:$primaryColor;
     }
}
Image

Re: Use $primaryColor for h1 for all themes - Sapphire

Posted: 26 Mar 2020, 06:35
by msbhalani
Thank you for your suggestions. I tried both options but none of them worked for me.

Please see attached. I am using Sapphire v8...

https://i.ibb.co/4j8Z4xh/1.jpg
https://i.ibb.co/jTSxp7y/2.jpg
https://i.ibb.co/x1ByS51/3.jpg

Thanks!

Re: Use $primaryColor for h1 for all themes - Sapphire

Posted: 27 Mar 2020, 22:54
by msbhalani
I tried even v9 ("as is" template with just code change for this test)... styles/css are not picked up from assets/saas/theme/*.scss files. I tried to put it in couple files to just test it and none of them work.

I tried to use css to fix header (refer one of the forum solution)...pasted in "_layout_styles"... did not work but as soon as I put it in "styles.scss" it did work.

Any idea why none of the change reflect from files under overrides folder?

Any help will be appreciated.

Regards,

Re: Use $primaryColor for h1 for all themes - Sapphire

Posted: 03 Apr 2020, 10:17
by mert.sincan
Hi,

Thanks a lot for the screenshots! Please change the following code in theme.scss;

Code: Select all

...
@import '../overrides/_theme_styles'; /* instead of theme_styles */
Best Regards,