add theme

CLAUDE.md

@@ -0,0 +1,34 @@
+# CLAUDE.md
+
+This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
+
+## Commands
+
+```bash
+npm start          # Dev server (production mode)
+npm run build      # Production build
+npm run build:staging  # Staging build
+npm run fmt        # Format with Prettier (*.js, style.css, index.html)
+```
+
+No test suite exists. Prettier is the only code quality tool.
+
+## Architecture
+
+This is a static IoT learning portal — a single-page app built with vanilla JS and Vite. No framework.
+
+**Module responsibilities:**
+- `main.js` — entry point, calls `initApp()`
+- `app.js` — application lifecycle: reads localStorage, wires event listeners, orchestrates everything
+- `data.js` — registry of external learning platform links (OJ, code runners, books, etc.)
+- `render.js` — generates HTML for site cards and pins from `data.js` entries
+- `i18n.js` — translation system with a `t()` function; supports 11 language variants (Chinese variants, EN, JA, KO, plus joke languages: wenyan, mars, garbled, binary, meow, emoji)
+- `theme.js` — manages 4 design themes (Fluent, Material You, Terminal, Cyberpunk) and dark/light toggle
+
+**Data flow:** `app.js` → reads prefs from `localStorage` → calls `render.js` to build the card grid from `data.js` → applies theme via `theme.js` → uses `i18n.js` for all UI strings.
+
+**State persistence:** language, design theme, and dark/light preference are all stored in `localStorage`.
+
+**Site URLs** are injected at build time via `import.meta.env.VITE_*` environment variables.
+
+**Themes:** Terminal and Cyberpunk force dark mode; the light/dark toggle is disabled for those themes.