Compare commits
9 Commits
9d457caefd
...
c46cd06954
| Author | SHA1 | Date | |
|---|---|---|---|
| c46cd06954 | |||
| ce3be0143a | |||
| 00cdb383ee | |||
| d1ccf962ea | |||
| d015363430 | |||
| fe6c9dbe5d | |||
| 2517a84713 | |||
| 2f6e5e4842 | |||
| 29853d9c14 |
1
app.js
1
app.js
@@ -188,7 +188,6 @@ export function initApp() {
|
||||
titleEl.dataset.text = titleEl.textContent?.trim() || ""
|
||||
}
|
||||
|
||||
|
||||
const initialTheme = getInitialTheme()
|
||||
setTheme(initialTheme)
|
||||
|
||||
|
||||
485
docs/superpowers/plans/2026-05-18-animal-crossing-theme.md
Normal file
485
docs/superpowers/plans/2026-05-18-animal-crossing-theme.md
Normal file
@@ -0,0 +1,485 @@
|
||||
# Animal Crossing Theme Implementation Plan
|
||||
|
||||
> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
|
||||
|
||||
**Goal:** Add an "animal-crossing" design theme (warm cream light / deep forest dark) to the hyyzhome IoT portal.
|
||||
|
||||
**Architecture:** Four small, independent file edits. No new files created. The theme slug is registered in `theme.js`, a dropdown option added in `index.html`, CSS variables + component overrides added in `style.css`, and display labels added in `i18n.js`. Changes are order-independent but committing theme.js + index.html first lets you visually verify the option appears before styling is complete.
|
||||
|
||||
**Tech Stack:** Vanilla JS, Vite, CSS custom properties. No framework. No test suite — verification is manual in the dev server (`npm start`).
|
||||
|
||||
---
|
||||
|
||||
## Files Modified
|
||||
|
||||
| File | Change |
|
||||
|---|---|
|
||||
| `theme.js:1` | Add `"animal-crossing"` to `DESIGN_THEMES` array |
|
||||
| `index.html:45` | Add `<li role="option" data-value="animal-crossing">` after the Nord option |
|
||||
| `i18n.js:136–213` | Add `"animal-crossing"` key to every language in `DESIGN_THEME_LABELS` |
|
||||
| `style.css` | Append light + dark variable blocks and component overrides at end of file |
|
||||
|
||||
---
|
||||
|
||||
## Task 1: Register the theme slug
|
||||
|
||||
**Files:**
|
||||
- Modify: `theme.js:1`
|
||||
- Modify: `index.html:45`
|
||||
|
||||
- [ ] **Step 1: Add slug to DESIGN_THEMES**
|
||||
|
||||
In `theme.js`, change line 1 from:
|
||||
```js
|
||||
const DESIGN_THEMES = ["fluent", "material-you", "terminal", "cyberpunk", "nord"]
|
||||
```
|
||||
to:
|
||||
```js
|
||||
const DESIGN_THEMES = ["fluent", "material-you", "terminal", "cyberpunk", "nord", "animal-crossing"]
|
||||
```
|
||||
|
||||
- [ ] **Step 2: Add dropdown option in index.html**
|
||||
|
||||
In `index.html`, after the Nord `<li>` (currently line 45):
|
||||
```html
|
||||
<li role="option" data-value="nord" aria-selected="false">
|
||||
Nord
|
||||
</li>
|
||||
```
|
||||
add immediately after:
|
||||
```html
|
||||
<li role="option" data-value="animal-crossing" aria-selected="false">
|
||||
动森
|
||||
</li>
|
||||
```
|
||||
|
||||
- [ ] **Step 3: Start dev server and verify option appears**
|
||||
|
||||
```bash
|
||||
npm start
|
||||
```
|
||||
|
||||
Open the app in a browser. Click the design theme dropdown — "动森" should appear as a new option. Selecting it will show unstyled (inherits Fluent variables) — that's expected at this stage.
|
||||
|
||||
- [ ] **Step 4: Commit**
|
||||
|
||||
```bash
|
||||
git add theme.js index.html
|
||||
git commit -m "feat: register animal-crossing theme slug"
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Task 2: Add i18n labels
|
||||
|
||||
**Files:**
|
||||
- Modify: `i18n.js:136–213`
|
||||
|
||||
- [ ] **Step 1: Add label to every language in DESIGN_THEME_LABELS**
|
||||
|
||||
In `i18n.js`, add `"animal-crossing"` to each language object inside `DESIGN_THEME_LABELS`. The full updated constant (lines 136–214) should be:
|
||||
|
||||
```js
|
||||
export const DESIGN_THEME_LABELS = {
|
||||
"zh-Hans": {
|
||||
fluent: "Fluent",
|
||||
"material-you": "Material You",
|
||||
terminal: "终端",
|
||||
cyberpunk: "赛博朋克",
|
||||
nord: "Nord",
|
||||
"animal-crossing": "动森",
|
||||
},
|
||||
"zh-Hant": {
|
||||
fluent: "Fluent",
|
||||
"material-you": "Material You",
|
||||
terminal: "終端",
|
||||
cyberpunk: "賽博龐克",
|
||||
nord: "Nord",
|
||||
"animal-crossing": "動森",
|
||||
},
|
||||
en: {
|
||||
fluent: "Fluent",
|
||||
"material-you": "Material You",
|
||||
terminal: "Terminal",
|
||||
cyberpunk: "Cyberpunk",
|
||||
nord: "Nord",
|
||||
"animal-crossing": "Animal Crossing",
|
||||
},
|
||||
ja: {
|
||||
fluent: "Fluent",
|
||||
"material-you": "Material You",
|
||||
terminal: "ターミナル",
|
||||
cyberpunk: "サイバーパンク",
|
||||
nord: "Nord",
|
||||
"animal-crossing": "どうぶつの森",
|
||||
},
|
||||
ko: {
|
||||
fluent: "Fluent",
|
||||
"material-you": "Material You",
|
||||
terminal: "터미널",
|
||||
cyberpunk: "사이버펑크",
|
||||
nord: "Nord",
|
||||
"animal-crossing": "동물의 숲",
|
||||
},
|
||||
wenyan: {
|
||||
fluent: "流光",
|
||||
"material-you": "物材",
|
||||
terminal: "终端",
|
||||
cyberpunk: "赛博",
|
||||
nord: "清寒",
|
||||
"animal-crossing": "森友",
|
||||
},
|
||||
mars: {
|
||||
fluent: "流↗光",
|
||||
"material-you": "材↘質",
|
||||
terminal: "終↗★端",
|
||||
cyberpunk: "賽↘！博",
|
||||
nord: "清↗寒★",
|
||||
"animal-crossing": "动↗森★",
|
||||
},
|
||||
garbled: {
|
||||
fluent: "◼è▦",
|
||||
"material-you": "拷▤屯ä锟◽",
|
||||
terminal: "¥¬▤▨¿¿",
|
||||
cyberpunk: "◼çæ¥烫¥",
|
||||
nord: "æ◽屯¿",
|
||||
"animal-crossing": "ä◼▤è",
|
||||
},
|
||||
bin: {
|
||||
fluent: "0101",
|
||||
"material-you": "010101",
|
||||
terminal: "01010101",
|
||||
cyberpunk: "0101010101",
|
||||
nord: "0101010",
|
||||
"animal-crossing": "01010101",
|
||||
},
|
||||
meow: {
|
||||
fluent: "喵喵",
|
||||
"material-you": "喵喵喵",
|
||||
terminal: "喵喵",
|
||||
cyberpunk: "喵喵喵喵",
|
||||
nord: "喵喵喵",
|
||||
"animal-crossing": "喵喵喵喵",
|
||||
},
|
||||
emoji: {
|
||||
fluent: "💧",
|
||||
"material-you": "🧱",
|
||||
terminal: "⌨️",
|
||||
cyberpunk: "⚡",
|
||||
nord: "❄️",
|
||||
"animal-crossing": "🌿",
|
||||
},
|
||||
}
|
||||
```
|
||||
|
||||
- [ ] **Step 2: Verify labels in browser**
|
||||
|
||||
With the dev server still running, switch language to English — the dropdown option should now read "Animal Crossing" instead of "动森". Switch to Japanese — should read "どうぶつの森". Switch to emoji — should read "🌿".
|
||||
|
||||
- [ ] **Step 3: Commit**
|
||||
|
||||
```bash
|
||||
git add i18n.js
|
||||
git commit -m "feat: add animal-crossing labels for all 11 languages"
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Task 3: Add CSS — light mode
|
||||
|
||||
**Files:**
|
||||
- Modify: `style.css` (append after the Nord section, before the `@media (max-width: 600px)` block)
|
||||
|
||||
- [ ] **Step 1: Append light-mode CSS block**
|
||||
|
||||
At the end of the Nord section in `style.css` (before the `@media (max-width: 600px)` rule), append:
|
||||
|
||||
```css
|
||||
/* ─── Animal Crossing — Sunny Meadow ───────────────────────── */
|
||||
html[data-design-theme="animal-crossing"] {
|
||||
color-scheme: light;
|
||||
|
||||
--accent: #6dbc7e;
|
||||
--accent-rgb: 109, 188, 126;
|
||||
--accent-2: #5aad6d;
|
||||
--accent-3: #4a9e5d;
|
||||
--accent-secondary-rgb: 244, 200, 66;
|
||||
|
||||
--page-gradient: linear-gradient(
|
||||
135deg,
|
||||
#fdf6e3 0%,
|
||||
#f5f0d8 25%,
|
||||
#fdf6e3 50%,
|
||||
#f8f2e0 75%,
|
||||
#fdf6e3 100%
|
||||
);
|
||||
--page-texture:
|
||||
radial-gradient(
|
||||
circle at 20% 50%,
|
||||
rgba(109, 188, 126, 0.08) 0%,
|
||||
transparent 50%
|
||||
),
|
||||
radial-gradient(
|
||||
circle at 80% 80%,
|
||||
rgba(244, 200, 66, 0.06) 0%,
|
||||
transparent 50%
|
||||
);
|
||||
--title-gradient: linear-gradient(
|
||||
135deg,
|
||||
#6dbc7e 0%,
|
||||
#5aad6d 40%,
|
||||
#f4c842 100%
|
||||
);
|
||||
|
||||
--control-bg: rgba(255, 252, 240, 0.82);
|
||||
--control-border: rgba(109, 188, 126, 0.35);
|
||||
--control-inset: rgba(255, 255, 255, 0.85);
|
||||
--control-fg: #5c4824;
|
||||
}
|
||||
|
||||
html[data-design-theme="animal-crossing"] body {
|
||||
color: #5c4824;
|
||||
}
|
||||
|
||||
html[data-design-theme="animal-crossing"] .design-theme-button,
|
||||
html[data-design-theme="animal-crossing"] .theme-toggle {
|
||||
border-radius: 14px;
|
||||
}
|
||||
|
||||
html[data-design-theme="animal-crossing"] .card {
|
||||
background: rgba(255, 252, 240, 0.85);
|
||||
border: 1px solid rgba(109, 188, 126, 0.25);
|
||||
border-radius: 16px;
|
||||
box-shadow:
|
||||
0 2px 8px rgba(0, 0, 0, 0.06),
|
||||
0 1px 2px rgba(0, 0, 0, 0.03),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.9);
|
||||
}
|
||||
|
||||
html[data-design-theme="animal-crossing"] .card::before {
|
||||
display: none;
|
||||
}
|
||||
|
||||
html[data-design-theme="animal-crossing"] .card.pin {
|
||||
background: rgba(245, 242, 228, 0.88);
|
||||
}
|
||||
|
||||
html[data-design-theme="animal-crossing"] .card h2 {
|
||||
color: #5c4824;
|
||||
}
|
||||
|
||||
html[data-design-theme="animal-crossing"] .card p {
|
||||
color: #7a6040;
|
||||
}
|
||||
|
||||
html[data-design-theme="animal-crossing"] .card:hover,
|
||||
html[data-design-theme="animal-crossing"] .card:focus {
|
||||
color: var(--accent);
|
||||
transform: translateY(-2px);
|
||||
border-color: rgba(109, 188, 126, 0.45);
|
||||
box-shadow:
|
||||
0 8px 24px rgba(109, 188, 126, 0.2),
|
||||
0 4px 8px rgba(0, 0, 0, 0.08),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.95);
|
||||
}
|
||||
|
||||
html[data-design-theme="animal-crossing"] .card:hover h2,
|
||||
html[data-design-theme="animal-crossing"] .card:focus h2 {
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
html[data-design-theme="animal-crossing"] .card:hover p,
|
||||
html[data-design-theme="animal-crossing"] .card:focus p {
|
||||
color: #5c4824;
|
||||
}
|
||||
|
||||
html[data-design-theme="animal-crossing"] .beian a {
|
||||
color: #7a6040;
|
||||
}
|
||||
|
||||
html[data-design-theme="animal-crossing"] .beian a:hover {
|
||||
color: var(--accent);
|
||||
}
|
||||
```
|
||||
|
||||
- [ ] **Step 2: Verify light mode in browser**
|
||||
|
||||
Select "Animal Crossing" / "动森" in the dropdown with light mode active. Verify:
|
||||
- Background is warm cream (not white/dark)
|
||||
- Title has green-to-yellow gradient
|
||||
- Cards are creamy with rounded corners (16px)
|
||||
- Card hover shows green glow and lifts up
|
||||
- Control buttons have 14px border radius
|
||||
|
||||
- [ ] **Step 3: Commit**
|
||||
|
||||
```bash
|
||||
git add style.css
|
||||
git commit -m "feat: add animal-crossing light mode CSS"
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Task 4: Add CSS — dark mode
|
||||
|
||||
**Files:**
|
||||
- Modify: `style.css` (append immediately after the light-mode block from Task 3)
|
||||
|
||||
- [ ] **Step 1: Append dark-mode CSS block**
|
||||
|
||||
Immediately after the light-mode block (still before `@media (max-width: 600px)`), append:
|
||||
|
||||
```css
|
||||
html[data-theme="dark"][data-design-theme="animal-crossing"] {
|
||||
color-scheme: dark;
|
||||
|
||||
--accent: #9ed98a;
|
||||
--accent-rgb: 158, 217, 138;
|
||||
--accent-2: #86cb72;
|
||||
--accent-3: #6dbc5e;
|
||||
--accent-secondary-rgb: 245, 210, 90;
|
||||
|
||||
--page-gradient: #1e2d1e;
|
||||
--page-texture:
|
||||
radial-gradient(
|
||||
circle at 20% 50%,
|
||||
rgba(158, 217, 138, 0.06) 0%,
|
||||
transparent 50%
|
||||
),
|
||||
radial-gradient(
|
||||
circle at 80% 80%,
|
||||
rgba(245, 210, 90, 0.04) 0%,
|
||||
transparent 50%
|
||||
);
|
||||
--title-gradient: linear-gradient(
|
||||
135deg,
|
||||
#9ed98a 0%,
|
||||
#86cb72 40%,
|
||||
#f5d25a 100%
|
||||
);
|
||||
|
||||
--control-bg: rgba(25, 40, 25, 0.82);
|
||||
--control-border: rgba(158, 217, 138, 0.25);
|
||||
--control-inset: rgba(255, 255, 255, 0.04);
|
||||
--control-fg: #e8f4d8;
|
||||
}
|
||||
|
||||
html[data-theme="dark"][data-design-theme="animal-crossing"] body {
|
||||
color: #e8f4d8;
|
||||
}
|
||||
|
||||
html[data-theme="dark"][data-design-theme="animal-crossing"] .card {
|
||||
background: rgba(30, 48, 30, 0.82);
|
||||
border: 1px solid rgba(158, 217, 138, 0.18);
|
||||
border-radius: 16px;
|
||||
box-shadow:
|
||||
0 2px 8px rgba(0, 0, 0, 0.3),
|
||||
0 1px 2px rgba(0, 0, 0, 0.2),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.04);
|
||||
}
|
||||
|
||||
html[data-theme="dark"][data-design-theme="animal-crossing"] .card::before {
|
||||
display: none;
|
||||
}
|
||||
|
||||
html[data-theme="dark"][data-design-theme="animal-crossing"] .card.pin {
|
||||
background: rgba(38, 58, 38, 0.88);
|
||||
}
|
||||
|
||||
html[data-theme="dark"][data-design-theme="animal-crossing"] .card h2 {
|
||||
color: #e8f4d8;
|
||||
}
|
||||
|
||||
html[data-theme="dark"][data-design-theme="animal-crossing"] .card p {
|
||||
color: #b0c8a0;
|
||||
}
|
||||
|
||||
html[data-theme="dark"][data-design-theme="animal-crossing"] .card:hover,
|
||||
html[data-theme="dark"][data-design-theme="animal-crossing"] .card:focus {
|
||||
border-color: rgba(158, 217, 138, 0.45);
|
||||
box-shadow:
|
||||
0 8px 24px rgba(158, 217, 138, 0.2),
|
||||
0 4px 8px rgba(0, 0, 0, 0.3),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.05);
|
||||
}
|
||||
|
||||
html[data-theme="dark"][data-design-theme="animal-crossing"] .card:hover h2,
|
||||
html[data-theme="dark"][data-design-theme="animal-crossing"] .card:focus h2 {
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
html[data-theme="dark"][data-design-theme="animal-crossing"] .card:hover p,
|
||||
html[data-theme="dark"][data-design-theme="animal-crossing"] .card:focus p {
|
||||
color: #c8deb8;
|
||||
}
|
||||
|
||||
html[data-theme="dark"][data-design-theme="animal-crossing"] .design-theme-list {
|
||||
background: rgba(22, 36, 22, 0.9);
|
||||
box-shadow:
|
||||
0 12px 30px rgba(0, 0, 0, 0.55),
|
||||
0 6px 12px rgba(0, 0, 0, 0.35),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.04);
|
||||
}
|
||||
|
||||
html[data-theme="dark"][data-design-theme="animal-crossing"] .beian a {
|
||||
color: #b0c8a0;
|
||||
}
|
||||
|
||||
html[data-theme="dark"][data-design-theme="animal-crossing"] .beian a:hover {
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
html[data-design-theme="animal-crossing"] .card,
|
||||
html[data-design-theme="animal-crossing"] .design-theme-button,
|
||||
html[data-design-theme="animal-crossing"] .theme-toggle {
|
||||
transition-duration: 0.01ms !important;
|
||||
transform: none !important;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
- [ ] **Step 2: Verify dark mode in browser**
|
||||
|
||||
Toggle to dark mode while "Animal Crossing" theme is active. Verify:
|
||||
- Background is deep forest green `#1e2d1e` (not generic dark grey)
|
||||
- Title has soft lime-to-yellow gradient
|
||||
- Cards are dark forest green with subtle lime border
|
||||
- Card hover shows lime glow
|
||||
- Toggling back to light mode restores the cream palette
|
||||
|
||||
- [ ] **Step 3: Commit**
|
||||
|
||||
```bash
|
||||
git add style.css
|
||||
git commit -m "feat: add animal-crossing dark mode CSS"
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Task 5: Final verification
|
||||
|
||||
- [ ] **Step 1: Check theme persists across reload**
|
||||
|
||||
Select "Animal Crossing" in dark mode. Reload the page. Theme and dark/light preference should both be restored from `localStorage`.
|
||||
|
||||
- [ ] **Step 2: Check theme switching is clean**
|
||||
|
||||
Cycle through all 6 themes (Fluent → Material You → Terminal → Cyberpunk → Nord → Animal Crossing → Fluent). No visual artifacts or broken styles should appear at any step.
|
||||
|
||||
- [ ] **Step 3: Check forced-dark themes restore correctly**
|
||||
|
||||
While on Animal Crossing (light mode), switch to Terminal (forces dark). Then switch back to Animal Crossing — it should restore the light mode you had before.
|
||||
|
||||
- [ ] **Step 4: Run formatter**
|
||||
|
||||
```bash
|
||||
npm run fmt
|
||||
```
|
||||
|
||||
Confirm no diff beyond whitespace normalisation. Commit if formatter changed anything:
|
||||
|
||||
```bash
|
||||
git add -p
|
||||
git commit -m "style: run prettier after animal-crossing theme"
|
||||
```
|
||||
@@ -0,0 +1,93 @@
|
||||
# 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 | 🌿 |
|
||||
11
i18n.js
11
i18n.js
@@ -140,6 +140,7 @@ export const DESIGN_THEME_LABELS = {
|
||||
terminal: "终端",
|
||||
cyberpunk: "赛博朋克",
|
||||
nord: "Nord",
|
||||
"animal-crossing": "动森",
|
||||
},
|
||||
"zh-Hant": {
|
||||
fluent: "Fluent",
|
||||
@@ -147,6 +148,7 @@ export const DESIGN_THEME_LABELS = {
|
||||
terminal: "終端",
|
||||
cyberpunk: "賽博龐克",
|
||||
nord: "Nord",
|
||||
"animal-crossing": "動森",
|
||||
},
|
||||
en: {
|
||||
fluent: "Fluent",
|
||||
@@ -154,6 +156,7 @@ export const DESIGN_THEME_LABELS = {
|
||||
terminal: "Terminal",
|
||||
cyberpunk: "Cyberpunk",
|
||||
nord: "Nord",
|
||||
"animal-crossing": "Animal Crossing",
|
||||
},
|
||||
ja: {
|
||||
fluent: "Fluent",
|
||||
@@ -161,6 +164,7 @@ export const DESIGN_THEME_LABELS = {
|
||||
terminal: "ターミナル",
|
||||
cyberpunk: "サイバーパンク",
|
||||
nord: "Nord",
|
||||
"animal-crossing": "どうぶつの森",
|
||||
},
|
||||
ko: {
|
||||
fluent: "Fluent",
|
||||
@@ -168,6 +172,7 @@ export const DESIGN_THEME_LABELS = {
|
||||
terminal: "터미널",
|
||||
cyberpunk: "사이버펑크",
|
||||
nord: "Nord",
|
||||
"animal-crossing": "동물의 숲",
|
||||
},
|
||||
wenyan: {
|
||||
fluent: "流光",
|
||||
@@ -175,6 +180,7 @@ export const DESIGN_THEME_LABELS = {
|
||||
terminal: "终端",
|
||||
cyberpunk: "赛博",
|
||||
nord: "清寒",
|
||||
"animal-crossing": "森友",
|
||||
},
|
||||
mars: {
|
||||
fluent: "流↗光",
|
||||
@@ -182,6 +188,7 @@ export const DESIGN_THEME_LABELS = {
|
||||
terminal: "終↗★端",
|
||||
cyberpunk: "賽↘！博",
|
||||
nord: "清↗寒★",
|
||||
"animal-crossing": "动↗森★",
|
||||
},
|
||||
garbled: {
|
||||
fluent: "◼è▦",
|
||||
@@ -189,6 +196,7 @@ export const DESIGN_THEME_LABELS = {
|
||||
terminal: "¥¬▤▨¿¿",
|
||||
cyberpunk: "◼çæ¥烫¥",
|
||||
nord: "æ◽屯¿",
|
||||
"animal-crossing": "ä◼▤è",
|
||||
},
|
||||
bin: {
|
||||
fluent: "0101",
|
||||
@@ -196,6 +204,7 @@ export const DESIGN_THEME_LABELS = {
|
||||
terminal: "01010101",
|
||||
cyberpunk: "0101010101",
|
||||
nord: "0101010",
|
||||
"animal-crossing": "01010101",
|
||||
},
|
||||
meow: {
|
||||
fluent: "喵喵",
|
||||
@@ -203,6 +212,7 @@ export const DESIGN_THEME_LABELS = {
|
||||
terminal: "喵喵",
|
||||
cyberpunk: "喵喵喵喵",
|
||||
nord: "喵喵喵",
|
||||
"animal-crossing": "喵喵喵喵",
|
||||
},
|
||||
emoji: {
|
||||
fluent: "💧",
|
||||
@@ -210,6 +220,7 @@ export const DESIGN_THEME_LABELS = {
|
||||
terminal: "⌨️",
|
||||
cyberpunk: "⚡",
|
||||
nord: "❄️",
|
||||
"animal-crossing": "🌿",
|
||||
},
|
||||
}
|
||||
|
||||
|
||||
10
index.html
10
index.html
@@ -42,8 +42,9 @@
|
||||
<li role="option" data-value="cyberpunk" aria-selected="false">
|
||||
Cyberpunk
|
||||
</li>
|
||||
<li role="option" data-value="nord" aria-selected="false">
|
||||
Nord
|
||||
<li role="option" data-value="nord" aria-selected="false">Nord</li>
|
||||
<li role="option" data-value="animal-crossing" aria-selected="false">
|
||||
Animal Crossing
|
||||
</li>
|
||||
</ul>
|
||||
</label>
|
||||
@@ -110,7 +111,10 @@
|
||||
<div class="container">
|
||||
<main class="main">
|
||||
<h1 class="title" data-i18n="appTitle">
|
||||
物联网专业の在线学习平台<span class="title-cursor" aria-hidden="true"></span>
|
||||
物联网专业の在线学习平台<span
|
||||
class="title-cursor"
|
||||
aria-hidden="true"
|
||||
></span>
|
||||
</h1>
|
||||
<div class="grid" id="sites"></div>
|
||||
</main>
|
||||
|
||||
268
style.css
268
style.css
@@ -921,7 +921,6 @@ html[data-design-theme="cyberpunk"] .title {
|
||||
animation: cyberpunk-rgbShift 4.5s ease-in-out infinite;
|
||||
}
|
||||
|
||||
|
||||
html[data-design-theme="cyberpunk"] .title-cursor {
|
||||
display: none;
|
||||
}
|
||||
@@ -1419,7 +1418,12 @@ html[data-design-theme="nord"] {
|
||||
|
||||
--page-gradient: #2e3440;
|
||||
--page-texture: none;
|
||||
--title-gradient: linear-gradient(135deg, #88c0d0 0%, #81a1c1 50%, #5e81ac 100%);
|
||||
--title-gradient: linear-gradient(
|
||||
135deg,
|
||||
#88c0d0 0%,
|
||||
#81a1c1 50%,
|
||||
#5e81ac 100%
|
||||
);
|
||||
|
||||
--control-bg: rgba(59, 66, 82, 0.85);
|
||||
--control-border: rgba(76, 86, 106, 0.6);
|
||||
@@ -1439,7 +1443,12 @@ html[data-theme="dark"][data-design-theme="nord"] {
|
||||
|
||||
--page-gradient: #2e3440;
|
||||
--page-texture: none;
|
||||
--title-gradient: linear-gradient(135deg, #88c0d0 0%, #81a1c1 50%, #5e81ac 100%);
|
||||
--title-gradient: linear-gradient(
|
||||
135deg,
|
||||
#88c0d0 0%,
|
||||
#81a1c1 50%,
|
||||
#5e81ac 100%
|
||||
);
|
||||
|
||||
--control-bg: rgba(59, 66, 82, 0.85);
|
||||
--control-border: rgba(76, 86, 106, 0.6);
|
||||
@@ -1463,7 +1472,12 @@ html[data-theme="light"][data-design-theme="nord"] {
|
||||
|
||||
--page-gradient: #eceff4;
|
||||
--page-texture: none;
|
||||
--title-gradient: linear-gradient(135deg, #5e81ac 0%, #81a1c1 50%, #88c0d0 100%);
|
||||
--title-gradient: linear-gradient(
|
||||
135deg,
|
||||
#5e81ac 0%,
|
||||
#81a1c1 50%,
|
||||
#88c0d0 100%
|
||||
);
|
||||
|
||||
--control-bg: rgba(229, 233, 240, 0.85);
|
||||
--control-border: rgba(216, 222, 233, 0.8);
|
||||
@@ -1580,3 +1594,249 @@ html[data-theme="light"][data-design-theme="nord"] .beian a {
|
||||
html[data-theme="light"][data-design-theme="nord"] .beian a:hover {
|
||||
color: #5e81ac;
|
||||
}
|
||||
|
||||
/* ─── Animal Crossing — Sunny Meadow ───────────────────────── */
|
||||
html[data-design-theme="animal-crossing"] {
|
||||
color-scheme: light;
|
||||
|
||||
--accent: #6dbc7e;
|
||||
--accent-rgb: 109, 188, 126;
|
||||
--accent-2: #5aad6d;
|
||||
--accent-3: #4a9e5d;
|
||||
--accent-secondary-rgb: 244, 200, 66;
|
||||
|
||||
--page-gradient: linear-gradient(
|
||||
135deg,
|
||||
#fdf6e3 0%,
|
||||
#f5f0d8 25%,
|
||||
#fdf6e3 50%,
|
||||
#f8f2e0 75%,
|
||||
#fdf6e3 100%
|
||||
);
|
||||
--page-texture:
|
||||
radial-gradient(
|
||||
circle at 20% 50%,
|
||||
rgba(109, 188, 126, 0.08) 0%,
|
||||
transparent 50%
|
||||
),
|
||||
radial-gradient(
|
||||
circle at 80% 80%,
|
||||
rgba(244, 200, 66, 0.06) 0%,
|
||||
transparent 50%
|
||||
);
|
||||
--title-gradient: linear-gradient(
|
||||
135deg,
|
||||
#6dbc7e 0%,
|
||||
#5aad6d 40%,
|
||||
#f4c842 100%
|
||||
);
|
||||
|
||||
--control-bg: rgba(255, 252, 240, 0.82);
|
||||
--control-border: rgba(109, 188, 126, 0.35);
|
||||
--control-inset: rgba(255, 255, 255, 0.85);
|
||||
--control-fg: #5c4824;
|
||||
}
|
||||
|
||||
html[data-design-theme="animal-crossing"] body {
|
||||
color: #5c4824;
|
||||
}
|
||||
|
||||
html[data-design-theme="animal-crossing"] .design-theme-button,
|
||||
html[data-design-theme="animal-crossing"] .theme-toggle {
|
||||
border-radius: 50px;
|
||||
box-shadow: rgb(189, 174, 160) 0px 5px 0px 0px;
|
||||
font-weight: 600;
|
||||
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
html[data-design-theme="animal-crossing"] .design-theme-button:hover,
|
||||
html[data-design-theme="animal-crossing"] .theme-toggle:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: rgb(189, 174, 160) 0px 7px 0px 0px;
|
||||
border-color: rgba(109, 188, 126, 0.45);
|
||||
}
|
||||
|
||||
html[data-design-theme="animal-crossing"] .design-theme-button:active,
|
||||
html[data-design-theme="animal-crossing"] .theme-toggle:active {
|
||||
transform: translateY(5px);
|
||||
box-shadow: none;
|
||||
transition: all 0.1s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
html[data-design-theme="animal-crossing"] .card {
|
||||
background: rgba(255, 252, 240, 0.85);
|
||||
border: 1px solid rgba(109, 188, 126, 0.25);
|
||||
border-radius: 16px;
|
||||
box-shadow: rgb(189, 174, 160) 0px 5px 0px 0px;
|
||||
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
html[data-design-theme="animal-crossing"] .card::before {
|
||||
display: none;
|
||||
}
|
||||
|
||||
html[data-design-theme="animal-crossing"] .card.pin {
|
||||
background: rgba(245, 242, 228, 0.88);
|
||||
}
|
||||
|
||||
html[data-design-theme="animal-crossing"] .card h2 {
|
||||
color: #5c4824;
|
||||
}
|
||||
|
||||
html[data-design-theme="animal-crossing"] .card p {
|
||||
color: #7a6040;
|
||||
}
|
||||
|
||||
html[data-design-theme="animal-crossing"] .card:hover,
|
||||
html[data-design-theme="animal-crossing"] .card:focus {
|
||||
transform: translateY(-2px);
|
||||
border-color: rgba(109, 188, 126, 0.45);
|
||||
box-shadow: rgb(189, 174, 160) 0px 7px 0px 0px;
|
||||
}
|
||||
|
||||
html[data-design-theme="animal-crossing"] .card:active {
|
||||
transform: translateY(5px);
|
||||
box-shadow: none;
|
||||
transition: all 0.1s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
html[data-design-theme="animal-crossing"] .card:hover h2,
|
||||
html[data-design-theme="animal-crossing"] .card:focus h2 {
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
html[data-design-theme="animal-crossing"] .card:hover p,
|
||||
html[data-design-theme="animal-crossing"] .card:focus p {
|
||||
color: #5c4824;
|
||||
}
|
||||
|
||||
html[data-design-theme="animal-crossing"] .beian a {
|
||||
color: #7a6040;
|
||||
}
|
||||
|
||||
html[data-design-theme="animal-crossing"] .beian a:hover {
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
html[data-theme="dark"][data-design-theme="animal-crossing"] {
|
||||
color-scheme: dark;
|
||||
|
||||
--accent: #9ed98a;
|
||||
--accent-rgb: 158, 217, 138;
|
||||
--accent-2: #86cb72;
|
||||
--accent-3: #6dbc5e;
|
||||
--accent-secondary-rgb: 245, 210, 90;
|
||||
|
||||
--page-gradient: #1e2d1e;
|
||||
--page-texture:
|
||||
radial-gradient(
|
||||
circle at 20% 50%,
|
||||
rgba(158, 217, 138, 0.06) 0%,
|
||||
transparent 50%
|
||||
),
|
||||
radial-gradient(
|
||||
circle at 80% 80%,
|
||||
rgba(245, 210, 90, 0.04) 0%,
|
||||
transparent 50%
|
||||
);
|
||||
--title-gradient: linear-gradient(
|
||||
135deg,
|
||||
#9ed98a 0%,
|
||||
#86cb72 40%,
|
||||
#f5d25a 100%
|
||||
);
|
||||
|
||||
--control-bg: rgba(25, 40, 25, 0.82);
|
||||
--control-border: rgba(158, 217, 138, 0.25);
|
||||
--control-inset: rgba(255, 255, 255, 0.04);
|
||||
--control-fg: #e8f4d8;
|
||||
}
|
||||
|
||||
html[data-theme="dark"][data-design-theme="animal-crossing"] body {
|
||||
color: #e8f4d8;
|
||||
}
|
||||
|
||||
html[data-theme="dark"][data-design-theme="animal-crossing"] .card {
|
||||
background: rgba(30, 48, 30, 0.82);
|
||||
border: 1px solid rgba(158, 217, 138, 0.18);
|
||||
border-radius: 16px;
|
||||
box-shadow: rgb(15, 30, 15) 0px 5px 0px 0px;
|
||||
}
|
||||
|
||||
html[data-theme="dark"][data-design-theme="animal-crossing"] .card::before {
|
||||
display: none;
|
||||
}
|
||||
|
||||
html[data-theme="dark"][data-design-theme="animal-crossing"] .card.pin {
|
||||
background: rgba(38, 58, 38, 0.88);
|
||||
}
|
||||
|
||||
html[data-theme="dark"][data-design-theme="animal-crossing"] .card h2 {
|
||||
color: #e8f4d8;
|
||||
}
|
||||
|
||||
html[data-theme="dark"][data-design-theme="animal-crossing"] .card p {
|
||||
color: #b0c8a0;
|
||||
}
|
||||
|
||||
html[data-theme="dark"][data-design-theme="animal-crossing"] .card:hover,
|
||||
html[data-theme="dark"][data-design-theme="animal-crossing"] .card:focus {
|
||||
transform: translateY(-2px);
|
||||
border-color: rgba(158, 217, 138, 0.45);
|
||||
box-shadow: rgb(15, 30, 15) 0px 7px 0px 0px;
|
||||
}
|
||||
|
||||
html[data-theme="dark"][data-design-theme="animal-crossing"] .card:active {
|
||||
transform: translateY(5px);
|
||||
box-shadow: none;
|
||||
transition: all 0.1s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
html[data-theme="dark"][data-design-theme="animal-crossing"] .card:hover h2,
|
||||
html[data-theme="dark"][data-design-theme="animal-crossing"] .card:focus h2 {
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
html[data-theme="dark"][data-design-theme="animal-crossing"] .card:hover p,
|
||||
html[data-theme="dark"][data-design-theme="animal-crossing"] .card:focus p {
|
||||
color: #c8deb8;
|
||||
}
|
||||
|
||||
html[data-theme="dark"][data-design-theme="animal-crossing"]
|
||||
.design-theme-list {
|
||||
background: rgba(22, 36, 22, 0.9);
|
||||
box-shadow:
|
||||
0 12px 30px rgba(0, 0, 0, 0.55),
|
||||
0 6px 12px rgba(0, 0, 0, 0.35),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.04);
|
||||
}
|
||||
|
||||
html[data-theme="dark"][data-design-theme="animal-crossing"]
|
||||
.design-theme-button,
|
||||
html[data-theme="dark"][data-design-theme="animal-crossing"] .theme-toggle {
|
||||
box-shadow: rgb(15, 30, 15) 0px 5px 0px 0px;
|
||||
}
|
||||
|
||||
html[data-theme="dark"][data-design-theme="animal-crossing"]
|
||||
.design-theme-button:hover,
|
||||
html[data-theme="dark"][data-design-theme="animal-crossing"]
|
||||
.theme-toggle:hover {
|
||||
box-shadow: rgb(15, 30, 15) 0px 7px 0px 0px;
|
||||
}
|
||||
|
||||
html[data-theme="dark"][data-design-theme="animal-crossing"] .beian a {
|
||||
color: #b0c8a0;
|
||||
}
|
||||
|
||||
html[data-theme="dark"][data-design-theme="animal-crossing"] .beian a:hover {
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
html[data-design-theme="animal-crossing"] .card,
|
||||
html[data-design-theme="animal-crossing"] .design-theme-button,
|
||||
html[data-design-theme="animal-crossing"] .theme-toggle {
|
||||
transition-duration: 0.01ms !important;
|
||||
transform: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
9
theme.js
9
theme.js
@@ -1,4 +1,11 @@
|
||||
const DESIGN_THEMES = ["fluent", "material-you", "terminal", "cyberpunk", "nord"]
|
||||
const DESIGN_THEMES = [
|
||||
"fluent",
|
||||
"material-you",
|
||||
"terminal",
|
||||
"cyberpunk",
|
||||
"nord",
|
||||
"animal-crossing",
|
||||
]
|
||||
const FORCED_DARK_DESIGN_THEMES = new Set(["terminal", "cyberpunk"])
|
||||
const THEME_BEFORE_FORCED_KEY = "themeBeforeForcedDark"
|
||||
|
||||
|
||||
Reference in New Issue
Block a user