Now I remember the theme
Some checks failed
ci / site (push) Has been cancelled
publish-image / publish (push) Has been cancelled

This commit is contained in:
2026-02-10 20:38:38 -05:00
parent 70710239c7
commit f50a828535
19 changed files with 321 additions and 304 deletions

View File

@@ -0,0 +1,21 @@
## ADDED Requirements
### Requirement: Theme switch tracking event
When Umami is enabled, the site MUST emit a custom event when the user changes theme via the theme switcher UI.
The site MUST emit the event using Umami's JavaScript API (`umami.track(...)`) so runtime properties can be included.
The event name MUST be `theme_switch`.
The emitted event MUST include, at minimum:
- `target_id`
- `placement`
- `theme`
#### Scenario: Theme switch emits event
- **WHEN** a user selects `high-contrast` in the theme switcher notch
- **THEN** the site emits a `theme_switch` event with `theme=high-contrast` and a stable `target_id`
#### Scenario: Missing Umami does not break switching
- **WHEN** Umami is not configured or the Umami script is not present
- **THEN** theme switching and persistence still work and no browser error is thrown

View File

@@ -0,0 +1,23 @@
## ADDED Requirements
### Requirement: Theme switch event taxonomy
The tracking taxonomy MUST define an event for theme switching.
The event name MUST be `theme_switch`.
The `theme_switch` event MUST include, at minimum:
- `target_id`
- `placement`
- `theme`
The event SHOULD include `prev_theme` when available.
The taxonomy MUST define the `target_id` namespace for theme switching as:
- `theme.switch.<theme>`
The taxonomy MUST define the `placement` value for the theme switcher notch as:
- `theme_notch`
#### Scenario: Theme switch target_id is deterministic
- **WHEN** a user selects `light` theme using the theme notch
- **THEN** the event is emitted with `target_id=theme.switch.light` and `placement=theme_notch`

View File

@@ -0,0 +1,25 @@
## ADDED Requirements
### Requirement: Theme persistence works across visits with fallback
The site MUST persist the user's theme selection across visits so returning users see the last-selected theme.
The site MUST use client-side persistence and MUST support a fallback mechanism:
- Primary: `localStorage`
- Fallback: a client-side cookie
The effective theme selection order MUST be:
1) Stored theme in `localStorage` (if available)
2) Stored theme in a cookie (if localStorage is unavailable)
3) Default selection using environment signals
#### Scenario: LocalStorage persists across a later visit
- **WHEN** a user selects `light` theme and later returns to the site in the same browser
- **THEN** the site initializes in `light` theme before first paint
#### Scenario: Cookie fallback is used when localStorage is unavailable
- **WHEN** the browser environment blocks `localStorage` access and the user selects `dark` theme
- **THEN** the theme is persisted using a client-side cookie and is restored on the next visit
#### Scenario: No persistence available falls back to defaults
- **WHEN** both `localStorage` and cookie persistence are unavailable
- **THEN** the site falls back to default theme selection using environment signals