Super Sale Limited Time 50% OFF for All-Access Plans
Save 50% Now

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
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • 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.

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
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(