How to pass variable from .ts file to .scss in ionic

[priyanjali]

How can i get value from component.ts file to .scss file in ionic 3.I havve requirement to change the splash screen and logo and color as per given in database.Please help how could do this.

[rtpHarry]

You can’t do it directly to the SCSS file, that’s a preprocessor file so it doesn’t exist in the app by the time the database is being read - its already CSS.

You would need to override the CSS rules by some method, for example, one of these:

1. outputting a <style> block into the page that has rules which override your existing ones to add your own colours in.
2. prebaking the css files, one for each colour (if you have a limited number of options) and just including whichever theme file you want at run-time

[rtpHarry]

To be a bit more clear with specific examples, I think you should be looking on google for “ionic themeswitcher”:

• https://medium.freecodecamp.org/how-to-dynamically-theme-your-ionic-application-and-make-your-users-happy-ffa17e15dbf7
• https://www.joshmorony.com/creating-a-theme-switcher-service-in-ionic-using-css4-variables/
• https://github.com/Ryan-Gordon/ionic-dynamic-themes

[robinyo]

See:

• https://robferguson.org/blog/2017/11/12/theming-your-ionic-3-app/
• https://robferguson.org/blog/2017/11/13/theming-your-ionic-3-app-part-2/
• https://robferguson.org/blog/2018/03/10/theming-your-ionic-3-app-the-colors-map/

[priyanjali]

Thanks a lot for reply back.

[priyanjali]

thank you for your reply