آموزش راهنمای جامع و کاربردی تم دهی به انگولار 19 و Material MD3 - آخرین آپدیت

سرفصل ها و درس ها

مقدمه Introduction

• مقدمه Introduction

• آنچه باید بدانید What you need to know

• تمرین آموخته‌ها Practicing what you learn

ویژگی‌های مدرن CSS برای پوسته‌سازی Modern CSS Features for Theming

• مقدمه‌ای بر CSS مدرن Introduction to modern CSS

• ویژگی‌های سفارشی در CSS Custom Properties in CSS

• اعمال ویژگی سفارشی با استفاده از تابع `var` Applying custom property using the `var` function

• استفاده از `var` در ویژگی‌های ترکیبی Using `var` in composite properties

• خودتان امتحان کنید: تابع 'var' Try it yourself: The 'var' function

• سیستم رنگ: پالت‌ها و تم‌ها Color System: Palettes and Themes

• مقدمه‌ای بر فضاهای رنگ: RGB Introduction to Color Spaces: RGB

• نمایش پالت‌های RGB Demonstrating RGB palettes

• خودتان امتحان کنید: پالت‌های RGB Try it yourself: RGB Palettes

• یک فضای رنگ برای انسان‌ها: HSL A color space for humans: HSL

• خودتان امتحان کنید: پالت‌های HSL Try if yourself - HSL Palettes

• فضای رنگ برای تم‌ها: OKLCH A color space for themes: OKLCH

• خودتان امتحان کنید: OKLCH Try it yourself: OKLCH

• فضاهای رنگ بیشتر More Color spaces

• نحو جدید رنگ و آلفا New color and alpha syntax

تم‌های پویا با استفاده از CSS Dynamic Themes using CSS

• مقدمه‌ای بر تم‌های پویا Introduction to dynamic themes

• تابع `color-mix` The `color-mix` function

• ترکیب در فضاهای رنگ مختلف Mixing in different color spaces

• پالت پویا با استفاده از color-mix Dynamic palette using color-mix

• خودتان امتحان کنید: color-mix Try it yourself: color-mix

• رنگ‌های نسبی با استفاده از کلمه کلیدی 'from' Relative colors using the 'from' keyword

• استفاده از تابع calc با رنگ‌های نسبی Using the calc function with relative colors

• استفاده از min، max و clamp با رنگ‌های نسبی Using min, max, and clamp with relative colors

• ساخت پالت‌ها و اعمال یک تم Building palettes and applying a theme

• خودتان امتحان کنید: پالت‌ها با استفاده از رنگ‌های نسبی Try it yourself - Palettes using Relative Colors

• روشن و تاریک: ویژگی `color-scheme` Light and Dark: The `color-sheme` property

• رنگ‌های شرطی: پرس‌وجوی رسانه‌ای `prefers-color-scheme` Conditional Colors: The `prefers-color-sheme` media query

• رنگ‌های شرطی: تابع `light-dark` Conditional Colors: The `light-dark` function

• خودتان امتحان کنید: طرح‌های رنگی تیره و روشن Try it yourself: Dark and Light Color Schemes

همراه با کد - تم‌بندی یک برنامه با استفاده از CSS Code Along - theming an Application using CSS

• مقدمه تمرین Exercise Introduction

• مقدمه‌ای بر برنامه Introduction to the application

• ایجاد ویژگی‌های سفارشی رنگ Creating color custom properties

• ایجاد ورودی‌های پالت Creating palette entires

• استفاده از ورودی‌های پالت در کامپوننت‌ها Using palette entries in the components

• تنظیم پالت‌های معنایی برای اعلان‌ها Setting semantic palettes for notifications

ملزومات Scss برای پوسته‌سازی Scss essentials for Theming

• مقدمه‌ای بر Scss Introduction to Scss

• پیش‌پردازنده‌های استایل چه هستند؟ What are style preprocessors?

• همراه با کد: زمین بازی Scss ما Code along: Our Scss Playground

• تو در تو نویسی در Scss Nesting in Scss

• انتخابگر '&' (والد) The '&' (parent) selector

• استفاده از متغیرهای Scss Using Scss variables

• اشکال‌زدایی در ScSS Debugging in ScSS

• درون‌یابی عبارت Expression interpolation

• توابع در Scss Functions in Scss

• استفاده از ماژول‌های داخلی Using built in modules

• لیست‌ها در Scss Lists in Scss

• مپ‌ها در Scss Maps in Scss

• میکس‌این‌ها در Scss Mixins in Scss

• کنترل جریان در Scss با استفاده از if@ و for@ Flow control in Scss using @if and @for

• ماژول‌ها و پارشال‌ها Modules and Partials

• خلاصه Summary

همراه با کد - تم‌بندی برنامه‌های Angular Code Along - Theming Angular applications

• مقدمه‌ای بر تم‌بندی در Angular Introcution to Theming in Angular

• آشنایی با پروژه نمایشی ما Getting familiar with our demo project

• بازسازی ورودی‌های پالت برای استفاده از رنگ‌های نسبی Refactoring palette entries to use relative colors

• تنظیم پیکربندی Scss Setting up Scss configuration

