theming-angular-material

KO | EN

gitlite — search

#javascript #hacktoberfest #llm #go #rust #linux #macos #windows #cli #kubernetes #ios #mcp #openai #open-source

theming-angular-material

(★ 10)

Material for the course "Theming Angular and Material - The missing guide"

theming-angular-material Latest Version Download

Download Latest Version (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# Theming Angular and Material MD3 - The missing guide
![thumbnail](https://raw.githubusercontent.com/kobi-hari-udemy/theming-angular-material/main/slides/thumbnail.png)

## Hello
This repository contains the material for the *UDEMY* course
> [Theming Angular and Material - The missing guide]()

In this repository you can find all material for the course

## Courses in **The missing guide** Series:
* [Modern Angular with Signals - The missing guide](https://www.udemy.com/course/modern-angular-with-signals-the-missing-guide/?referralCode=D6E6DCE04E9A41ADC517)
* [NgRx Signal Store - The missing guide](https://www.udemy.com/course/ngrx-signal-store-the-missing-guide/?referralCode=05384AF83051655A1C59)

## Extra meterial
* [Checklist for angular material apps](./materia-todo.md)

## Practice Exercises on StackBlitz

### Section 2 - CSS Essentials for Building a Theme

* Practice 01 - Custom properties and `var` function
  * [Github](https://github.com/kobi-hari-udemy/theming-angular-material/tree/main/practice/01.%20fun-with-css-custom-props)
  * [StackBlitz](https://stackblitz.com/fork/github/kobi-hari-udemy/theming-angular-material/tree/main/practice/01.%20fun-with-css-custom-props?title=Custom%20CSS%20Properties&file=README.md)

* Practice 02 - Palettes using RGB
  * [GitHub](https://github.com/kobi-hari-udemy/theming-angular-material/tree/main/practice/02.%20colors-spaces)
  * [StackBlitz](https://stackblitz.com/fork/github/kobi-hari-udemy/theming-angular-material/tree/main/practice/02.%20colors-spaces?title=RGB%20Palette&file=README.md)

* Practice 3 - Palettes using HSL
  * [GitHub](https://github.com/kobi-hari-udemy/theming-angular-material/tree/main/practice/03.%20color-spaces-hsl)
  * [StackBlitz](https://stackblitz.com/fork/github/kobi-hari-udemy/theming-angular-material/tree/main/practice/03.%20color-spaces-hsl?title=HSL%20Palette&file=README.md)

* Practice 4 - Palettes using OKLCH
  * [GitHub](https://github.com/kobi-hari-udemy/theming-angular-material/tree/main/practice/04.%20color-spaces-oklch)
  * [StackBlitz](https://stackblitz.com/fork/github/kobi-hari-udemy/theming-angular-material/tree/main/practice/04.%20color-spaces-oklch?title=OKLCH%20Palette&file=README.md)

### Section 3 - Dynamic and Adaptive Themes using CSS
* Practice 5 - The `color-mix` function
  * [GitHub](https://github.com/kobi-hari-udemy/theming-angular-material/tree/main/practice/05.%20color-spaces-mix-color)
  * [StackBlitz](https://stackblitz.com/fork/github/kobi-hari-udemy/theming-angular-material/tree/main/practice/05.%20color-spaces-mix-color?title=Palettes%20using%20color-mix&file=README.md)
* Practice 6 - Palettes using relative colors
  * [GitHub](https://github.com/kobi-hari-udemy/theming-angular-material/tree/main/practice/06.%20color-spaces-relative-colors)
  * [StackBlitz](https://stackblitz.com/fork/github/kobi-hari-udemy/theming-angular-material/tree/main/practice/06.%20color-spaces-relative-colors?title=Palettes%20using%20relative%20colors&file=README.md)
* Practice 7 - Supporting light and dark mode
  * [GitHub](https://github.com/kobi-hari-udemy/theming-angular-material/tree/main/practice/07.%20color-spaces-schemes)
  * [StackBlitz](https://stackblitz.com/fork/github/kobi-hari-udemy/theming-angular-material/tree/main/practice/07.%20color-spaces-schemes?title=Light%20and%20Dark%20Modes&file=README.md)

### Section 4 - Exercise Project - Theming an application using CSS
* Practice 8 - The **Skills** Application
  * [GitHub](https://github.com/kobi-hari-udemy/theming-angular-material/tree/main/practice/08.%20skills-app-theme)
  * [StackBlitz](https://stackblitz.com/fork/github/kobi-hari-udemy/theming-angular-material/tree/main/practice/08.%20skills-app-theme?title=Theme%20Skills%20App&file=README.md)

### Section 5 - ScSS Essentials for Theming
* Practice 9 - Playground for the entire section
  * [GitHub](https://github.com/kobi-hari-udemy/theming-angular-material/tree/main/practice/09.%20scss-playground)
  * [StackBlitz](https://stackblitz.com/fork/github/kobi-hari-udemy/theming-angular-material/tree/main/practice/09.%20scss-playground?title=ScSS%20Playground&file=scss/styles.scss)

### Section 6 - Theming Angular Applications
* Practice 10 - This section's project
  * [GitHub](https://github.com/kobi-hari-udemy/theming-angular-material/tree/main/practice/10.%20tech-blog-theming)
  * [StackBlitz](https://stackblitz.com/fork/github/kobi-hari-udemy/theming-angular-material/tree/main/practice/10.%20tech-blog-theming?title=Themeable%20Applications&file=README.md)

### Section 7 - Introduction to Angular Material Theming
* Practice 11 - Getting started with Angular Material
  * [GitHub](https://github.com/kobi-hari-udemy/theming-angular-material/tree/main/practice/11.%20material-theming-setup)
  * [StackBlitz](https://stackblitz.com/fork/github/kobi-hari-udemy/theming-angular-material/tree/main/practice/11.%20material-theming-setup?title=Besic%20Theming&file=README.md)
* Practice 12 - Scoped Themes
  * [GitHub](https://github.com/kobi-hari-udemy/theming-angular-material/tree/main/practice/12.%20material-theming-scoped-themes)
  * [StackBlitz](https://stackblitz.com/fork/github/kobi-hari-udemy/theming-angular-material/tree/main/practice/12.%20material-theming-scoped-themes?title=Scoped%20Themes&file=README.md)
* Practice 13 - Shadows and Density
  * [GitHub](https://github.com/kobi-hari-udemy/theming-angular-material/tree/main/practice/13.%20material-theming-density-shadows)
  * [StackBlitz](https://stackblitz.com/fork/github/kobi-hari-udemy/theming-angular-material/tree/main/practice/13.%20material-theming-density-shadows?title=Shadows%20and%20Density&file=README.md)

### Section 8 - Advanced Customization in Angular Material
* Practice 14 - Theme Overrides
  * [GitHub](https://github.com/kobi-hari-udemy/theming-angular-material/tree/main/practice/14.%20material-customization-theme-overrides)
  * [StackBlitz](https://stackblitz.com/fork/github/kobi-hari-udemy/theming-angular-material/tree/main/practice/14.%20material-customization-theme-overrides?title=Theme%20Overrides&file=README.md)
* Practice 15 - Component Overrides
  * [GitHub](https://github.com/kobi-hari-udemy/theming-angular-material/tree/main/practice/15.%20material-customization-component-overrides)
  * [StackBlitz](https://stackblitz.com/fork/github/kobi-hari-udemy/theming-angular-material/tree/main/practice/15.%20material-customization-component-overrides?title=Component%20Overrides&file=README.md)
* Practice 16 - Accent and Warn buttons
  * [GitHub](https://github.com/kobi-hari-udemy/theming-angular-material/tree/main/practice/16.%20material-customization-accent-button)
  * [StackBlitz](https://stackblitz.com/fork/github/kobi-hari-udemy/theming-angular-material/tree/main/practice/16.%20material-customization-accent-button?title=Themed%20Buttons&file=README.md)

### Section 9 - Typography and Iconography in Angular Material MD3
* Practice 17 - Basic Typography
  * [Github](https://github.com/kobi-hari-udemy/theming-angular-material/tree/main/practice/17.%20material-customization-typography)
  * [StackBlitz](https://stackblitz.com/fork/github/kobi-hari-udemy/theming-angular-material/tree/main/practice/17.%20material-customization-typography?title=Basic%20Typography&file=README.md)
* Practice 18 - Icons and Font Sets
  * [GitHub](https://github.com/kobi-hari-udemy/theming-angular-material/tree/main/practice/18.%20material-customization-icons)
  * [StackBlitz](https://stackblitz.com/fork/github/kobi-hari-udemy/theming-angular-material/tree/main/practice/18.%20material-customization-icons?title=Icons%20and%20Font%20Sets&file=README.md)
* Practice 19 - Symbols
  * [GitHub](https://github.com/kobi-hari-udemy/theming-angular-material/tree/main/practice/19.%20material-customization-symbols)
  * [StackBlitz](https://stackblitz.com/fork/github/kobi-hari-udemy/theming-angular-material/tree/main/practice/19.%20material-customization-symbols?title=Symbols%20and%20Font%20Variations&file=README.md)
* Practice 20 - SVG Icons
  * [GitHub](https://github.com/kobi-hari-udemy/theming-angular-material/tree/main/practice/20.%20material-customization-svg-icons)
  * [StackBlitz](https://stackblitz.com/fork/github/kobi-hari-udemy/theming-angular-material/tree/main/practice/20.%20material-customization-svg-icons?title=Custom%20SVG%20Icons&file=README.md)

theming-angular-material

theming-angular-material Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

theming-angular-material

theming-angular-material Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

Download README