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?
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
<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,
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>