There are several ways to handle the theme switch, here is how I did.
MATERIAL UI DARK MODE SWITCH CODE
This code so far defines both light and dark theme, but light theme is used by default. $fleet-dark-theme: mat-dark-theme($fleet-dark-primary, $fleet-dark-accent, angular-material-theme($fleet-light-theme) $fleet-dark-warn: mat-palette($mat-deep-orange) $fleet-dark-accent: mat-palette($mat-amber, 900) $fleet-dark-primary: mat-palette($mat-blue-grey) $fleet-light-theme: mat-light-theme($fleet-light-primary, $fleet-light-accent, $fleet-light-warn) $fleet-light-warn: mat-palette($mat-deep-orange) $fleet-light-accent: mat-palette($mat-amber) $fleet-light-primary: mat-palette($mat-indigo) I used the option “ custom theme” when installing Material on my project, hence the structure of my that code (auto-generated) which slightly differs from the one shown on the Material website. Here “fleet” refers to the name of my application, it would be something else for you. The documentation for basics is pretty good on the Material website. I’m not going through the setup of Material in an Angular project and the basic explanations about theming so we dive directly into the dark theme question. This code is in the styles.scss file, at the very bottom.
Here is the basic code for defining light (default, usually) and dark themes. Although theme management is pretty good implemented in Angular Material, I faced some issues which I’ll also share here (with the solutions I found). One of the goals UI-wise was to implement a dark theme switcher to my web app. 'intention' objects are provided, they will replace the defaults.For my graduation work of Bachelor degree in Computer Science, I chose to focus and put extra effort on UX/UI, because it used to be something I hated and really sucked at. You may override the default palette values by including a palette object as part of your theme. If you want to learn more about color, you can check out the color section. The default palette uses the shades prefixed with A ( A200, etc.) for the secondary intention,Īnd the un-prefixed shades for the other intentions. error - used to represent interface elements that the user should be made aware of.secondary - used to represent secondary interface elements for a user.primary - used to represent primary interface elements for a user.The theme exposes the following color intentions: The following sections cover the most important theme variables:Ī color intention is a mapping of a palette to a given intention within your application. Theme configuration variablesĬhanging the theme configuration variables is the most effective way to match Material-UI to your needs. You can learn more about this in the API section. So you need to make sure that MuiThemeProvider is a parent of the components you are trying to customize. MuiThemeProvider relies on the context feature of React to pass the theme down to the components, However, this is optional Material-UI components come with a default theme. If you wish to customize the theme, you need to use the MuiThemeProvider component in order to inject a theme into your application. By default, components use the light theme type. To promote greater consistency between apps, light and dark theme types are available to choose from. It allows you to customize all design aspects of your project in order to meet the specific needs of your business or brand. Themes let you apply a consistent tone to your app. The theme specifies the color of the components, darkness of the surfaces, level of shadow, appropriate opacity of ink elements, etc. You can change the colors, the typography and much more.
0 kommentar(er)
