Steven Philley · Themes
Contents

Themes

Six site themes

Six site-wide colours, three scoped families. Click neon / emerald / dusk / sage / tide / sand here to set the whole site; Markets, Chakras, and the Dial keep their own keys.

sp-theme · scoped keys Shared tokens live in /style.css for photography and hub pages. Tool-local themes stay on their pages.

Site-wide

sp-theme
Global · photography, local, weather, tools, electronics, power, publicphotos, sitemap…

Neon, Emerald, Dusk, Sage, Tide, and Sand share one localStorage key: sp-theme. Fresh visits with no saved preference land on Neon. Choosing a card or header swatch sets html[data-theme] and persists across pages that already listen for it. Neon also remains a Dial skin under annual-dial-theme. Shared links use ?theme=<name> so recipients open the same palette (boot via /js/sp-theme-boot.js; Share via /js/sp-share.js). Annual Dial keeps ?theme= for dial skins only — neon collides with the site theme name, so dial does not load the site boot script. Markets keeps its own Accounting / Emerald Light / Emerald Dark under sp-theme-markets.

Scoped families

Do not merge

These palettes stay on their own routes. Opening them does not rewrite sp-theme, and this hub will not apply them site-wide.

Markets-only · /markets/

Accounting & Emerald

Ledger cream with coral ink, plus light and dark emerald terminals. Used by the percent calculator and MarketPulse. Storage key sp-theme-markets (legacy sp-theme-percent still read).

Open markets → Chakras-only · /chakras/

Glow

An extra bloom theme on the nine-chakras page. Choosing Glow writes sp-theme-chakras only — it never pollutes the site-wide key. Neon / emerald / dusk / sage / tide / sand on that page still sync to sp-theme.

Open chakras →
Annual Dial · SCOPED · circular-calendar.html

Dial skins

Six year-wheel looks, each a real theme file under /themes/dial/. Persisted with annual-dial-theme — never sp-theme. Open a card to load that skin on the dial.

Open Annual Dial →

Annual Dial · each skin

SCOPED · annual-dial-theme · /themes/dial/*.css

Brass

Engraved plate, verdigris weekends, Bodoni display.

themes/dial/brass.css Open with Brass →

LED

Scanlines, coral glow, Orbitron / Share Tech Mono.

themes/dial/led.css Open with LED →

Vapor

Magenta aura, hue drift, Michroma / Space Mono.

themes/dial/vapor.css Open with Vapor →

Halloween

Pumpkin rim, witch-green accents, Rye display.

themes/dial/hallow.css Open with Hallow →

Christmas

Evergreen ground, gold and crimson, Cinzel display.

themes/dial/xmas.css Open with Xmas →

Neon

Hot pink / cyan chrome wash behind the dial.

themes/dial/neon.css Open with Neon →

Tokens. Site-wide CSS variables for neon / emerald / dusk / sage / tide / sand already live in /style.css (and are duplicated inline on a few standalone hubs such as the sitemap). Dial skins now live as separate assets under /themes/dial/; Markets accounting/emerald-light/dark and Chakras glow tokens remain local to those routes so their identities stay separate.