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
styles/themes organization & refactor
Forum rules
Please note that response time for technical support is within 3-5 business days.
Please note that response time for technical support is within 3-5 business days.
-
- Posts: 5281
- Joined: 29 Jun 2013, 12:38
Hi,
@merve7 and @yigit Could you please check this issue?
Best Regards,
@merve7 and @yigit Could you please check this issue?
Best Regards,
Github Profile: https://github.com/mertsincan
-
- Posts: 5281
- Joined: 29 Jun 2013, 12:38
Sorry for the delayed response.
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.
- Theme styles PrimeNG components.
https://www.primefaces.org/mirage-ng/#/documentation
all-theme-light.scss
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,
- 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.)- 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 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.- Theme switching between dark & light mode is done through dom manipulation (in app.config), which is highly discouraged by angular conventions.
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">
- No repeat;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)
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.
- Layout styles custom components or contents such as Mirage Menu, Topbar, Main content etc. In short, everything else is left without PrimeNg components.How does layout & theme scss differs?
- Theme styles PrimeNG components.
- 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.What does the designer scss?
https://www.primefaces.org/mirage-ng/#/documentation
I understand you want to collect all the themes in one file. If it is right, firstly please create a scss file. Exp;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.
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';
}
...
I hope my answers can help you.
Best Regards,
Github Profile: https://github.com/mertsincan
-
- Information
-
Who is online
Users browsing this forum: No registered users and 1 guest