I've been experimenting with the dark theme feature in VMware Clarity to toggle between light and dark themes.
However, I'm encountering an issue where the dark theme isn't being applied to my custom CSS classes, which is to be expected.
For instance, I have a custom class that defines a white background:
.custom-class { background: white; }
When the dark theme is activated, I anticipate the background color to change. However, I'm unsure of how to achieve this.
You can test it out on Stackblitz here: https://stackblitz.com/edit/clarity-theme-switcher-9mjqdm
In attempting to find a workaround, I looked for existing classes in the clarity.css file that have different backgrounds based on the theme (e.g., cards). Unfortunately, most of them add extra CSS properties that affect the UI layout.
Additionally, the bg-classes like bg-faded, bg-primary, etc. don't have corresponding dark theme options. Can anyone help me with a workaround for this issue?