Hello,
I created a new page and I would like to set a class in SCSS when the theme is dark.
How can I do it?
The code below doesn't work.
[data-theme="dark"] .myClass {
width: 100%;
}
[data-theme="light"] .myClass {
width: 50%;
}
Thank you for your help.
Implementing dark mode in new pages with [Metronic 8 Angular] involves utilizing the built-in theme configuration and toggling between light and dark themes. To enable dark mode on a new page, ensure that your global theme settings are correctly set in the Angular environment, and use the Metronic SCSS variables to style components dynamically. Additionally, make use of Angular services to toggle dark mode on user interaction, ensuring a seamless transition. For instance, just as the oriental chicken salad blends vibrant ingredients for a visually pleasing and flavorful experience, dark mode enhances the UI by providing a sleek and comfortable viewing option, creating a more engaging experience for users.
Hi,
[data-theme="dark"].myClass {
<div data-theme="dark" class="myClass">
</div>
[data-theme="dark"] .myClass {
<div data-theme="dark">
<div class="myClass"></div>
</div>