Theming Angular 19-22 and Material MD3 - The missing guide

Explore CSS custom properties to create reusable style variables and learn how colors are built, mixed, and described in human-friendly terms for consistent theming.

Explore custom properties in CSS, detailing the property value engine, the visual renderer, and how cascading, specificity, and inheritance shape their values.

Learn how to define and reuse a single css custom property with the var function to standardize colors across a UI, including fallbacks and nested vars, enabling quick theme changes.

Explore how to use custom properties to decompose and reuse composite properties like box shadows and gradients, enabling targeted changes such as hover offsets without repetition.

Engage in hands-on practice with 'try it yourself' lectures, using demos and readme guides to reinforce skills and apply a custom sass property to the primary color.

Understand how a color system defines color relationships with a main color, grayscale, and shades, and how themes assemble palettes for primary, neutral, error, warning, success, and light/dark variations.

Understand color spaces as recipe-like systems for mixing and displaying colors consistently across devices. Explore RGB's red, green, and blue primaries and how additive light contrasts with subtractive paint blending.

Demonstrate building color themes with a CSS custom property palette and rgb values, apply multiple palettes to a card, and switch themes dynamically while exploring humanly intuitive color spaces.

Repeat the prior steps to add two new RGB palettes to the application and apply them to cards or the palettes shown.

Discover how the hsl color space uses hue, saturation, and lightness to build intuitive palettes, using a color wheel, Visual Studio Code color picker, and practical examples.

Try creating an alternative HSL color palette by adjusting nine colors while keeping color 50 fixed, and use the color picker to explore color spaces.

Demonstrate how HSL fails to deliver consistent brightness and introduce OKLCH color space for perceptual lightness, chroma, and hue. Note browser support (about 93.1% of browsers) and a Figma plugin for palettes.

Explore creating alternative color palettes in the OKLCH color space by adjusting hue while preserving brightness and chroma, using color pickers and palette generators to ensure a consistent, gamut-safe theme.

Explore how color spaces beyond rgb and hsl address accuracy, intuition, and gamut limits, from lch and oklch to hwb and lab, and their uses in screens and print.

Learn modern css color syntax, replacing comma separated rgb/hsl with space separated values and a slash for opacity; understand flexible hue values and alpha handling in rgb and hsl.

Learn how modern CSS color systems generate full palettes from a single primary color and enable runtime, automatic theme updates across light and dark modes, with granular theming for components.

Explore the color-mix function to dynamically blend colors at runtime, using css custom properties and bindings to create automatic palettes from a single base color.

Explore how color mixing works across RGB and HSL color spaces. Learn how math blends values and how hue handling and color space choice affect palettes.

Explore dynamic palette creation in CSS by deriving all hues from a single base color with color mix, reapplying calculations via a palette class, and enabling infinite runtime themes.

Explore building dynamic palettes with the color mix function in a hands-on playground, experiment with color systems and base colors, then apply techniques to adapt themes and palettes.

Learn to generate harmonious palettes with relative colors using the from keyword, anchoring on a base color and adjusting hue, saturation, lightness across hsl, rgb, and hex.

Use the calc function to derive new color values from an original color across HSL and RGB, generating lighter, darker, inverse, and three palettes from one base value.

Learn how to constrain color channels using min, max, and clamp in relative colors with the hsl system, preserving saturation and lighting while allowing flexible color choice.

Define a single base color to automatically generate three palettes, primary and two alternatives, then apply calculations universally across all elements to maintain harmonious, distinct hues and a cohesive theme.

Build dynamic palettes with relative colors using a playground, leveraging calc, min, max, and clamp to generate P10 to P90 palettes from a base color.

Use the color schema property to toggle light or dark modes and apply it at root or per subtree, allowing the site to follow the system color mode.

Explore how to adapt theme colors to light and dark modes with the prefers-color-scheme media query, reversing color palettes in css while noting limitations and a forthcoming alternative.

