styles/themes organization & refactor

Forum rules
Please note that response time for technical support is within 3-5 business days.
Post Reply
oberthurcp
Posts: 5
Joined: 14 Oct 2020, 12:53

29 Oct 2020, 12:23

Hi there,

We have recently been purchasing MirageNg template but we are having hard time trying to refactor the theming part.
Our goal is to place all the scss files a src/app/theme folder (so we can use the angular cli to manage css builds for us) and have a css class wrapping each themes for both light & dark modes.

The thing is that the way theming is organized does not seem right at all

- Everything is under the the assets folder, which gives not much control over css generation through the angular cli because the assets folder is aimed ot be used as raw copy to dist.
- Theme switching between dark & light mode is done through dom manipulation (in app.config), which is highly discouraged by angular conventions.
- The are some things like repeated folder names that does not help to understand what part does what (e.g. assets/sass/theme & assets/theme). How does layout & theme scss differs? What does the designer scss? etc...

A common organization would be to have everything related to theming under a src/app/theme folder and all the low level sass files elsewhere (commonly in node_modules behind a private repo under your org name)

We tried to play around to find out a way to wrap layout-dark, layout-light, theme-dark & theme-light but there seem no easy way (at least we did not found any) to achieve our goal.
The menu theme has this class mecanism/scss wrapping (sass/layout/menu/theme => .layout-menu-dark class).

Do you have any plan on refactoring this part or could you please lead us to a solution?

Thanks for your help
Clément

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

30 Oct 2020, 09:56

Similar issue; viewtopic.php?f=122&t=63915

Best Regards,

Post Reply

Return to “Mirage - PrimeNG”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 1 guest