So creating a single AppMaterialModule and then importing it in every Angular Module that you create can lead to performance hits. This would not make much sense in a Real-World Application as we would generally not use all the Angular Material Components in all our Modules.
NOTE: I'm doing this in here because I will be using all the Angular Material Components exposed by these Angular Material Modules in my AppModule. Įnter fullscreen mode Exit fullscreen mode Since all these Angular Material Components will be used in my AppModule, it would make sense to create a separate AppMaterialModule that re-exports all the Material related modules from it. I'll add a toolbar, an icon on it, a menu for theme options, and a button. I've set-up Angular Material on StackBlitz that you can use as a starter template:įrom here on, let's add a few Angular Material Components that we can use to see something on the UI. So without further ado, let's get started. We'll pretty much replicate the same effect in our Angular App. You might have seen this switch that lets you change the theme on the website. One of my favorite websites, that implement Themes is the Angular Material Site. But you can take the UX of your Web App, to the next level, by intelligently switching themes, based on the ambient lighting conditions that the user is in. The other aspect might look more or less like a gimmick to some of you. And most of the Web Apps(or Apps, in general), do that via themes. It's always better to offer users a way to customize the look and feel of your Apps, without compromising with your design language. But still, Dark Mode is easier on the eyes and makes more sense IN THE DARK.(see what I did there? 😉)Īlso, I mentioned Dark Mode as a way to enhance UX right? Well, there are multiple aspects to it. I mean, nobody's stopping you from changing to Dark Mode even in well-lit environments. Low-lit ambiances are the best suited for Dark Mode. Most of the websites out there are implementing it as custom themes in their Apps.Īnd why wouldn't they do that, right? Dark Mode is awesome! It's easier on the eyes, better in terms of power consumption, and can provide an excellent user experience(especially in low-lighting conditions)
#Material ui dark mode switch free
Please feel free to navigate to a heading that might interest you more. I've added a TL DR below 👇🏻 as a precautionary measure, in case you're a more advanced Angular Developer. That said, this article is mainly intended for beginners. I'll be more than happy to elaborate more on it.🙂 If there's still an issue understanding anything here, please feel to comment on this article about it. So hopefully, if you're new to Angular or have just started, you should get by just fine. matches )) class variant, however, if you would like to customize the appearance of these components when in dark mode all you need to do is change the styles for these class variants.DISCLAIMER: While I write this article, I'll try to be as vocal as I can about how I implement something. matchMedia ( '(prefers-color-scheme: dark)' ). getItem ( 'color-theme' ) = 'dark' || ( ! ( 'color-theme' in localStorage ) & window. getElementById ( 'theme-toggle-light-icon' ) // Change the icons inside the button based on previous settings getElementById ( 'theme-toggle-dark-icon' ) var themeToggleLightIcon = document. Add the following JavaScript inside your main file to handle the click events on the element:.You can also use other elements, such as the toggle component.
In this example we used a component where we change the icon inside based on the current color scheme.
0 kommentar(er)
