This is not the main point of this article, but still a bit of explanation (the Material documentation is pretty solid): the toggle has a handler (#lightDarkToggle) to retrieve its full state, which I pass to a click event. In my header component, I chose to use a toggle to switch from light to dark theme, and the other way around. The template of my app has a tag to display the app-header and an event binding: //Ī toggle to switch from light to dark theme Unnecessary parts of the code have been removed for brevity.įirst, my app has a component “header”, which is a child of my “app”. I chose to use a Material “slide toggle”. There are several ways to handle the theme switch, here is how I did. 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. ![]() 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.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |