Get 2024 Templates Mega Bundle!19 Bootstrap HTML, Vue & React Templates + 3 Vector Sets
Get for 99$

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);
}
}


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (4)


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



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


Deleted comment

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,


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(