Angular Material Theming color

🎨 Angular Material Theming - A Step-by-Step Guide

Hey there, coding wizards! 🧙‍♂️ Ready to add some serious style to your Angular app? Let’s explore Angular Material Theming step by step and make your UI stunning! ✨

---

📌 Start Here: Learn the Basics

Before we begin, check out these essential resources on Angular Material:

1️⃣ Components Overview 👉 Material Components
2️⃣ Theming Basics 👉 Material Theming
3️⃣ In-Depth Theming Guide 👉 Complete Theming Guide

---

⚙️ Hands-on: Create an Angular Project with Material

Follow these quick steps to set up your Angular app with Material theming! 🚀

🛠️ Step 1: Create a New Angular App

Run this command in your terminal:

ng new my-app --style=scss --defaults

👉 This will set up an Angular app with SCSS as the default styling.

---

🎨 Step 2: Add Angular Material

Install Angular Material with this command:

ng add @angular/material

✔️ Select CUSTOM for the theme.
✔️ Choose Yes (Y) for typography.
✔️ Choose Yes (Y) for animations.

---

🌈 Step 3: Generate a Custom Theme

💡 Create a custom Material theme with:

ng g @angular/material:theme-color

✔️ Choose colors:

• Primary color: #00796B (A cool teal shade 🌿).
• Secondary, Tertiary, Neutral colors: Pick anything you like!
  ✔️ Set the directory: src/app/theme/greentheme
  ✔️ Skip SCSS file: We want a CSS file instead.

---

🎯 Step 4: Apply Your Theme

Modify styles.scss

1️⃣ Comment out the default Material theme import

// @use "@angular/material" as mat;

2️⃣ Add your custom theme import:

@import "./app/theme/greentheme.css";

---

📌 Step 5: Update Your UI with Themed Components

Modify app.component.html

Replace the contents of app.component.html with:

<h1>Angular Material Color Theme Demo</h1>

<section>
  <div class="example-label">Basic</div>
  <div class="example-button-row">
    <button mat-button>Basic</button>
    <button mat-button disabled>Disabled</button>
    <a mat-button href="https://www.google.com/" target="_blank">Link</a>
  </div>
</section>

<section>
  <div class="example-label">Raised</div>
  <div class="example-button-row">
    <button mat-raised-button>Basic</button>
    <button mat-raised-button disabled>Disabled</button>
    <a mat-raised-button href="https://www.google.com/" target="_blank">Link</a>
  </div>
</section>

<section>
  <div class="example-label">Stroked</div>
  <div class="example-button-row">
    <button mat-stroked-button>Basic</button>
    <button mat-stroked-button disabled>Disabled</button>
    <a mat-stroked-button href="https://www.google.com/" target="_blank">Link</a>
  </div>
</section>

🔥 Now, your app will have styled buttons using your custom theme!

---

⚡ Step 6: Update app.component.ts

Modify the contents of app.component.ts to import the required Material modules:

import { RouterOutlet } from '@angular/router';
import { MatButtonModule } from '@angular/material/button';
import { MatIconModule } from '@angular/material/icon';
import { Component } from '@angular/core';
import { MatDividerModule } from '@angular/material/divider';

@Component({
  selector: 'app-root',
  imports: [RouterOutlet, MatButtonModule, MatIconModule, MatDividerModule],
  templateUrl: './app.component.html',
  styleUrl: './app.component.scss'
})
export class AppComponent {
  title = 'my-app';
}

---

🚀 Step 7: Run and Enjoy Your Themed App!

Once everything is set, launch your app:

ng serve -o

🔥 This opens the app in your browser with your custom Material theme applied! 🎨

---

🎉 Wrapping Up

Congrats! 🎉 You’ve successfully:
✅ Created an Angular app with Material.
✅ Installed Material and customized a theme.
✅ Applied the theme to buttons and UI elements.

👨‍🎨 Next Steps?
🔹 Try changing the theme colors.
🔹 Explore Material Typography and Density.
🔹 Add more Material components (cards, toolbars, forms).

🚀 Go ahead, make your app look amazing! ✨ Happy coding! 🎨🔥