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

28 Oct 2020, 22:35

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:55

Hi,

@merve7 and @yigit Could you please check this issue?

Best Regards,

oberthurcp
Posts: 5
Joined: 14 Oct 2020, 12:53

26 Nov 2020, 17:38

@merve7 @yigit @mert.sincan Any answer?

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

01 Feb 2021, 13:23

Sorry for the delayed response.
- 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.
- This is by design. You can change the folder structure according to your needs. Since we don't know exactly what build users want to set up, we followed a basic level folder structure. (Note: Please don't forget to change the imported paths.)
- Theme switching between dark & light mode is done through dom manipulation (in app.config), which is highly discouraged by angular conventions.
- This is only to show the theme and layout change in live demo. Therefore, Users should remove app.config directly when starting their application. Then, they must manually make the necessary changes according to their choice.

Code: Select all

//You can change the following lines according to your needs;
<link id="theme-css" rel="stylesheet" type="text/css" href="assets/theme/blue/theme-light.css">
<link id="layout-css" rel="stylesheet" type="text/css" href="assets/layout/css/blue/layout-light.css">
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)
- No repeat;
assets/sass/theme-> _theme_light/dark.scss contain common themes based on the dark and light mode of theme color. Exp; Light Blue and Light Brown theme colors use _theme_light.scss file. Because the files imported in it are common. The thing that determines the color characteristics of a theme is in the <color_name>/theme-light.scss file. Exp; blue/theme-light.scss or brown/theme-light.scss etc.
How does layout & theme scss differs?
- Layout styles custom components or contents such as Mirage Menu, Topbar, Main content etc. In short, everything else is left without PrimeNg components.
- Theme styles PrimeNG components.
What does the designer scss?
- This includes the CSS styles of PrimeNG components. We generally want users not to interfere with this file. If they want to add custom styles, they can use files under assets/sass/overrides folder.
https://www.primefaces.org/mirage-ng/#/documentation
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.
I understand you want to collect all the themes in one file. If it is right, firstly please create a scss file. Exp;

all-theme-light.scss

Code: Select all

/* You need to create custom CSS classes. Note: please change paths according to your folder structure. */

.theme-blue-light {
  @import '../theme/blue/theme-light';
}

.theme-brown-light {
  @import '../theme/brown/theme-light';
}
...
Then, please provide CSS file using SASS command and import it in index.html. Finally, you can add these custom classes into any html element Exp; div.layout-wrapper

I hope my answers can help you.
Best Regards,

Post Reply

Return to “Mirage - PrimeNG”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 3 guests