Feature: Add Angular Material UI to the App and Set Up Theming with Media Queries

[esteecodes]

Type of feature

✨ Feature

Description

Add Angular Material UI to the existing AnalogJS app to enhance the UI components and set up theming using media queries for responsive and dynamic themes. The theme should adapt based on the user's device settings (e.g., light or dark mode).

My Video Tutorial on setting up Theming in AnalogJS

Tasks:

1. Install Angular Material UI

   • Add Angular Material to the project by running:

     ng add @angular/material

   • Follow the prompts to configure default themes and animations.

2. Set Up Global Theming

   • Modify the global styles to include theming options (e.g., light and dark mode).

3. Theming with Media Queries

   • Use CSS media queries to automatically detect the user's system preference for light or dark mode.
   • In the theme.scss file, set up media queries like:

     @media (prefers-color-scheme: dark) {
       // Apply dark theme styles
     }
     
     @media (prefers-color-scheme: light) {
       // Apply light theme styles
     }

   • Ensure the theme switches dynamically based on the user's system settings without needing a manual toggle.

4. Test Theming

• Use browser developer tools (e.g., Chrome DevTools, Firefox Developer Tools) to emulate light and dark modes via rendering emulation. This allows you to test the theme switching without needing actual device settings.
  • In Chrome DevTools, for example:
    • Open DevTools.
    • Go to the Rendering tab.
    • Under Emulate CSS media feature prefers-color-scheme, switch between light and dark to see the theme changes in real time.
  • Ensure that the theme switches correctly between light and dark modes using the browser emulation.

---

Expected Outcome:

Angular Material UI should be installed and integrated into the app with theming fully set up. The app should automatically switch between light and dark themes based on the user's system preferences, and all Angular Material components should reflect the selected theme. Theming should be responsive and adaptive through the use of media queries.

Additional context

No response

I would be willing to submit a PR to fix this issue

• Yes and I have read the Contribution Guide and I agree to follow this project's Code of Conduct
• No

[github-actions]

Thanks for the issue, our team will look into it as soon as possible! If you would like to work on this issue, please wait for us to decide if it's ready. The issue will be ready to work on once we remove the "needs triage" label.

For full info on how to contribute, please check out our contributors guide.