What are the methods to effectively utilize label/soft colors with specific opacities across various themes? Alternatively, how can one prevent the blending of background colors when employing colors with opacity settings?

[PruthviPraj00]

Hello,

I'm encountering challenges with opacity settings when switching between different themes, particularly with the use of opacity in colors. The primary issue arises when employing a soft-primary color variant in a badge example. While this variant functions adequately on lighter themes, it presents a dilemma in darker themes. The opacity behaves as a blend between the background color of the theme and the primary color, as indicated in the following code snippet:

.badge {
  @apply text-base-content rounded-badge;
  &-neutral {
    @apply bg-neutral text-neutral-content;
  }
  &-primary {
    @apply bg-primary text-primary-content;
<-- cont -->
  &-soft-primary {
    @apply bg-primary/10 text-primary;
  }
}

Moreover, I opted to utilize the repository directly rather than employing Daisy as a plugin. This choice grants me greater autonomy over colors in styled-components and utilities. Consequently, I am able to establish custom colors tailored to my requirements, including soft or label colors not currently available in Daisy.

In the light theme, the badge appears as intended 👍:

Conversely, in the dark theme, the badge's background color blends with the theme's background color, resulting in an undesirable effect 👎:

The desired output in the dark theme entails the badge's background color remaining distinct from the dark-mode background, as illustrated below 👍:

I seek assistance in incorporating label colors in Daisy or devising a solution that prevents the badge's background color from blending with the theme's background color. Alternatively, guidance on adding additional color variables for label colors in theming would be greatly appreciated.

Any help would be immensely valued 💯.