Using only CSS variables to theme Angular Material 20 — how to find them all?

After upgrading to Angular Material 20, I decided to theme my application using only the provided CSS variables instead of using the traditional mat.define-theme() approach with a color palette, which feels like overkill for small projects.

However, I couldn't find official documentation listing all the available CSS variables. I wrote a script to extract them from the Material codebase, but it seems to miss some variables.

Is there a better way to reliably extract all Angular Material CSS variables, or an official list of them somewhere? Also, is relying solely on CSS variables a recommended approach for smaller apps, or are there caveats I should be aware of?

This is the only guide with just a few basic ones: https://material.angular.dev/guide/system-variables

Continue reading...