Now I remember the theme
This commit is contained in:
@@ -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
|
||||
@@ -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`
|
||||
@@ -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
|
||||
Reference in New Issue
Block a user