Import Apollo Theme Into PrimeNG Designer

Post Reply
Posts: 1
Joined: 01 Mar 2019, 16:44

25 Jan 2021, 19:57

We purchased both the Apollo Theme and the PrimeNG Designer. We would like to use the PrimeNG Designer to lightly modify the apollo theme (mostly make everything smaller). The directory structure of the Apollo theme does NOT appears to match what the designer is expecting. Could you please provide the step need to load the apollo theme into the PrimeNG Designer.

Thanks in advance.

Posts: 322
Joined: 29 Jul 2019, 13:57

01 Feb 2021, 14:59


@merve Could you please check this issue?

Best Regards,

Posts: 861
Joined: 12 Sep 2017, 10:44

08 Feb 2021, 15:31

You can use the below steps to import Apollo theme into Designer;

1. Change default in the angular.json file

Code: Select all

(line 59) "src/sass/themes/mytheme/theme.scss" ->"src/sass/themes/apollo/theme.scss"
2. Create apollo folder in the themes folder. (src/sass/themes/apollo)
3. Create _variables.scss and theme.scss files into apollo folder
4. Write the below code into theme.scss file

Code: Select all

@import './_variables';
@import '../../designer/_components';
5. Copy any theme colors-primary colors-(Apollo) and paste into _variables.scss file( for example src/assets/theme/theme-yellow-light.scss -> src/sass/themes/apollo/_variables.scss)
6. Copy other variables(only variables not imports) from _theme_light.scss file and paste into (below others variables) _variables.scss file (src/assets/sass/theme/_theme_light.scss -> src/sass/themes/apollo/_variables.scss)
7. Lastly, compile sass command (sass --watch src/sass:src/sass --no-source-map)

folder structure;


Posts: 2
Joined: 04 Oct 2022, 12:54

04 Oct 2022, 13:04

hi ,

Do we have to do all these steps for all available templates on the store?
I am suggesting my customer to choose one of the templates and later use the theme designer to customize look & feel of that template.
I am wondering if I should do that or just suggest my customer to choose a base theme instead of a template?


Posts: 37
Joined: 17 Jun 2022, 09:43

05 Oct 2022, 10:48


You can customize both.
The ready-made theme has components and may take less time.


Posts: 18571
Joined: 05 Jan 2009, 00:21
Location: Cybertron

25 Oct 2022, 08:51

Apollo includes a simplified version of the designer so you don't need to integrate PrimeNG designer to Apollo, the SASS is already in there. You need to customize the _variables.scss of the light-dim-dark themes for modifications mostly depending on how much you need to customize. So I'd suggest ignoring PrimeNG Theme Designer and only work with Apollo for the solution.

Post Reply

Return to “PrimeNG Theme Designer API”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 2 guests