• انتقال استایل‌های سراسری به میکس‌این‌ها Moving global styles to mixins

• پیاده‌سازی سیستم رنگ و میکس‌این‌های تم Implementing the color system and theme mixins

• خودکارسازی میکس‌این سیستم رنگ - قسمت 1 Automating the color system mixin -Part 1

• خودکارسازی میکس‌این سیستم رنگ - قسمت 2 Automating the color system mixin - Part 2

• ایجاد سرویس تم Creating Theme service

• اعمال حالت تم بر روی DOM Applying the Theme State on the DOM

• اتصال رابط کاربری انتخاب تم به سرویس Connecting theme selection UI to the service

• درک توکن‌های طراحی Understanding Design tokens

• استایل‌دهی ویجت‌ها بر اساس توکن‌های طراحی Styling widgets based on Design Tokens

• نکته! The catch!

مقدمه‌ای بر تم‌بندی Angular Material Introduction to Angular Material Theming

• مقدمه‌ای بر تم‌بندی Angular Material Introduction to Angular Material Theming

• داستان Material Design The story of Material Design

• MD2 و MD3 به چه معناست؟ What does MD2 and MD3 mean?

• شروع کار با Angular Material Getting started with Angular Material

• بهبود IntelliSense برای وارد کردن‌های Angular Material Improving IntelliSense for Angular Material Imports

• استفاده از میکس‌این mat.theme Using the mat.theme mixin

• مقایسه تم‌های MD3 با نسخه‌های قبلی Comparing MD3 themes with previous versions

• استفاده از توکن‌های طراحی سیستم Using system design tokens

• امتحان کنید: تنظیم تم‌ها و استفاده از توکن‌های وب Try it: Setting up themes and using web tokens

• پالت‌های تم The theme palettes

• متغیرهای سیستم رنگ The color system variables

• ویژگی theme-type The theme-type property

• تم‌های سراسری و محدود Global and scoped themes

• امتحان کنید: تم‌های محدود Try it: Scoped Themes

• استفاده از سایه‌ها و ارتفاع تم Using the theme shadows and elevation

• درک تراکم تم Understanding theme density

• امتحان کنید: تراکم و سایه‌های تم Try it: Theme density and shadows

سفارشی‌سازی‌های پیشرفته در Angular Material Advanced Customizations in Angular Material

• مقدمه‌ای بر سفارشی‌سازی در Angular Material Introduction to Customization in Angular Material

• چرا به اسکماتیک‌ها برای تولید تم نیاز داریم؟ Why we need schematics to generate themes?

• اسکماتیک‌های تم سفارشی The custom theme scematics

• تم‌های سفارشی با فایل‌های SCSS Custom themes with SCSS files

• اضافه کردن توکن‌های سفارشی سیستم با استفاده از میکس‌این Wrapper Adding custom system tokens using wrapper mixin

• لغو کردن تم Theme Overrides

• امتحان کنید: لغو کردن تم Try it - Theme Overrides

• لغو کردن توکن‌های کامپوننت Material Overriding Material component tokens

• سفارشی‌سازی کامپوننت Card Customizing the Card component

• امتحان کنید: سفارشی‌سازی نوار ابزار Try it - Customize the toolbar

• چگونه دکمه را در رنگ‌های تاکیدی یا هشدار نمایش دهیم؟ How to display button in accent or warn colors?

• امتحان کنید: دکمه‌های تاکیدی و هشدار Try it: Accent and Warn buttons

تایپوگرافی و آیکونوگرافی در Angular Material MD3 Typography and Iconograpy in Anuglar Material MD3

• مقدمه‌ای بر تایپوگرافی و آیکون‌ها Introduction to Typography and Icons

• استایل‌های تایپوگرافی در Material MD3 Typography styles in Material MD3

• استفاده از متغیرهای سیستم تایپوگرافی Using Typography system variables

• سفارشی‌سازی تایپوگرافی تم Customizing the theme typography

• امتحان کنید: تایپوگرافی Try it: Typography

• میزبانی فونت‌ها در پوشه عمومی خودمان Self Hosting fonts in our public folder

• میزبانی فونت‌ها با استفاده از npm Self hosting fonts using npm

• درک سیستم آیکون‌ها در Material Understanding the icons system in Material

• درک مجموعه‌های فونت mat-icon Understanding mat-icon Font Sets

• امتحان کنید: آیکون‌ها و مجموعه‌های فونت Try it - Icons and Font Sets

• نمادهای جدید "Material Symbols"! The new "Material Symbols"!

• سفارشی‌سازی تغییرات نماد Customizing symbol variations

• امتحان کنید: نمادهای Material Try it - Material Symbols

• آیکون‌های SVG سفارشی Custom SVG Icons

• امتحان کنید: آیکون‌های SVG سفارشی Try it - Custom SVG Icons

• ویژگی‌های دیگر Icon Registry Other Icon Registry features

خلاصه Summary

• Angular Material MD3 - چک لیست Angular Material MD3 - Checklist

• خلاصه دوره Course Summary

• سخنان پایانی مهم Important final words

• سخنرانی جایزه Bonus Lecture