Skip to content

docs: multi-theme picker for the Pages site (7 named palettes)#3

Draft
testtest126 wants to merge 1 commit into
mainfrom
claude/webpage-themes-broken-2s103m
Draft

docs: multi-theme picker for the Pages site (7 named palettes)#3
testtest126 wants to merge 1 commit into
mainfrom
claude/webpage-themes-broken-2s103m

Conversation

@testtest126

Copy link
Copy Markdown
Owner

What this is

A new feature, not a fix. The docs site (docs/) previously had a plain light/dark toggle — the named themes mentioned in the request (Japanese, Arabic, Indian, Codex, Terminal, Hebrew, Georgian) never existed in this repo's history, so there was nothing to "restore." This adds them as a proper picker.

What changed

The single theme toggle becomes a dropdown picker offering nine themes:

Theme Feel
Light / Dark the originals, unchanged
Japanese washi paper, sumi ink, vermillion
Arabic teal-and-gold zellij on deep ground
Indian holi brights — magenta, marigold, green
Codex illuminated-manuscript editor (violet/lapis)
Terminal phosphor-green CRT with amber accent
Hebrew Jerusalem stone, tekhelet blue, gold
Georgian qvevri wine, fresco gold, cream
  • docs/assets/agent-ready.css — seven new :root[data-theme="…"] palettes that redefine the existing design-system custom properties (so every element re-themes with no markup change), plus styles for the picker menu, options, and per-theme colour swatches.
  • docs/assets/theme.js — builds the dropdown from the existing .theme-btn on load, so all three pages (index, coordination, architecture) get it with zero HTML edits. Selection persists in localStorage and applies before first paint to avoid a flash. window.__toggleTheme now cycles to the next theme, so the inline onclick still degrades gracefully if JS is unavailable.

No markup, installer, or template changes — this is purely additive to the static site.

Verification

Driven end-to-end in Chromium via Playwright (44 assertions, all passing):

  • every one of the nine palettes applies its expected body background colour;
  • the menu opens on click, closes on select, and Escape dismisses it;
  • the button label tracks the active theme;
  • the choice survives a page reload (localStorage).

Screenshots of Japanese, Terminal, Georgian, Codex, and the open menu were eyeballed for contrast and legibility.

🤖 Generated with Claude Code


Generated by Claude Code

Turn the docs-site light/dark toggle into a dropdown picker offering nine
themes: the original light and dark plus japanese, arabic, indian, codex,
terminal, hebrew, and georgian. Each palette redefines the existing
design-system custom properties, so every page picks it up with no markup
changes.

theme.js builds the menu from the existing .theme-btn on load (all three
pages get it for free) and keeps a next-theme cycle on window.__toggleTheme
so the inline onclick still degrades gracefully without JS. Selection
persists in localStorage and is applied before first paint to avoid a flash.

Verified in Chromium (Playwright): all nine palettes apply the expected
body background, the menu opens/closes, Escape dismisses it, and the choice
survives a reload.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants