Skip to content

Colours and dark mode

data-accent colours the search button and the selected drop-off toggle.

data-accent="#C2410C". Live widget, loaded from rentx.al — an empty box here means rentx.al is unreachable, not a broken page. Searching opens RentX in a new tab.

<script src="https://rentx.al/embed.js"
data-rentx-partner="your-partner-id"
data-accent="#C2410C"
></script>

Two things to know:

  • It must be a six-digit hex colour. #C2410C works; #fff, orange and rgb(194,65,12) are all ignored, and you get the RentX blue #3E92CE instead.
  • The button text colour is chosen for you from how light your accent is. Pick a pale yellow and the label turns dark so it stays readable, rather than disappearing into white-on-white.

data-theme="dark" switches the widget to light text on dark surfaces.

data-theme="dark". Live widget, loaded from rentx.al — an empty box here means rentx.al is unreachable, not a broken page. Searching opens RentX in a new tab.

<script src="https://rentx.al/embed.js"
data-rentx-partner="your-partner-id"
data-theme="dark"
></script>

data-theme changes the search card itself, not just the text on it: in light mode the card is white, in dark mode it is near-black. So pick the one that matches the page you are putting it on — a light-mode widget on a dark page is a white card, which is probably not what you want.

The area around the card is transparent and picks up your page’s background, so the card always looks like it belongs to your page rather than sitting in a grey box.

If your site has its own light/dark toggle, the widget does not follow it. Pick the one that matches your default.