Using custom class for vmware clarity dark theme
I am using dark theme to switch between the light and dark theme of vmware clarity.
But the problem is dark theme doesn't get applied to my custom css classes which are obvious.
For ex. I have a custom class which sets the background of a content:
.custom-class { background: white; }
But when a dark theme is applied, I expect the background to change. But I am not sure how I can accomplish.
Stackblitz to try out: https://stackblitz.com/edit/clarity-theme-switcher-9mjqdm
For workaround, I tried to find an existing class from clarity.css file which has different background based on theme (ex. cards), but most of them are extra css property which distorts my UI.
Also the bg-classes like bg-faded, bg-primary etc. doen't have corresponding dark theme. Can any one please help me to atleast workaround this.
It sounds like you are switching between the two stylesheets delivered with Clarity (Light/Dark). We generate these two themes from the same css using custom properties (css variables) but it was originally only scss variables.
You could accomplish this for an application in a similar way. E.g - generate light/dark stylesheets for your custom classes. Turn white into $custom-class-background and generate two stylesheets (one for light with $custom-class-background:white and one for dark $custom-class-background:black.
Then, the app can switch these stylesheets when it does the Clarity themes.