What is the desired way to theme your application?

[xdinterface]

For the most part i love the documentation, but when it comes to theming i don't seem to understand the core concept of theming the application. I understand that you can build your application on existing themes and change the colors by using css-variables or sass functions.

But in most of you example applications you use sass functions for palettes and also use all the theming functions for most components, while in your documentation it says:

This document describes the theming system in Ignite UI for Angular from version 12 forward. Starting with version 12 CSS variables are the recommended way to modify the global and component themes. You can still use the Sass theming library as you would've prior to version 12.

In your light and dark theme example the documentation shows sass theming rather then css variables. I know you can use these in combination, but i would love to see an example for the optimal approach on theming with ingiteui-angular based on these criteria:

• use material theme as basis
• applying custom colors globally
• switching between light and dark theme (doesn't matter if browser setting or custom service)
• change a few variables for a igx-component

[Zneeky]

Hello @xdinterface ,

Thank you for reaching out!
We understand that theming in Ignite UI for Angular can be a bit overwhelming at first, but our system is designed to be both flexible and powerful. You can mix and match both approaches to suit your needs.

We appreciate your feedback on the documentation.

Some documentation references for more details in regards to your question:
Themes Overview - Ignite UI Themes
Theming Engine - Theming System Explained
Component-Specific Theming - Component Themes
Variables - Button-Theme

To help you better understand how theming works, I have prepared a StackBlitz sample showcasing an approach based on your requirements.
Here’s how it addresses each point you mentioned:

✅ Material Theme as the Basis - The sample starts with the Material theme as the default base.
✅ Applying Custom Colors - The _variables.scss file defines a custom palette that is applied globally. Also for the light-theme there is example how to change the primary and secondary color variables.

  .light-theme {
      // Customizing global theme colors (can be commented out to test defaults)
      --ig-primary-500: #09f;
      --ig-secondary-500: red;
      --ig-surface-500: rgb(221 211 211);
  }

✅ Switching Between Light and Dark Theme - Implemented custom ThemeService to dynamically toggles between light and dark themes.
✅ Changing a Few Variables for an Ignite UI Component - The sample customizes igx-button styles using both Sass mixins and CSS variables.

 .igx-button--outlined{
        --hover-background: rgba(234, 239, 44, 0.7);
 }

Thank you for using our components!

Best Regards,
Infragistics

[xdinterface]

First of all thank you for the quick reply!

This is a actually a very good example, since this is also showcasing how you can mix and match the stylings.
I was confused because most examples use SASS themes in styling sections (like for button components), while the documentation recommends CSS variables.

The Customizing Ignite UI for Angular Theming
does also utilize both approaches.

So i guess the most efficient way to style an application would be to initially use the theming function once to set the global theme and then use CSS variables to style components since it styles them without replicating their styles over and over?