Based on your query, it seems like you are interested in implementing theming. Here is a solution that may not directly address your question, but will provide you with a better understanding of how it can be accomplished:
.theme1{
--primary-color: red;
}
.theme2{
--primary-color: blue;
}
// within component1
:host{
background-color: var(--primary-color);
}
// within the AppComponent
<body[class]="isTheme1? 'theme1': 'theme2'">
<component1></component1>
</body>
To elaborate, each CSS variable is contained within its own scope. This means that if style1 is applied to a component or parent element, the value available within the component will be derived from the parent or self element.
<!-- scoped to the body -->
<body class="theme1">
<div>
<component1> </component1>
</div>
<div>
<component1> </component1>
</div>
</body>
<!-- scoped to the parent div -->
<body>
<div class="theme1">
<component1> </component1>
</div>
<div class="theme2">
<component1> </component1>
</div>
</body>
<!-- scoped to the component and possibility of mix and match -->
<body class="theme1">
<div>
<component1> </component1>
</div>
<div>
<component1 class="theme2"> </component1>
</div>
</body>
With the above code, your component will display two different colors side by side. While you may not want to mix and match, this example illustrates how the scope of a variable is determined by the parent or self element.
For a more professional approach, refer to nebular's theming guidelines, which follow a similar concept.