Hype5 Stage 1.0.2 · Pre-release
Lights up, Lights down and System
Stage has a light scheme (Lights up), a dark scheme (Lights down) and System, which follows the visitor's device. You choose the default; visitors can switch.
On this page
The three schemes
| Scheme | Shows |
|---|---|
| Lights up | The light scheme: dark text on a light ground. |
| Lights down | The dark scheme: light text on a dark ground — suited to evening browsing and to photography. |
| System | Lights up or Lights down, following the visitor's device setting (prefers-color-scheme). |
Choosing the site default
Appearance → Customise → Hype5 Stage → Lights and layout → Lights default: System (default), Lights up or Lights down. This is what a first-time visitor sees.
How visitors switch
The Lights switch in the header opens a small menu with the three choices. The visitor's choice:
- is applied at once, with a short fade that is skipped when the visitor prefers reduced motion;
- is remembered in that visitor's browser only (local storage), and applied before the page is drawn on later visits, so the other scheme never flashes;
- is never sent to the server or stored in WordPress.
Without JavaScript the site default applies and the switch is hidden.
Logos in Lights down
A dark single-colour logo can disappear on a dark ground. Turn on Blend a dark single-colour logo into the page (Lights and layout) for a black logo on a transparent or white background: the white ground takes the page colour, and the logo turns light in Lights down and over a full-bleed photograph or film. The logo file is not changed. Leave the option off for multi-colour logos. See Typography and media.
Hype5 Theater components
While Stage is active, Hype5 Theater's ten public colour tokens follow Stage's Lights scheme, so productions, people and schedules also switch to Lights down. The colours saved in the plugin's Appearance are not changed and apply again under any other theme. See Hype5 Theater integration.
Accessibility
Both schemes were checked for colour contrast with axe-core (WCAG 2.2 AA) and in forced-colours mode (for example Windows High Contrast). In forced-colours mode the system colours are used, and logos are shown as uploaded. See Accessibility.