Implement the light-dark function to create maintainable color palettes that adapt to light and dark modes, replacing media queries and enabling single-value color decisions.

Practice adding color scheme support by using the color scheme property to toggle dark and light modes, reflect palette changes, and adapt to OS settings.

Transform grayscale CSS into a vibrant themed interface by generating neutral-primary palettes from a CSS property and applying semantic themes for success, warning, and critical messages in light/dark modes.

Convert a grayscale app into a themeable Angular 19 and Material MD3 project by building neutral and primary palettes with CSS custom properties, enabling color mode and status-driven notification colors.

Define and use two theme palettes—the primary and neutral—adjusting light and dark modes with CSS variables. Apply palette entries to UI elements such as scrollbar tracks and hover states.

Replace hard coded colors with palette entries across all components, starting with the toolbar and app CSS, while validating light and dark themes using primary and neutral palettes.

Set semantic palettes for notifications by changing the base color and deriving related shades for border, background, and timestamp, using dedicated classes for info, warning, error, and success.

Explore scss features that matter for theming, including variables, mixins, and nesting, and see how they relate to modern css capabilities and Angular Material theming.

Explore how style preprocessors like SCSS and Sass extend CSS with variables and features, compile to CSS, and support theming in Angular Material projects.

Code along with the scss playground to see how sass compiles into css in real time. Learn to install, run npm start, and preview changes in stackblitz or localhost:8080.

Explore nesting in sass by targeting a specific section with selectors and using space and descendant combinators. Learn to mirror HTML hierarchy in your sass for clearer styles within component.

Explore the ampersand (parent) selector in Sass to attach selectors without spaces, avoid the default descendant combinator, and craft context-aware hover rules with right to left and debugging notes.

Define Sass variables with a leading dollar and dash or underscore, then compare global and local scopes, the global flag, and how Sass variables compile to values versus CSS variables.

Debug scss by printing console-like messages during compilation to inspect variables, colors, and the current parent selector, and use warnings and errors to guide fixes before generating css.

Learn how to combine Sass variables with CSS custom properties using string interpolation to inject variable values, not names, into properties, names, and selectors.

Explore how scss functions work, including built-in and custom functions, the compile-time evaluation versus runtime behavior, and using at function and at return to define reusable logic.

Explore built in modules in SAS, focusing on the colors module, using the use rule to import and lighten colors, and compare with CSS color-mix for dynamic results.

Learn lists in sass and how to define, loop, and manipulate them with the list module. Use indexing, join, append, and length to generate dynamic classes for colors and spacings.

Explore maps in scss to store key-value pairs for theming, generate custom css properties via interpolation, and learn map get, map set, map merge, and immutability concepts.

Master scss mixins to generate css blocks and reuse styles across the project. Define mixins with parameters and use include to theme buttons with color variations.

Discover flow control in scss with @if and @for to generate css at compile time. Create a theme-based button variants mixin and a heading sizes loop for h1–h6.

Organize SAS code with modules and partials, create custom modules with members and forward rules, and use mixins to generate css from partials while avoiding side effects and enabling reuse.

Establish a SAS foundation by exploring variables, functions, nesting modules, and mixins, building familiarity for theming and creating flexible, maintainable styles.

Transform a plain Angular app into a dynamic, Sass-based theming system without Angular Material, enabling light and dark modes with a reusable design system and a theme switching service.

Explore dynamic theming in an Angular 19 and Material MD3 project. Automate css custom properties with sass, implement a runtime theme switcher, and build reusable, theme-aware blog components.

Refactor the color system by deriving neutral, primary, and accent palettes from two base colors with relative color syntax and the light/dark function for theme-wide control.

Set up a structured scss environment by placing partials in source/styles and configuring angular.json includePaths. Restart ng serve to apply changes, verify a test partial with mixins and transparent parcels.

Move global styles into sass mixins and partials to create reusable back button and syntax highlight styles; shrink the main style file and prepare a color system for future automation.

