#Material ui dark mode switch how to#
#Material ui dark mode switch code#

Step 2: Adding the dark mode toggle behavior So if we apply the class to the parent div in our, this is what we’ll get. Now whenever we add this class name to any HTML container, it will apply the dark theme to all of its children. One last tweak to get the background and foreground color working is to add the class mat-app-background to our parent container in. Then we include the color configuration changes inside of a class name (which we named ourselves) i.e. This ensures that background and foreground colors are set correctly for the dark mode. To add a dark theme, we used material’s predefined function mat-dark-theme, instead of mat-light-theme in our default theme.

darkMode mat.all-component-colors($angular-dark-theme) $angular-dark-theme: mat.define-dark-theme(

#Material ui dark mode switch how to#

In case you’re wondering how to layout components using the awesome Flex Layout library, check out my other post on creating a responsive card grid here.ĭo you want to use colors not there in the material design color palettes? You can create a theme with custom colors using this super useful online tool and just copy paste the generated theme in your styles as above! Add dark mode custom themeįor adding the dark mode theme, we just need to add an alternate theme to the theme file.

#Material ui dark mode switch code#

Feel free to customize as you want (the code link is available at the end of this post). I’ve just added some basic material components, so we can see the effect of the theme changes. This will be our default ‘light’ theme and looks like this. In our case, according to the theme above, we have a teal color as the primary color, pink as the accent color and red as the warn color. For more details, please refer to the material design color page. The colors are actually fetched from material design palettes which consist of 19 base colors and their light, dark and contrast variations. The important bits here are the primary, accent and warn colors. Warn: mat.all-component-themes($angular-default-theme) Īdd this to the styles.scss file of your project. $angular-default-theme: mat.define-light-theme( $angular-warn: mat.define-palette(mat.$red-palette) $angular-accent: mat.define-palette(mat.$pink-palette, A200, A100, A400) $angular-primary: mat.define-palette(mat.$teal-palette, 500, 100, 900) A sample custom theme looks like the as mat.core() But for adding a dark mode, you need to add a custom theme file instead. The Angular Material components library comes bundled with a few themes which we can use for your app. Step 1: Add a custom angular material theme If you’d like to read the tutorial, continue below 🙂