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

When I switch to dark theme in Angular Metronic v8.1.5 version, the colours of my other custom components except metronic components do not change for dark theme.


When I switch to dark theme in Angular Metronic v8.1.5 version, metronic components change colour for dark mode, but since I use design libraries such as angular material, bootstrap, primeNG etc. in my project, naturally when I switch to dark mode, the components I add from this design library do not change colour. How can I follow a way for this, how can I understand that the scss has switched to dark mode and how can I make the colour change for these components. Can you explain with examples?


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 (3)


Hi,

In index.html file, there is JavaScript code responsible for loading the dark theme based on user preferences. This code detects the user's preferred color scheme and sets the theme accordingly.

Ensure that this code is correctly configured to set the theme mode to "dark" when the dark theme is selected. You can find this code in your index.html file:

<script>
if (document.documentElement) {
var defaultThemeMode = "system";
// ...
document.documentElement.setAttribute("data-bs-theme", themeMode);
}
</script>


This script checks for the user's preferred color scheme and sets the theme accordingly. Ensure that it sets the data-bs-theme attribute to "dark" when the dark theme is selected.

Thanks



<a target="_blank" href="https://preview.keenthemes.com/html/metronic/docs/getting-started/dark-mode">This Link</a>
In this link, if you revise the document for the Angular project, I may actually have found answers to most of my questions.



Hi,

I apologize for any inconvenience you've experienced. Thank you for your feedback. We are continually working to improve our documentation, including the documentation for the Angular project. Your input is valuable, and we will strive to provide more comprehensive and helpful resources in future updates.

Regarding your previous issue, if you have any further questions or if there are any unresolved concerns, please feel free to share them.

Thanks


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