![]() If you override them, be sure to copy angular-dark-mode.js locally, make the necessary changes,Īnd load the local file in angular.json instead of the library one. The angular-dark-mode.js file shipped with the library assumes you are using default options. So we set the preloadingClass in this file and remove it after initialization. The end result will be a minimal Angular Material app with an option for a dark mode for users. Here is how you can add a dark mode to your Angular material app in three simple steps. It is easier on the eyes and less draining for your smartphone battery. by adding it to your styles array in the. A dark mode is a must-have little feature for your Angular web application. ![]() Preloading - As we saw, the preloadingClass option can be quite handy when we want to skip the initial transition, If you want to switch over to the dark theme use one of the examples below to modify. When the app loads, it retrieves the latest value from localStorage or falls back to the OS’s preference. Creating a Dark & Light Toggle Mode on your Angular App GitHub Instantly share code, notes, and snippets. Persistence - angular-dark-mode saves your preference in localStorage. Lastly, add the angular-dark-mode.js file to the angular.json scripts section: Īll set! Run the application, and depending on your OS theme, it will open in dark or light mode: angular-dark-mode.js Even I ended up fine tuning the colors I ultimately used. Even if you don't end up using the exact colors generated, it is still a good place to start. I used this color shades generator for generating my color palette. Below an exemplary Angular application can be found that has implemented the dynamic approach. Or if you prefer yarn: yarn add angular-dark-mode Use the darkest shade from the palette as the background color and the lighter shades as font colors when in dark mode. Next, add angular-dark-mode: npm i angular-dark-mode Setupįirst, let's quickly create an angular project we can play with by running: npx new dark-mode-playground -minimal Ten minutes later, I already had dark mode integrated into my portfolio!Īs an Angular developer, I thought it would be nice to have such a library in our ecosystem as well, so I created angular-dark-mode!įinal code and demo available in this stackblitz. Using React and Gatsby, I have a ton of options to choose from, but I stumbled upon a minimal yet powerful library called use-dark-mode. Recently, I launched my minimal portfolio (the one you are in right now!)
0 Comments
Leave a Reply. |