3.6 KiB
3.6 KiB
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:
16pxon cards (vs Fluent's12px),14pxon 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 | 🌿 |