Elevate Your User Experience: Building a Theme Switcher for Light and Dark Themes using Ionic Theme (Part 18) in Your Angular-15 Ionic-7 App

 Welcome back to our ongoing series on building a multiplatform application with Angular-15 and Ionic-7! In our previous articles, we covered a wide range of topics, including authentication, data management, task organization, calendar integration, event management, and media management. Today, in Part 18, we're diving into the realm of user interface customization by creating a theme switcher to toggle between light and dark themes using Ionic Theme.

User interface themes play a crucial role in defining the look and feel of an application. By incorporating a theme switcher in our Angular-15 Ionic-7 app, we can provide users with the ability to personalize their app experience by switching between light and dark themes. This functionality enhances user satisfaction and accessibility while allowing for visual customization.

In this installment, we'll guide you through the process of creating a theme switcher using the Ionic Theme in our app. We'll start by setting up the necessary dependencies and configurations to leverage the power of Ionic's built-in theming capabilities. We'll explore the concept of CSS variables and how they enable easy customization of various UI elements based on the selected theme.

Next, we'll demonstrate how to implement the theme switcher functionality, allowing users to toggle between light and dark themes seamlessly. We'll cover the necessary code modifications, event handling, and UI updates to reflect the chosen theme throughout the app. You'll learn how to apply different styles, colors, and effects based on the selected theme, ensuring a visually cohesive and personalized app experience.

Throughout this tutorial, we'll emphasize best practices for theme management, UI consistency, and accessibility. By the end of this article, you'll have a solid understanding of how to leverage Ionic Theme to create a theme switcher in your Angular-15 Ionic-7 app, empowering users to customize their app's appearance to their liking.

So, join us in Part 18 of our series as we embark on a journey into the realm of UI customization. Together, let's empower our app with a theme switcher, offering users the ability to toggle between light and dark themes and personalize their app experience. Get ready to elevate your app's aesthetics and enhance user satisfaction!

This is a rather simple one. I will create a switch button that will allow the users to switch between the light and dark theme. For this, I will first check the attribute that is responsible for defining the application’s color theme from the overall html code, and that is, color-theme. Next, I will remove the media queries, @media (prefers-color-scheme: dark), from the variable.scss file such that it can be changed via a custom function. For this, I will first create a toggle button from Ionic UI component referenced from Toggle | ion-toggle: Custom Toggle Button for Ionic Applications (ionicframework.com) in app.component.html file where I have the side menu in the following way:

<ion-footer>
      <ion-list lines="none">
        <ion-item class="ion-margin">
          <ion-toggle
            (ionChange)="onToggleColorTheme($event)"
            [enableOnOffLabels]="true"
            > Dark Mode</ion-toggle>
        </ion-item>
      </ion-list>
</ion-footer>

Next, I will write the logic in the onToggleColorTheme($event) method in app.component.ts in the following way:

// function to switch the theme
  onToggleColorTheme(event: any) {
    // console.log(event.detail.checked);
    if (event.detail.checked) {
      document.body.setAttribute('color-theme', 'dark');
    } else {
      document.body.setAttribute('color-theme', 'light');
    }

    // save the theme to local storage
    localStorage.setItem(
      'color-theme',
      document.body.getAttribute('color-theme')!
    );
  }

The above code defines a function called onToggleColorTheme that accepts an event parameter, which represents the state of the toggle button that the user interacts with. When the user toggles the button to the "on" state (i.e., the checked property is true), the function sets the color-theme attribute of the body element to 'dark'. Otherwise, it sets it to 'light'.

After setting the color-theme attribute, the function saves the theme to the local storage using the localStorage.setItem() method. The method takes two arguments: a key which is a string representing the name of the item to store, and a value which is the value to be stored. In this case, the key is 'color-theme', and the value is the current value of the color-theme attribute of the body element, which is retrieved using the getAttribute() method. The ! symbol at the end of the method call is a non-null assertion operator that tells TypeScript that the attribute value is not null or undefined to avoid Typescript errors. Figures 75 and 76 demonstrate this feature:

Figure 75: Side menu with Theme Switch

Figurer 76: Theme switched to Dark Theme

Conclusion

We hope this tutorial has provided you with valuable insights and practical knowledge on creating a theme switcher using Ionic Theme in your Angular-15 Ionic-7 app. By embracing the power of theme customization, you can offer users a personalized and visually pleasing app experience.

Thank you for joining us on this journey as we explored the fascinating world of app development with Angular-15, Ionic-7, and theme customization. Stay tuned for future installments where we will continue to explore new features and functionalities to make our app even more robust and user-friendly.

Happy coding!