Product page customisation

Bootstrap Studio Help
1

Hey,
I’m currently customizing the product element however I am finding some things to be quite hard - My site is in a dark theme with dark background and I have found the element doesn’t seem to have enough customization for it to function fully.

image

For example, the dropdown above shows an almost empty dropdown to the text color being whte, however if I change it to be darker:

image

The quantity buttons get swallowed up into the background.

Is there a way to individuallly define the colors that are conflicting here, as I can’t seem to find anything on the menus.

Any help is greatly appreciated,
Ben.

2

You can try with this CSS

.ref-quantity-widget {
  background-color: var(--bs-body-bg);
  color: var(--bs-body-color);
}

.ref-quantity-widget input {
  color: var(--bs-body-color);
}

.ref-product-data {
  background-color: var(--bs-body-bg);
  color: var(--bs-body-color);
}

.ref-product-data .ref-field-variants {
  background-color: var(--bs-body-bg);
  color: var(--bs-body-color);
}

.ref-button {
  background-color: var(--bs-gray);
}