Modern Web Apps Theming – Showcase in Angular Material

Main Speaker

Learning Tracks

Course ID

52011

Date

14-07-2025

Time

Daily seminar
9:00-16:30

Location

Daniel Hotel, 60 Ramat Yam st. Herzliya

Overview

Has this ever happened to you? You build a beautiful, fast web app, and then someone from the team says, “Can we make it dark mode?” or “Can we change the main color to green instead of blue?” Suddenly, a small request turns into a big mess—hunting down hardcoded styles all over your code. This seminar is here to help. You’ll learn simple, modern ways to theme web apps using modern CSS features like relative colors, color-scheme, and design tokens. We’ll demo it on an Angular Material 20 app, but the ideas work in any web project—no need to know Angular in advance. We’ll see how to make flexible themes that can change instantly—switching colors, toggling light/dark mode, or adjusting the whole design system—with just a few changes. If you’ve ever found theming your app frustrating, this seminar will show you a better way.

Who Should Attend

  • Web developers working with CSS and JavaScript frameworks (Angular, React)
  • UI/UX designers looking to understand implementation techniques
  • Developers and team lead interested in best practices for scalable, maintainable theming strategies

Prerequisites

  • Basic knowledge of HTML and CSS
  • Familiarity with JavaScript or TypeScript
  • Some experience with Angular or React (recommended but not required)

Course Contents

  • Understanding Theme Concepts
    • What is a palette? Understanding primary, secondary, and accent colors
    • What is a color system? How can we automatically match colors together?
    • What is a theme, and how does it create consistency in UI design?
    • Exploring various color models: RGB, HSL, HBW, and the new  OKLCH
  • CSS for Theming
    • Using CSS custom properties to build a consistent, adaptable theme
    • Dynamic color creation: color-mix() and relative colors
    • Relative Colors in CSS
    • Using the color-scheme property and the light-dark() function for automatic dark/light mode
    • Best practices for structuring CSS for scalability and maintainability
  • Theming Single-Page Applications
    • Building palettes based on a base color
    • Incorporating the color-scheme property for global light-dark configuration
    • Creating a directive to modify the current theme dynamically
    • Applying themes locally to specific sections of an application
  • Advanced Implementation & Best Practices – Demonstrated in Angular Material 20
    • Managing theme state in Angular (as an example—these techniques apply to React as well)
    • Switching themes in run-time based on user choice
    • Applying the same techniques in Angular Material 20
    • Q&A and hands-on practical application exercises
 

The conference starts in

Days
Hours
Minutes
Seconds