Develop a dynamic color system with three palettes—neutral, primary, and accent—where the theme provides hue and the system fixes saturation and brightness, enabling light and dark themes via sass mixins.

Demonstrates automating a color system in Sass by using loops and maps to generate gray, primary, and accent levels from external data, via private and public mixins.

Automate the color system with a reusable sass mixin that generates palette entries for gray, primary, and accent levels in light and dark schemes. Apply themes via body class.

Create an Angular theme service to manage three CSS parameters on the body, controlling primary and accent colors and a light, dark, or system scheme, using signals.

Apply the current theme state to the DOM by updating the body’s primary, accent, and color-scheme properties via effects that respond to theme signals using an injected document.

Inject the theme service into the app component and bind a dynamic color selector and three scheme buttons to read and update the current theme.

Learn how design tokens define visuals as named values and use a token hierarchy—reference, system, and component tokens—to create themeable, reusable components like the fav button with css custom properties.

Explore how design tokens drive theming for Angular Material MD3 widgets, from color system and shadows to component tokens and private implementation tokens, enabling customizable, reusable widgets.

Develop a reusable sass-based color system with dynamic theming. Share public design tokens for external use while widgets follow the theme with private tokens, preparing to explore angular material theming.

Explore the md3-based angular material theming system built on design tokens. Learn to set up, customize, and run multiple themes side by side without breaking layouts.

Explore material design, Google's design system for layouts, color, motion, typography, iconography, and elevations, and see how Angular Material implements these guidelines with evolving M2 and M3 documentation.

Explore the evolution of material design from md1 to md3, including material you, design tokens, and responsive theming. See how angular material 19 adopts md3 with token-based theming across components.

Learn how to add Angular Material to a fresh Angular 19.2 project with ng add, set a custom Sass theme, enable topography, and understand the Material and CDK packages.

Improve intellisense for Angular Material imports by configuring tsconfig with the types and type routes options, enabling auto import of mat button and mat icon modules.

Configure the theme with the mat.theme mixin by supplying a color map and a primary palette. Add secondary and tertiary palettes, set Roboto, and adjust density for md3 theming.

Compare MD3 themes with earlier versions, showing how web design tokens and system design tokens replace the need for multiple mixins. See how components derive styling at runtime from tokens.

Learn to style custom components with Angular Material system design tokens via CSS variables and the var() function, covering colors, typography, and elevation for light and dark themes.

Set up angular md3 theming using system tokens and palettes; apply the tertiary color to h1, the secondary to h2, and use spring green and yellow palettes.

Explore Angular Material's theme palettes, how each palette includes primary, secondary, neutral, neutral variant, and error, and how patch palette merges and system variables affect tokens.

Explore angular material color tokens, uncovering 40 documented and undocumented color system variables, including contrast and on surface values, and how themes and the light dark function generate palettes.

Learn how angular material 19 supports both light and dark modes in a single theme using color scheme tokens, the light dark function, and optional theme type for legacy browsers.

Scope a theme with the math theme mixin inside a selector to apply design tokens for color and enable multiple simultaneous themes like azure, spring green, and rose.

Define two scoped themes in styles, theme red and theme green, then apply them to card groups to colorize content using design tokens and mat button.

Explore how to apply theme shadows and elevation tokens in Angular Material 19 to cards, including six shadow levels from system variables, hover effects, and host selector usage.

Discover how density controls spacing from 0 to -5 in Angular Material, note it's component-level, not system-wide, and learn to patch with a custom padding token for alignment.

Practice shadows and density, add shadow to the card, declare a custom system density token, apply it to components, and vary density to observe layout changes.

Learn to create custom themes in angular material with md3, using schematics and design tokens to override colors, typography, elevation, and component styles like cards, toolbars, and buttons.

Learn why Angular Material uses the HCT color system and schematics to generate themes, enabling custom palettes and full control over primary, secondary, and neutral palettes.

Create a custom theme with Angular Material schematics by selecting a primary color via hex, generating a CSS theme file, and applying it to cards through a theme selector.

