# Animal Crossing Theme — Sunny Meadow

**Date:** 2026-05-18  
**Status:** Approved

## Summary

Add a fifth design theme ("animal-crossing") to the hyyzhome IoT learning portal. The theme captures the warm, cozy Animal Crossing aesthetic: leaf greens, cream backgrounds in light mode, and deep forest tones in dark mode.

Reference: https://guokaigdg.github.io/animal-island-ui/

## Behavior

- Supports both light and dark modes (no forced mode, unlike Terminal/Cyberpunk)
- Default: follows the user's current light/dark preference
- Slug: `"animal-crossing"` (kebab-case, consistent with `"material-you"`)

## Color Palette

### Light mode (Sunny Island Day)

| Token | Value | Role |
|---|---|---|
| `--accent` | `#6dbc7e` | Primary leaf green |
| `--accent-rgb` | `109, 188, 126` | |
| `--accent-2` | `#5aad6d` | Darker green |
| `--accent-3` | `#4a9e5d` | Deepest green |
| `--accent-secondary-rgb` | `244, 200, 66` | Warm yellow for texture |
| `--page-gradient` | Warm cream `#fdf6e3` base with soft radial blobs | Background |
| `--page-texture` | Soft radial green/yellow gradients | Overlay layer |
| `--title-gradient` | `#6dbc7e` → `#5aad6d` → `#f4c842` | Title text fill |
| `--control-bg` | `rgba(255, 252, 240, 0.82)` | Button/dropdown backgrounds |
| `--control-border` | `rgba(109, 188, 126, 0.35)` | Button borders |
| `--control-inset` | `rgba(255, 255, 255, 0.85)` | Inner highlight |
| `--control-fg` | `#5c4824` | Warm brown text |
| Card bg | `rgba(255, 252, 240, 0.85)` | Creamy white |
| Card border | `rgba(109, 188, 126, 0.25)` | Soft green border |
| Body text | `#5c4824` | Warm brown |
| Muted text (card p) | `#7a6040` | Lighter warm brown |

### Dark mode (Night on the Island)

| Token | Value | Role |
|---|---|---|
| `--accent` | `#9ed98a` | Soft lime |
| `--accent-rgb` | `158, 217, 138` | |
| `--accent-2` | `#86cb72` | |
| `--accent-3` | `#6dbc5e` | |
| `--accent-secondary-rgb` | `245, 210, 90` | Lantern yellow |
| `--page-gradient` | Deep forest `#1e2d1e` solid | Background |
| `--page-texture` | Subtle radial lime/yellow glows | Overlay layer |
| `--title-gradient` | `#9ed98a` → `#86cb72` → `#f5d25a` | Title text fill |
| `--control-bg` | `rgba(25, 40, 25, 0.82)` | Dark forest controls |
| `--control-border` | `rgba(158, 217, 138, 0.25)` | |
| `--control-inset` | `rgba(255, 255, 255, 0.04)` | |
| `--control-fg` | `#e8f4d8` | Off-white |
| Card bg | `rgba(30, 48, 30, 0.82)` | Dark forest green |
| Card border | `rgba(158, 217, 138, 0.18)` | |
| Body text | `#e8f4d8` | Off-white |
| Muted text | `#b0c8a0` | Muted sage |

## Visual Style

- **Border radius:** `16px` on cards (vs Fluent's `12px`), `14px` on controls — slightly softer
- **Hover:** gentle `translateY(-2px)` lift + green glow shadow matching accent
- **Backdrop filter:** same acrylic blur as Fluent (20px blur, 180% saturate)
- **No special font override** — system sans-serif for legibility
- **No animations** — keeps the theme calm and lightweight

## Files Changed

| File | Change |
|---|---|
| `theme.js` | Add `"animal-crossing"` to `DESIGN_THEMES` array |
| `style.css` | Add light + dark CSS variable blocks; card/hover overrides scoped to `[data-design-theme="animal-crossing"]` |
| `i18n.js` | Add label in all 11 language variants in `DESIGN_THEME_LABELS` |
| `index.html` | Add `<li role="option" data-value="animal-crossing" aria-selected="false">` |

## Labels by Language

| Language | Label |
|---|---|
| zh-Hans | 动森 |
| zh-Hant | 動森 |
| en | Animal Crossing |
| ja | どうぶつの森 |
| ko | 동물의 숲 |
| wenyan | 森友 |
| mars | 动↗森★ |
| garbled | ä◼▤è |
| bin | 01010101 |
| meow | 喵喵喵喵 |
| emoji | 🌿 |