Hello,

I have been looking into your question and every component and feature in our documentation has a styling section in the given documentation topic that describes how a custom theme can be applied to style the component or feature itself. To use a custom theme, you must extend the theme of the component or feature itself and handle its parameters by passing these styles. For example in the given column-hiding component of the igx-grid component in the styling section it is described which themes should be extended to style the entire component such as column-actions-theme, button-theme, input-group-theme, checkbox-theme and icon- theme.

@use "igniteui-angular/theming" as *;

$custom-column-actions-theme: column-actions-theme(
    $background-color: steelblue,
    $title-color: gold
);

$dark-button-theme: button-theme(
    $background: $yellow,
    $foreground: $bg,
);

$dark-input-group: input-group-theme(
    $filled-text-color: $yellow,
    $focused-text-color: $yellow,
    $idle-text-color: $yellow,
);

$dark-checkbox-theme: checkbox-theme(
    $label-color: $yellow,
);

The parameter names from the theme actually match the CSS variable names which according to your requirements you want to handle and set your own styles. In the given example, you can select the given components igx-column-actions, igxbutton, igx-input-group, igx-checkbox and igx-icon by their element selector or by their classes and then handle the CSS variables and set custom styles allowing you to select specific components or apply styles globally to all.

.igx-button {
    --foreground: green;
    --border-color: green;
    --foreground-color: green;
}

igx-input-group{
    --idle-bottom-line-color: green;
    --focused-secondary-color: green;
}

igx-checkbox{
    --fill-color: green;
    --border-color: green;
}

igx-icon{
    --color: green;
}

In addition to checking the documentation for themes and parameter names that match the CSS variables, you can also use the developer console of your given browser and inspect the given element to see what css variables it uses to handle it and meet your requirements.

The described scenario could be observed here:

In addition, I have prepared small sample illustrating this behavior which could be found here. Please test it on your side and let me know how it behaves.

Additional information on styling Angular components can be found in the Styling and Themes section of our documentation.

If you require any further assistance on the matter, please let me know.

Regards,

Georgi Anastasov

Entry Level Software Developer

Infragistics