Labs · Interface component In use
Ambient Key.
One small control that carries two signals: which way the light is set, and how far through the page you are. It's sitting at the top of this screen right now, and it's the same component on every build.
What it is
Most light and dark switches are a checkbox wearing a costume. This one is a piece of the brand: a sun and a moon either side of a line, with a gorse marker that travels between them.
Gorse is Northmarker's single accent, the point on the cairn that gives everything below it direction. The marker is that same point, moved into an interface. Press the key and the whole page changes scheme in one crossfade, and the choice is remembered next time you visit.
- Type
- Interface component
- Status
- In use
- Built with
- Astro · SVG · CSS
- Weight
- No dependencies
- Running on
- northmarker.co.uk · argyllrhythm.co.uk
What it does
Two signals, one control.
The marker reads ambience
Press the key and the marker travels from sun to moon. The active side lights up in gorse, and every colour on the page re-points at once, surfaces, cards, bands and type together. Your choice is kept, and if you haven't made one it follows your device.
The border reads journey
The pill's edge is a circuit. It starts unlit at the top of a page and fills clockwise as you scroll, with a soft glow riding the leading edge. Reach the bottom and the circuit closes. Scroll back and it empties again.
Keeping the two apart matters. The centre tells you how the page is lit; the outside tells you where you are in it. Neither interferes with the other.
Showcase
The same component, three palettes.
These are live. Press any of them and this page changes with it, exactly as the one in the header does. Only the colours are passed in, everything else is shared.
Northmarker
Gorse through sea glass to teal.
Argyll Rhythm
Heather to amber, with the drawn line the brand is built on.
Kilmartin
Satin gold, old paper, night blue.
Dropping it into a new build is one line:
<AmbientKey from="#7D5A8A" to="#C8873A" />
Under it
Built to stay out of the way.
- 01
One set of tokens
Every colour on the site points at a semantic token rather than a fixed value, so the whole scheme turns over from a single class. No duplicated styles for a second theme.
- 02
No flash on load
The scheme is decided before the page paints, so a returning visitor never sees a flash of the wrong one. With scripting off, everything still reads normally.
- 03
Honest to assistive tech
It is a real switch, keyboard reachable, announcing its state. The circuit is decorative, so it is hidden from screen readers and never intercepts a press.
Want one that belongs to your brand?
Ambient Key ships with every site I build, tuned to that project's own colours.