Learn to build custom themes with scss files, converting schematics to sass palettes and defining primary, secondary, and tertiary colors for Angular Material.

Explore adding custom system tokens by wrapping the Angular Material theme with a bespoke mixin in CSS or Sass, enabling more palette tokens for light and dark modes.

Learn to customize Angular Material components in MD3 by using design tokens and theme overrides, including partial theming, token-specific changes, and practical examples with toolbar, cards, buttons, and badges.

Explore theme overrides in material md3 by practicing token changes with the mat theme overrides mixin or a full theme replacement, using dev tools and Stackblitz.

Learn how Angular Material uses design tokens: system tokens and component tokens, and override the mat icon color with component tokens and the mat icon overrides mixin to customize icons.

Learn how to customize angular material md3 cards using tokens for color, typography, and shape; adjust container color, elevation, and card header elements through cascading styles and dev tools.

Customize the angular material toolbar by applying a light primary background and a medium primary foreground, styling icons with tokens and system variables, and exploring inherited typography.

Explore how to theme Angular Material buttons across a site using color palettes, tokens, and global theming, and learn to customize accent, primary, warn, error, and success states.

Practice selectors for color equals accent and color equals one, switch to tertiary or red palette, and apply it to app component buttons to validate md two md three theming.

Explore material typography patterns, customize type at the theme level, and self-host fonts for privacy. Then design icons with material symbols, CSS, and custom SVGs that adapt to your theme.

Material MD3 maps typography to five styles: display, headline, title, body, and label. They split into brand and plain text with uses for each, in Angular Material 19 and above.

Learn how Angular Material 19 uses design tokens to set typography, apply global fonts, and tailor tokens for body, display, and headline styles across components.

Configure typography by mapping a plane family for body text and a brand family for headlines, using Roboto for body and Segoe UI for display, with weights 100 and 700.

Practice typography theming in Angular Material by applying system design tokens, fixing the global paragraph rule, configuring h1, and using a two-font map with weights for text, buttons, and labels.

Learn to self-host fonts in your Angular app using the public folder by moving Roboto and Material Icons local files, configuring font-face, and updating styles to load from your site.

learn to self-host fonts with npm by installing roboto font face and material icons. update angular styles to load from node_modules and serve fonts from localhost.

Explore how Angular Material renders icons via the Material Icons font and ligatures, turning words into glyphs, with styles like outline, filled, rounded, sharp, and two tone.

Learn to use the mat-icon component with font sets to control icon size, alignment, and styles like outlined, round, and two tone in Angular Material.

Practice adjusting header icons in Material Design by canceling default sizes to avoid clipping and applying outline, default, and round font sets in the Material Icons package.

Explore material symbols in Angular Material, including how to use filled and outline icons, choose font sets (outlined, rounded, sharp), and adjust weight, grade, and optical size with CSS.

Focus on single symbols, remove material icons, and use css nth-of-type selectors to style the first, second, and third icons. Utilize font variation settings to adjust fill, weight, grad.

Replace all icons in an angular material md3 app with material symbols, apply a global symbol style, and implement a hover-to-fill interaction using font variation settings.

Create and register custom two-color SVG icons in Angular Material by extending the icon registry, using addSvgIcon, and initializing icons via an app initializer, with CSS styling via tokens.

Learn to make svg icons themeable by using design token-based fills, register a second icon, and replace the heart in the toolbar with sass-styled, scalable svg icons.

Learn to use the icon registry to alias font sets, create a symbol shortcut, and set a font class for material symbols, with options to add fonts like Font Awesome.

Learn to set up Angular Material MD3 with a customizable theme workflow, including Sass theming, palette selection, icon registry, and dynamic theme switching.

Master a reusable theming system for angular apps with css custom properties and light-dark schemes. Utilize sass features and angular material md3 theming to customize colors, typography, components, and icons.

Celebrate finishing the course, share feedback to help improve future angular and material md3 content, and explore the missing guide series with bonus lectures and coupon links for other courses.