Selected colour CSS variables

When a shopper picks colours in the customiser, those colours are published to your custom CSS as variables (CSS custom properties). You can read them with var() to mirror the shopper’s choice anywhere in the options panel — for example, filling a swatch or a label with the exact colour they selected, and updating it live as they change their mind.

The variables

Every variable holds a single colour as a hex value, such as #FF7A00. They live on the page root, so you can use them in any rule in your custom CSS.

The current colour

—sign-selected-colour is the sign’s main colour right now. On neon signs that’s the tube colour; on other sign types it’s the face colour, falling back to the first part that has a colour. Use this when you just want “the colour the shopper picked” without caring which part it came from.

—sign-colour is an older name for the same value. It still works, so existing CSS keeps running — but use —sign-selected-colour in new code.

A colour per part

Signs are built from parts — a neon sign has tubes and a UV face; a lightbox has a face, sides, a back, and so on. Each part the sign exposes gets its own variable:

• —sign-selected-colour-face — Face / front lit (labelled UV on neon)

• —sign-selected-colour-tube — Tubes (neon signs)

• —sign-selected-colour-side — Side

• —sign-selected-colour-trim — Trim / border

• —sign-selected-colour-halo — Back lit / internal light

• —sign-selected-colour-back — Back

• —sign-selected-colour-left — Left

• —sign-selected-colour-right — Right

• —sign-selected-colour-top — Top

• —sign-selected-colour-bottom — Bottom

A sign only exposes the parts it actually has. A neon sign sets —sign-selected-colour-tube and —sign-selected-colour-face; a lightbox sets face, back, sides, trim, and so on. If a part isn’t on the sign, its variable isn’t set.

When they update, and the fallback you need

The variables change the moment a shopper selects a different colour — no reload. Anything styled with them updates at the same time.

A variable is only set while that part has a colour. Before the shopper picks one, or for a part the sign doesn’t have, the variable is empty. Always pass a fallback as the second argument to var() so your styling still looks right:

/* Falls back to black until a colour is selected */
background-color: var(--sign-selected-colour, #000000);

For a multi-colour selection, the variable holds the first colour in the set.

Example: match a swatch to the sign

A common use is the “Coloured” jacket option — a swatch that should show the colour the shopper chose. This fills the last jacket button’s swatch with the current sign colour:

#neon-customiser-app .npc-selections-jacket .npc-selection-button:last-child .npc-selection-button-title::before {
  background-color: var(--sign-colour, #ffffff);
}

To follow one specific part instead of the main colour, swap in that part’s variable — here a label that tracks the tube colour:

.my-tube-colour-label {
  color: var(--sign-selected-colour-tube, #ff7a00);
}

Find the right class names for your own elements using the steps in the Custom CSS guide.

All variables at a glance

--sign-selected-colour          /* current colour: tube on neon, else face */
--sign-selected-colour-face     /* face / front lit (UV on neon) */
--sign-selected-colour-tube     /* tubes (neon) */
--sign-selected-colour-side
--sign-selected-colour-trim     /* trim / border */
--sign-selected-colour-halo     /* back lit / internal light */
--sign-selected-colour-back
--sign-selected-colour-left
--sign-selected-colour-right
--sign-selected-colour-top
--sign-selected-colour-bottom
--sign-colour                   /* legacy alias of --sign-selected-colour */