# Themes

## Agent Instructions

You are implementing a theme-aware KIRUPA surface. Preserve the independent style, palette, and mode dimensions. Use the enabled styles and presets from header.shtml and kirupa.js; nature is displayed as Smooooth. Use the actual custom-color generator and the exact production class composition. Keep preview state inside its document; never persist it, dispatch a site-wide theme change, or change another specimen. Reuse the style CSS and asset mappings rather than simulating a theme with a background color. Mark fixed-color artwork honestly. Verify all preset combinations and a custom color, plus Auto and reduced motion.

Follow WCAG 2.2 AA for new or changed content: semantic HTML, keyboard access, visible focus, readable contrast in every theme, text alternatives, labeled controls, and explicit errors. Support zoom/reflow, respect reduced motion, and keep sound optional. Read /design/sections/accessibility.md for acceptance checks. Report unresolved barriers; automated checks alone do not establish conformance.

## Reference

Six visual styles, eight color palettes, and Light, Dark, and Auto modes.

Pixel is the classic retro shell: chunky type, pixel icons, hard shadows, drifting clouds, and stars at night. Smooooth is stored as nature: rounded controls, leafy masks, soft hills, and warmer, quieter typography.

Sci-Fi is a starship console: a sun-orange mark, wide-tracked titles, technical type, thin rules, and a moving geographic atlas. Minimal gives the words room, uses hairlines and Inter, and adds a reading-progress line only to articles.

Ukiyo-e uses woodblock waves, ink, paper, a seal, sails, birds, and mist. Platformer uses a dithered sky, CC0 tiles, gold buttons, coins, and a question block. Their artwork contains intentional fixed hues as well as theme-colored layers. Here is the [actual homepage](https://www.kirupa.com/) in every style. Each window has its own Light/Dark selector; these fixed captures use the Blue palette:

- Pixel: [Light screenshot](/design/screenshots/home-pixel-light.png?v=13e2d6b85c42) / [Dark screenshot](/design/screenshots/home-pixel-dark.png?v=3b221b032943)
- Smooooth: [Light screenshot](/design/screenshots/home-nature-light.png?v=c8b2a964eebf) / [Dark screenshot](/design/screenshots/home-nature-dark.png?v=8fba7ffdf2a7)
- Sci-Fi: [Light screenshot](/design/screenshots/home-scifi-light.png?v=ae0e5c5b3e3e) / [Dark screenshot](/design/screenshots/home-scifi-dark.png?v=4ddea47ff911)
- Minimal: [Light screenshot](/design/screenshots/home-minimal-light.png?v=e903cba23a34) / [Dark screenshot](/design/screenshots/home-minimal-dark.png?v=6e3d1f0ce574)
- Ukiyo-e: [Light screenshot](/design/screenshots/home-ukiyoe-light.png?v=9264384c730e) / [Dark screenshot](/design/screenshots/home-ukiyoe-dark.png?v=bd42b9ed2d12)
- Platformer: [Light screenshot](/design/screenshots/home-platformer-light.png?v=a9ba87e01577) / [Dark screenshot](/design/screenshots/home-platformer-dark.png?v=8ea88a8b1342)

These are fixed homepage captures in the Blue palette. [Live homepage](https://www.kirupa.com/) / [Capture metadata](/design/screenshots/manifest.json).

There are eight preset palettes: Blue, Yellow, Pink, Green, Purple, PICO-8, Black, and Brown. Custom color uses the site's existing OKLCH generator. Light, Dark, and Auto are modes. Auto follows the device; a preview never reads or writes the site's saved choices.

Production selection is owned by header.shtml and kirupa.js. Pixel has no style class. Other styles use html.style_NAME. A dark preset uses theme_NAME_dark plus theme_dark, not the light palette class at the same time. The feature switches in header.shtml determine which styles are offered.

Each preview is a separate document using the real CSS and, where needed, the real visual renderer. Controls change only that document. Asset previews identify fixed artwork, themed masks, and sprite cells explicitly. The outer tutorial shell uses the actual site theme customizer and saved preferences; choosing a specimen's style never calls that customizer or changes its stored state.

[The actual navigation and sky](/design/themes.htm#specimen-header)

- Do exercise style x palette x mode; dark mode alone is not a visual style.
- Do use buildCustomThemeCSS for a custom color, not a hand-tinted approximation.
- Do not call the production preference or onboarding APIs from a specimen.

## Sources

- [ssi/newDesign/src/header.shtml](https://github.com/kirupa/kirupaWWW/blob/main/ssi/newDesign/src/header.shtml)
- [ssi/newDesign/src/kirupa.js](https://github.com/kirupa/kirupaWWW/blob/main/ssi/newDesign/src/kirupa.js)
- [ssi/newDesign/src/styles/nature.css](https://github.com/kirupa/kirupaWWW/blob/main/ssi/newDesign/src/styles/nature.css)
- [ssi/newDesign/src/styles/scifi.css](https://github.com/kirupa/kirupaWWW/blob/main/ssi/newDesign/src/styles/scifi.css)
- [ssi/newDesign/src/styles/minimal.css](https://github.com/kirupa/kirupaWWW/blob/main/ssi/newDesign/src/styles/minimal.css)
- [ssi/newDesign/src/styles/ukiyoe.css](https://github.com/kirupa/kirupaWWW/blob/main/ssi/newDesign/src/styles/ukiyoe.css)
- [ssi/newDesign/src/styles/platformer.css](https://github.com/kirupa/kirupaWWW/blob/main/ssi/newDesign/src/styles/platformer.css)

[Section page and specimens](/design/themes.htm) | [Instruction index](/design/index.md) | [Plain prompt](/design/agent/themes.txt)