Opacity showing the light variant in dark mode

[robert-barahona]

Hey! We're migrating from NativeWind.

Our app supports light/dark mode and we have custom colors defined in colors.css for example:

@theme {
  /* Raw palette */
  --color-white: #ffffff;
  --color-black: #000000;

  --color-bg-primary: var(--color-white);
}

@layer theme {
  :root {
    @variant light {
      --color-bg-primary: var(--color-white);
    }

    @variant dark {
      --color-bg-primary: var(--color-black);
    }
  }
}

But when we use the opacity, we only see the light color even if we are in dark mode:

<View className="bg-bg-primary/70" >
    ...
</View>

---

Note: this is only happening with custom css variables, it works with bg-white/70

Uniwind version: 1.6.2

[github-actions]

This issue has been automatically closed because it lacks a clear, minimal reproduction that we can use to verify the reported bug.

[jpudysz]

Just remove this line:

@theme {
  /* Raw palette */
  --color-white: #ffffff;
  --color-black: #000000;

-  --color-bg-primary: var(--color-white);
}

@layer theme {
  :root {
    @variant light {
      --color-bg-primary: var(--color-white);
    }

    @variant dark {
      --color-bg-primary: var(--color-black);
    }
  }
}

[robert-barahona]

Just remove this line:

@theme {
/* Raw palette */
--color-white: #ffffff;
--color-black: #000000;

• --color-bg-primary: var(--color-white);
  }

@layer theme {
:root {
@variant light {
--color-bg-primary: var(--color-white);
}

@variant dark {
  --color-bg-primary: var(--color-black);
}

}
}

I just tried and now any color is shown:

[Brentlok]

Screen.Recording.2026-04-28.at.07.30.28.mov

<View className="flex-1 bg-white light:bg-black p-32">
    <View className="flex-1 bg-bg/70" />
</View>

@theme {
  --color-white: #ffffff;
  --color-black: #000000;
  --color-bg: var(--color-white);
}

@layer theme {
    :root {
        @variant dark {
            --color-bg: var(--color-black);
        }

        @variant light {
          --color-bg: var(--color-white);
        }
    }
}

It is working fine for your case. Please create a minimal reproduction repo

For future reports, you should follow the issue template, including providing a minimal reproduction URL. Reports that do not meet these requirements are not actionable and waste maintainers’ time, and will be closed without further review.