Load scss bundle
Hi,
this code is not work from metronic, any one can guide us for solve this problem.
I have light and dark theme files and mentioned in angular.json file as below:
"styles": [
"src/styles.scss",
{
"input": "src/styles/themes/light.theme.scss",
"bundleName": "light-theme",
"inject": false
},
{
"input": "src/styles/themes/dark.theme.scss",
"bundleName": "dark-theme",
"inject": false
}
],
loadStyle(styleName: string = 'light-theme' | 'dark-theme') {
const head = this.document.getElementsByTagName('head')[0];
let themeLink = this.document.getElementById('client-theme') as HTMLLinkElement;
if (themeLink) {
themeLink.href = styleName;
} else {
const style = this.document.createElement('link');
style.id = 'client-theme';
style.rel = 'stylesheet';
style.href = `${styleName}`;
head.appendChild(style);
}
}
Replies (4)
Hi aram sabir
I’m sorry to hear that you are having trouble loading the scss bundle from Metronic. Based on your code, it seems that you are trying to load the scss files as separate bundles using the “inject” option in angular.json. However, this option only works for css files, not scss files. To load scss files, you need to use a different approach.
May I know if these files (src/styles/themes/light.theme.scss and dark,theme.scss files) are from metronic or your custom scss code?
Thanks
Hi Faizal,
We have a problem with your RTL Version, when system is on english language we have no problem so when we change the language to arabic from sidebar (In application) we need to overwrite style.scss to style.rtl.css and vice versa.
we bought your theme because we think this theme is include this option and it's important for us,
Hi aram sabir,
Sorry that the feature is not working for rtl css overwrite. Unfortunately, we currently do not have a function to change the style.scss to style.rtl.css automatically.
Regarding your code snippet above, if the styles are not applied after switching languages, you might consider storing the RTL option in the localStorage and then forcing a page refresh to load the new CSS. This can be done using location.reload().
Just in case Metronic Angular does not meet your project requirements, you may request a refund using the [Themeforest Refund Form](https://themeforest.net/refund_requests/new).
Thank you
Please consider checking this post for a similar issue.
https://devs.keenthemes.com/question/switch-between-light-and-dark-mode-without-reloading-page-with-angular-template
Thank you
