create-ampless 0.2.0-alpha.2 → 0.2.0-alpha.20

package/dist/templates/_shared/lib/amplify.ts

@@ -1,9 +1,20 @@
-// Back-compat shim. The Amplify SDK is now configured by the admin's
-// `<AdminProviders>` bootstrap (mounted by the layout factory in
-// `@ampless/admin/pages`), so most call sites no longer need to call
-// `configureAmplify()` themselves. Kept as a no-op so any lingering
-// `import '@/lib/amplify'` side-effect imports stay safe.
+// Client-side Amplify SDK setup. Imported as a side-effect from
+// `app/providers.tsx` so it runs on every page load (public + admin +
+// login). `<AdminProviders>` (mounted by the admin layout factory)
+// also performs this configuration, but it only runs for routes under
+// the (admin) group; `/login` is a top-level route outside that group
+// and would otherwise hit "Auth UserPool not configured" because no
+// AdminProviders has bootstrapped the SDK yet.
+//
+// `Amplify.configure` is idempotent — calling it once at the root and
+// again inside AdminProviders is harmless.
+
+import { Amplify } from 'aws-amplify'
+import outputs from '../amplify_outputs.json'
+
+Amplify.configure(outputs, { ssr: true })
 
 export function configureAmplify() {
-  // intentionally empty — admin bootstrap handles this
+  // module-level side effect above already ran; keep this as a no-op
+  // for callers that still import it as a function for back-compat.
 }

package/dist/templates/_shared/package.json

@@ -8,7 +8,9 @@
     "build": "next build",
     "start": "next start",
     "lint": "next lint",
-    "sandbox": "ampx sandbox"
+    "sandbox": "ampx sandbox --once && next dev",
+    "update-ampless": "npx create-ampless@latest upgrade",
+    "copy-theme": "npx create-ampless@latest copy-theme"
   },
   "dependencies": {
     "@aws-amplify/adapter-nextjs": "^1.6.0",
@@ -20,15 +22,15 @@
     "@tiptap/pm": "^3.23.4",
     "@tiptap/react": "^3.23.4",
     "@tiptap/starter-kit": "^3.23.4",
-    "@ampless/plugin-og-image": "^0.2.0-alpha.1",
-    "@ampless/plugin-rss": "^0.2.0-alpha.1",
-    "@ampless/plugin-seo": "^0.2.0-alpha.1",
-    "@ampless/plugin-webhook": "^0.2.0-alpha.1",
-    "@ampless/admin": "^0.2.0-alpha.1",
-    "@ampless/backend": "^0.2.0-alpha.1",
-    "@ampless/runtime": "^0.2.0-alpha.1",
+    "@ampless/plugin-og-image": "^0.2.0-alpha.6",
+    "@ampless/plugin-rss": "^0.2.0-alpha.6",
+    "@ampless/plugin-seo": "^0.2.0-alpha.6",
+    "@ampless/plugin-webhook": "^0.2.0-alpha.6",
+    "@ampless/admin": "^0.2.0-alpha.18",
+    "@ampless/backend": "^0.2.0-alpha.8",
+    "@ampless/runtime": "^0.2.0-alpha.9",
     "@digital-go-jp/tailwind-theme-plugin": "^0.3.4",
-    "ampless": "^0.2.0-alpha.1",
+    "ampless": "^0.2.0-alpha.6",
     "aws-amplify": "^6.10.0",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",

package/dist/templates/_shared/proxy.ts

@@ -10,7 +10,24 @@
 // forwarding, multi-site Cache-Control override.
 
 import cmsConfig from './cms.config'
-import { createAmplessMiddleware, defaultMatcherConfig } from '@ampless/runtime/middleware'
+import { createAmplessMiddleware } from '@ampless/runtime/middleware'
 
 export const proxy = createAmplessMiddleware({ cmsConfig })
-export const config = defaultMatcherConfig
+
+// Next.js 16's Turbopack requires `config` to be a statically
+// analysable object literal — referencing an imported variable
+// (e.g. `defaultMatcherConfig` from @ampless/runtime/middleware)
+// causes a build error:
+//   "Next.js can't recognize the exported `config` field in route.
+//    It needs to be a static object."
+//
+// So we inline the matcher here. If you change it, keep it in sync
+// with `defaultMatcherConfig` documented in @ampless/runtime/middleware.
+// The matcher excludes admin / api / login / static assets /
+// amplify_outputs.json so the public-site proxy doesn't rewrite
+// legitimate non-blog routes.
+export const config = {
+  matcher: [
+    '/((?!admin|api|login|_next/static|_next/image|favicon\\.ico|amplify_outputs\\.json).*)',
+  ],
+}

package/dist/templates/blog/README.ja.md

@@ -0,0 +1,22 @@
+> English: [README.md](./README.md)
+> 
+# Blog テーマ
+
+shadcn/ui のデフォルトに準じたニュートラル系モノクロ。時系列の投稿フィード、個別投稿ページ、タグ別一覧を提供します。
+
+## カスタマイズ
+
+`/admin/sites/<siteId>/theme` で設定:
+
+- **プライマリカラー** — ボタン、リンク、強調表示の背景色
+- **アクセントカラー**
+- **フォーカスリング**
+- **破壊的操作** — 削除等の操作色
+- **角丸**
+- **本文フォント** — システムサンセリフ / セリフ (Georgia) / セリフ (Iowan) / 等幅
+- **トップに固定する記事のスラッグ** — 公開済み投稿を 1 件ホームの先頭に固定
+- **ロゴ画像 URL**
+- **ヘッダーナビ** — ラベル + URL のペア
+- **フッターリンク** — ラベル + URL のペア
+
+サイトごとのライト/ダークカラースキームは ampless の標準テーマトークン経由で反映されます。

package/dist/templates/blog/README.md

@@ -1,52 +1,22 @@
-# {{siteName}}
+> 日本語版: [README.ja.md](./README.ja.md)
+> 
+# Blog theme
 
-A blog site powered by [ampless](https://github.com/heavymoons/ampless).
+Neutral monochrome with shadcn/ui defaults. Chronological post feed, single-post page, and tag listing.
 
-## Getting Started
+## Customizing
 
-This project uses Amplify Gen 2 for the backend (Cognito, DynamoDB, S3) and Next.js for the frontend.
+In `/admin/sites/<siteId>/theme`:
 
-```bash
-# 1. Install dependencies
-npm install
+- **Primary color** — buttons, links, accent fills
+- **Accent color**
+- **Focus ring**
+- **Destructive** — color used for destructive actions
+- **Corner radius**
+- **Body font** — System sans / Serif (Georgia) / Serif (Iowan) / Monospace
+- **Featured post slug** — pin one published post to the top of the home page
+- **Logo image URL**
+- **Header navigation** — label + URL pairs
+- **Footer links** — label + URL pairs
 
-# 2. Start a personal AWS sandbox (terminal 1)
-#    Requires AWS credentials configured (`aws configure`).
-#    First run takes ~5–10 min to provision resources.
-#    Generates amplify_outputs.json when ready.
-npx ampx sandbox
-
-# 3. Start the Next.js dev server (terminal 2)
-npm run dev
-```
-
-Then open [http://localhost:3000](http://localhost:3000).
-
-## First admin user
-
-Open [http://localhost:3000/login](http://localhost:3000/login) and click **Create admin account**. The first user to register is automatically added to the `ampless-admin` Cognito group.
-
-After that, manage content from `/admin`:
-
-- `/admin` — dashboard
-- `/admin/posts` — list / create / edit posts (tiptap editor)
-- `/admin/media` — upload images to S3
-
-## Production deploy
-
-```bash
-git init && git add . && git commit -m "init"
-git remote add origin <your-repo>
-git push
-# Then connect the repo to AWS Amplify Hosting in the AWS console.
-```
-
-## Customize
-
-- `cms.config.ts` — site name, media delivery mode, plugins
-- `app/` — Next.js App Router pages (`(public)/` for the blog, `(admin)/` for the CMS)
-- `amplify/` — Amplify Gen 2 backend definitions (auth / data / storage)
-
-## Plugins
-
-Enabled: {{plugins}}
+Per-site light/dark color scheme is honored through the standard ampless theme tokens.

package/dist/templates/blog/tokens.css

@@ -7,48 +7,34 @@
  * loads, so `:root` selectors trump scoped attribute selectors of
  * equal specificity. The dispatcher emits `--primary` etc. only for
  * fields that have an override, leaving everything else to fall back
- * to these defaults. */
+ * to these defaults.
+ *
+ * Dark mode: tokens are declared with the CSS `light-dark(L, D)`
+ * function. The active `color-scheme` (set on `:root` and optionally
+ * pinned per-site via `html[data-color-scheme]`) selects whether L or
+ * D is rendered. `globals.css` opts the document into `color-scheme:
+ * light dark` by default — visitors with `prefers-color-scheme: dark`
+ * see the dark palette automatically.
+ */
 
 [data-theme='blog'] {
-  --background: oklch(1 0 0);
-  --foreground: oklch(0.145 0 0);
-  --card: oklch(1 0 0);
-  --card-foreground: oklch(0.145 0 0);
-  --primary: oklch(0.205 0 0);
-  --primary-foreground: oklch(0.985 0 0);
-  --secondary: oklch(0.97 0 0);
-  --secondary-foreground: oklch(0.205 0 0);
-  --muted: oklch(0.97 0 0);
-  --muted-foreground: oklch(0.556 0 0);
-  --accent: oklch(0.97 0 0);
-  --accent-foreground: oklch(0.205 0 0);
-  --destructive: oklch(0.577 0.245 27.325);
-  --destructive-foreground: oklch(0.985 0 0);
-  --border: oklch(0.922 0 0);
-  --input: oklch(0.922 0 0);
-  --ring: oklch(0.708 0 0);
+  --background: light-dark(oklch(1 0 0), oklch(0.145 0 0));
+  --foreground: light-dark(oklch(0.145 0 0), oklch(0.985 0 0));
+  --card: light-dark(oklch(1 0 0), oklch(0.145 0 0));
+  --card-foreground: light-dark(oklch(0.145 0 0), oklch(0.985 0 0));
+  --primary: light-dark(oklch(0.205 0 0), oklch(0.985 0 0));
+  --primary-foreground: light-dark(oklch(0.985 0 0), oklch(0.205 0 0));
+  --secondary: light-dark(oklch(0.97 0 0), oklch(0.269 0 0));
+  --secondary-foreground: light-dark(oklch(0.205 0 0), oklch(0.985 0 0));
+  --muted: light-dark(oklch(0.97 0 0), oklch(0.269 0 0));
+  --muted-foreground: light-dark(oklch(0.556 0 0), oklch(0.708 0 0));
+  --accent: light-dark(oklch(0.97 0 0), oklch(0.269 0 0));
+  --accent-foreground: light-dark(oklch(0.205 0 0), oklch(0.985 0 0));
+  --destructive: light-dark(oklch(0.577 0.245 27.325), oklch(0.396 0.141 25.723));
+  --destructive-foreground: light-dark(oklch(0.985 0 0), oklch(0.985 0 0));
+  --border: light-dark(oklch(0.922 0 0), oklch(0.269 0 0));
+  --input: light-dark(oklch(0.922 0 0), oklch(0.269 0 0));
+  --ring: light-dark(oklch(0.708 0 0), oklch(0.439 0 0));
   --radius: 0.5rem;
   --ampless-body-font: system-ui, -apple-system, sans-serif;
 }
-
-@media (prefers-color-scheme: dark) {
-  [data-theme='blog'] {
-    --background: oklch(0.145 0 0);
-    --foreground: oklch(0.985 0 0);
-    --card: oklch(0.145 0 0);
-    --card-foreground: oklch(0.985 0 0);
-    --primary: oklch(0.985 0 0);
-    --primary-foreground: oklch(0.205 0 0);
-    --secondary: oklch(0.269 0 0);
-    --secondary-foreground: oklch(0.985 0 0);
-    --muted: oklch(0.269 0 0);
-    --muted-foreground: oklch(0.708 0 0);
-    --accent: oklch(0.269 0 0);
-    --accent-foreground: oklch(0.985 0 0);
-    --destructive: oklch(0.396 0.141 25.723);
-    --destructive-foreground: oklch(0.985 0 0);
-    --border: oklch(0.269 0 0);
-    --input: oklch(0.269 0 0);
-    --ring: oklch(0.439 0 0);
-  }
-}

package/dist/templates/corporate/README.ja.md

@@ -0,0 +1,18 @@
+> English: [README.md](./README.md)
+> 
+# Corporate テーマ
+
+企業サイト向けの落ち着いたレイアウト。明るい背景にネイビーの配色、ヒーロー + お知らせ一覧構成、ヘッダー / フッターナビ付き。
+
+## カスタマイズ
+
+`/admin/sites/<siteId>/theme` で設定:
+
+- **タグライン** — ヒーロー内、サイト名の上に表示される短いフレーズ
+- **プライマリカラー**
+- **角丸**
+- **トップストーリーのスラッグ** — ヒーローとお知らせ一覧の間に公開済み投稿を 1 件フィーチャー
+- **ロゴ画像 URL**
+- **ヘッダーナビ** — ラベル + URL のペア
+- **フッターリンク** — ラベル + URL のペア
+- **フッター注記** — 住所 / 会社情報 / 追加の注意書き

package/dist/templates/corporate/README.md

@@ -1,20 +1,18 @@
-# {{siteName}}
+> 日本語版: [README.ja.md](./README.ja.md)
+> 
+# Corporate theme
 
-Corporate / company-site theme: navy on near-white, hero + news layout, header + footer navigation.
+Conservative business / company-site layout with hero and news section. Navy on near-white, header + footer navigation.
 
 ## Customizing
 
 In `/admin/sites/<siteId>/theme`:
 
-- Tagline (small line above the site name in the hero)
-- Header navigation (label + URL pairs)
-- Footer links + legend (address / company info / extra small print)
-- Primary color, corner radius
-
-## Getting started
-
-```bash
-npm install
-npx ampx sandbox
-npm run dev
-```
+- **Tagline** — short phrase shown above the site name in the hero
+- **Primary color**
+- **Corner radius**
+- **Top story slug** — feature one published post between the hero and the news section
+- **Logo image URL**
+- **Header navigation** — label + URL pairs
+- **Footer links** — label + URL pairs
+- **Footer legend** — address / company info / extra small print

package/dist/templates/corporate/tokens.css

@@ -3,45 +3,23 @@
  * selector pattern as the other themes. */
 
 [data-theme='corporate'] {
-  --background: oklch(0.99 0 0);
-  --foreground: oklch(0.18 0.02 250);
-  --card: oklch(1 0 0);
-  --card-foreground: oklch(0.18 0.02 250);
-  --primary: oklch(0.4 0.13 250);
-  --primary-foreground: oklch(0.99 0 0);
-  --secondary: oklch(0.95 0.01 250);
-  --secondary-foreground: oklch(0.25 0.05 250);
-  --muted: oklch(0.96 0.005 250);
-  --muted-foreground: oklch(0.5 0.02 250);
-  --accent: oklch(0.95 0.02 250);
-  --accent-foreground: oklch(0.3 0.08 250);
-  --destructive: oklch(0.55 0.22 25);
-  --destructive-foreground: oklch(0.99 0 0);
-  --border: oklch(0.9 0.005 250);
-  --input: oklch(0.9 0.005 250);
-  --ring: oklch(0.4 0.13 250);
+  --background: light-dark(oklch(0.99 0 0), oklch(0.16 0.02 250));
+  --foreground: light-dark(oklch(0.18 0.02 250), oklch(0.96 0.005 250));
+  --card: light-dark(oklch(1 0 0), oklch(0.22 0.02 250));
+  --card-foreground: light-dark(oklch(0.18 0.02 250), oklch(0.96 0.005 250));
+  --primary: light-dark(oklch(0.4 0.13 250), oklch(0.7 0.14 250));
+  --primary-foreground: light-dark(oklch(0.99 0 0), oklch(0.16 0.02 250));
+  --secondary: light-dark(oklch(0.95 0.01 250), oklch(0.28 0.03 250));
+  --secondary-foreground: light-dark(oklch(0.25 0.05 250), oklch(0.96 0.005 250));
+  --muted: light-dark(oklch(0.96 0.005 250), oklch(0.26 0.02 250));
+  --muted-foreground: light-dark(oklch(0.5 0.02 250), oklch(0.7 0.02 250));
+  --accent: light-dark(oklch(0.95 0.02 250), oklch(0.32 0.05 250));
+  --accent-foreground: light-dark(oklch(0.3 0.08 250), oklch(0.96 0.005 250));
+  --destructive: light-dark(oklch(0.55 0.22 25), oklch(0.55 0.22 25));
+  --destructive-foreground: light-dark(oklch(0.99 0 0), oklch(0.99 0 0));
+  --border: light-dark(oklch(0.9 0.005 250), oklch(0.32 0.02 250));
+  --input: light-dark(oklch(0.9 0.005 250), oklch(0.32 0.02 250));
+  --ring: light-dark(oklch(0.4 0.13 250), oklch(0.7 0.14 250));
   --radius: 0.25rem;
   --ampless-body-font: system-ui, -apple-system, sans-serif;
 }
-
-@media (prefers-color-scheme: dark) {
-  [data-theme='corporate'] {
-    --background: oklch(0.16 0.02 250);
-    --foreground: oklch(0.96 0.005 250);
-    --card: oklch(0.22 0.02 250);
-    --card-foreground: oklch(0.96 0.005 250);
-    --primary: oklch(0.7 0.14 250);
-    --primary-foreground: oklch(0.16 0.02 250);
-    --secondary: oklch(0.28 0.03 250);
-    --secondary-foreground: oklch(0.96 0.005 250);
-    --muted: oklch(0.26 0.02 250);
-    --muted-foreground: oklch(0.7 0.02 250);
-    --accent: oklch(0.32 0.05 250);
-    --accent-foreground: oklch(0.96 0.005 250);
-    --destructive: oklch(0.55 0.22 25);
-    --destructive-foreground: oklch(0.99 0 0);
-    --border: oklch(0.32 0.02 250);
-    --input: oklch(0.32 0.02 250);
-    --ring: oklch(0.7 0.14 250);
-  }
-}

package/dist/templates/dads/README.ja.md

@@ -0,0 +1,31 @@
+> English: [README.md](./README.md)
+> 
+# DADS テーマ
+
+デジタル庁デザインシステム準拠のレイアウト。政府・自治体・公共系サイト向け。高コントラスト、アクセシビリティ重視、装飾控えめ。公式の **[デジタル庁デザインシステム Tailwind プラグイン](https://github.com/digital-go-jp/tailwind-theme-plugin)**（`@digital-go-jp/tailwind-theme-plugin`、MIT）をベースに構築されています。
+
+## プラグインが提供する機能
+
+- **カラーパレット** — プライマリカラーに `solidBlue`（`#0017c1`）を使用し、DADS の全スケール（ライトブルー、シアン、グリーン、ライム、イエロー、オレンジ、レッド、マゼンタ）を Tailwind クラス（`bg-blue-900`、`text-blue-50` など）で利用可能
+- **タイポグラフィ** — プラグイン経由で `fontFamily.sans` に Noto Sans JP を設定。`--ampless-body-font` として参照可能
+- **ボーダー半径** — `rounded-4` / `rounded-6` が利用可能
+
+`tokens.css` がプラグインの CSS 変数（`--color-blue-900` など）を ampless 標準のテーマ変数（`--primary`、`--background` など）にバインドするため、共有 chrome（SiteHeader、SiteFooter、shadcn ボタンなど）が自動的に DADS カラーで描画されます。
+
+DADS が新しいパレットバージョンを公開した場合、`@digital-go-jp/tailwind-theme-plugin` をバージョンアップするだけでテーマに反映されます。
+
+## カスタマイズ
+
+`/admin/sites/<siteId>/theme` で設定:
+
+- **ロゴ画像 URL** — 組織マーク
+- **プライマリカラー** — デフォルトは DADS の `solidBlue`。DADS 以外の色に変更するとサイトは DADS 準拠ではなくなります。
+- **トップストーリーのスラッグ** — ヒーローとお知らせ一覧の間に公開済み投稿を 1 件フィーチャー
+- **ヘッダーナビ** — ラベル + URL のペア
+- **フッターリンク** — ラベル + URL のペア
+- **フッター注記** — 住所 / 機関情報 / 追加の注意書き
+
+## 注意事項
+
+- ダークモードは反転色による近似実装です。プラグイン 0.3.4 時点では DADS の公式ダークパレットは存在しません。公式ダークパレットが公開された際は、`tokens.css` のダーク変数バインディングを更新してください。
+- このプラグインはデザイントークンのみを提供します。フル DADS コンポーネント（ボタン、アラート、タブなど）については [design-system-example-components](https://github.com/digital-go-jp/design-system-example-components) を参照し、必要に応じて取り込んでください。

package/dist/templates/dads/README.md

@@ -1,6 +1,8 @@
-# {{siteName}}
+> 日本語版: [README.ja.md](./README.ja.md)
+> 
+# DADS theme
 
-DADS theme — built on the official **[Digital Agency Design System Tailwind plugin](https://github.com/digital-go-jp/tailwind-theme-plugin)** (`@digital-go-jp/tailwind-theme-plugin`, MIT). Color palette and typography conform to DADS specifications, suitable for Japanese government / public-sector / institutional sites.
+Government / public-sector layout following the Digital Agency Design System aesthetic. High contrast, accessibility-first, minimal decoration. Built on the official **[Digital Agency Design System Tailwind plugin](https://github.com/digital-go-jp/tailwind-theme-plugin)** (`@digital-go-jp/tailwind-theme-plugin`, MIT).
 
 ## What's plugin-backed
 
@@ -8,28 +10,22 @@ DADS theme — built on the official **[Digital Agency Design System Tailwind pl
 - **Typography** — `fontFamily.sans` set to Noto Sans JP via the plugin; surfaced through `--ampless-body-font`
 - **Border radii** — `rounded-4` / `rounded-6` available
 
-`templates/dads/tokens.css` binds the plugin's CSS variables (`--color-blue-900` etc.) to ampless's standard theme variables (`--primary`, `--background`, ...) so all shared chrome (SiteHeader, SiteFooter, shadcn buttons, etc.) automatically renders in DADS colors.
+`tokens.css` binds the plugin's CSS variables (`--color-blue-900` etc.) to the standard ampless theme variables (`--primary`, `--background`, ...) so all shared chrome (SiteHeader, SiteFooter, shadcn buttons, etc.) automatically renders in DADS colors.
 
-When DADS publishes a new palette version, bumping `@digital-go-jp/tailwind-theme-plugin` in `package.json` is enough — the theme picks it up.
+When DADS publishes a new palette version, bumping `@digital-go-jp/tailwind-theme-plugin` is enough — the theme picks it up.
 
 ## Customizing
 
 In `/admin/sites/<siteId>/theme`:
 
-- **Logo image URL** — branding (organization mark)
-- **Primary color** — defaults to DADS solidBlue. Changing to a non-DADS color makes the site no longer DADS-conformant.
-- **Top story slug** — feature one published post between hero and news
-- **Header navigation / Footer links / Footer legend**
+- **Logo image URL** — organization mark
+- **Primary color** — defaults to DADS `solidBlue`. Changing to a non-DADS color makes the site no longer DADS-conformant.
+- **Top story slug** — feature one published post between the hero and the news section
+- **Header navigation** — label + URL pairs
+- **Footer links** — label + URL pairs
+- **Footer legend** — address / agency info / extra small print
 
 ## Notes
 
-- Dark mode uses an inverted approximation. DADS doesn't ship an official dark palette as of plugin 0.3.4; when one lands, update `templates/dads/tokens.css` to bind the dark variables.
+- Dark mode uses an inverted approximation. DADS doesn't ship an official dark palette as of plugin 0.3.4; when one lands, update `tokens.css` to bind the dark variables.
 - The plugin only provides design tokens. For full DADS components (buttons, alerts, tabs, etc.), see [design-system-example-components](https://github.com/digital-go-jp/design-system-example-components) and adapt as needed.
-
-## Getting started
-
-```bash
-npm install
-npx ampx sandbox
-npm run dev
-```

package/dist/templates/dads/tokens.css

@@ -13,26 +13,31 @@
  * enough; we don't hardcode hex values here. The fallbacks after
  * each `var(...)` are the DADS values from version 0.3.4 in case
  * the plugin isn't loaded for some reason.
+ *
+ * Dark mode: DADS doesn't ship an official dark palette as of v0.3.4,
+ * so the D side of `light-dark()` here is an inverted approximation.
+ * When DADS adds a dark variant, bind the D arg to the corresponding
+ * plugin variables (e.g. `var(--color-blue-300)` for primary).
  */
 
 [data-theme='dads'] {
-  --background: #ffffff;
-  --foreground: #1a1a1c;
-  --card: #ffffff;
-  --card-foreground: #1a1a1c;
-  --primary: var(--color-blue-900, #0017c1);
-  --primary-foreground: #ffffff;
-  --secondary: var(--color-blue-50, #e8f1fe);
-  --secondary-foreground: var(--color-blue-900, #0017c1);
-  --muted: #f5f5f5;
-  --muted-foreground: #595959;
-  --accent: var(--color-blue-50, #e8f1fe);
-  --accent-foreground: var(--color-blue-900, #0017c1);
-  --destructive: var(--color-red-900, #ce0000);
-  --destructive-foreground: #ffffff;
-  --border: #d9d9d9;
-  --input: #d9d9d9;
-  --ring: var(--color-blue-900, #0017c1);
+  --background: light-dark(#ffffff, #1a1a1c);
+  --foreground: light-dark(#1a1a1c, #f0f0f0);
+  --card: light-dark(#ffffff, #232327);
+  --card-foreground: light-dark(#1a1a1c, #f0f0f0);
+  --primary: light-dark(var(--color-blue-900, #0017c1), var(--color-blue-300, #9db7f9));
+  --primary-foreground: light-dark(#ffffff, #1a1a1c);
+  --secondary: light-dark(var(--color-blue-50, #e8f1fe), #2c2f3a);
+  --secondary-foreground: light-dark(var(--color-blue-900, #0017c1), #f0f0f0);
+  --muted: light-dark(#f5f5f5, #28282c);
+  --muted-foreground: light-dark(#595959, #b3b3b3);
+  --accent: light-dark(var(--color-blue-50, #e8f1fe), #2c2f3a);
+  --accent-foreground: light-dark(var(--color-blue-900, #0017c1), #f0f0f0);
+  --destructive: light-dark(var(--color-red-900, #ce0000), var(--color-red-700, #fa0000));
+  --destructive-foreground: light-dark(#ffffff, #ffffff);
+  --border: light-dark(#d9d9d9, #3a3a3f);
+  --input: light-dark(#d9d9d9, #3a3a3f);
+  --ring: light-dark(var(--color-blue-900, #0017c1), var(--color-blue-300, #9db7f9));
   --radius: 0.25rem;
   /* DADS recommends Noto Sans JP for body text. The plugin sets
    * fontFamily.sans to it; we surface that through our usual
@@ -40,28 +45,3 @@
    * up consistently. */
   --ampless-body-font: 'Noto Sans JP', -apple-system, BlinkMacSystemFont, sans-serif;
 }
-
-@media (prefers-color-scheme: dark) {
-  [data-theme='dads'] {
-    /* DADS doesn't ship an official dark palette as of v0.3.4; this
-     * is an inverted approximation. When DADS adds a dark variant,
-     * bind these to the corresponding plugin variables. */
-    --background: #1a1a1c;
-    --foreground: #f0f0f0;
-    --card: #232327;
-    --card-foreground: #f0f0f0;
-    --primary: var(--color-blue-300, #9db7f9);
-    --primary-foreground: #1a1a1c;
-    --secondary: #2c2f3a;
-    --secondary-foreground: #f0f0f0;
-    --muted: #28282c;
-    --muted-foreground: #b3b3b3;
-    --accent: #2c2f3a;
-    --accent-foreground: #f0f0f0;
-    --destructive: var(--color-red-700, #fa0000);
-    --destructive-foreground: #ffffff;
-    --border: #3a3a3f;
-    --input: #3a3a3f;
-    --ring: var(--color-blue-300, #9db7f9);
-  }
-}

package/dist/templates/docs/README.ja.md

@@ -0,0 +1,24 @@
+> English: [README.md](./README.md)
+> 
+# Docs テーマ
+
+サイドバー主導のドキュメントレイアウト。サイドバー項目は通常のリンクに加え、**タグ駆動セクション**を組み合わせられます — `tag:<name>` 形式の項目を入れると、そのタグが付いた公開済み投稿の一覧に自動展開されます。タグでコンテンツを整理するだけでナビゲーションに自動反映されます。
+
+## カスタマイズ
+
+`/admin/sites/<siteId>/theme` で設定:
+
+- **プライマリカラー**
+- **角丸**
+- **コードフォント** — システム等幅 / JetBrains Mono
+- **サイドバーナビ** — 各行は `ラベル` + `URL`。URL には以下を指定可能:
+  - パス（`/getting-started`）
+  - 外部 URL（`https://...`）
+  - タグ参照（`tag:tutorials`）→ 見出し + タグ付き投稿一覧として描画
+- **ロゴ画像 URL**
+- **ヘッダーナビ** — トップレベルのリンク
+- **フッターリンク** — ラベル + URL のペア
+
+## 執筆のヒント
+
+投稿に `guide` タグを付けて、サイドバーに URL `tag:guide` の行を追加するだけ。新しい記事を公開しても手動でリンクを編集する必要はなく、サイドバーに自動で並びます。

package/dist/templates/docs/README.md

@@ -1,27 +1,24 @@
-# {{siteName}}
+> 日本語版: [README.ja.md](./README.ja.md)
+> 
+# Docs theme
 
-Docs theme: sidebar-led documentation layout. The sidebar combines plain links with **tag-driven sections** — entering a URL like `tag:guide` in the sidebar nav field auto-expands to a list of every published post tagged "guide". Lets writers organize content by tag and have it appear in nav automatically.
+Sidebar-led documentation layout. The sidebar combines plain links with **tag-driven sections** — a sidebar entry of the form `tag:<name>` auto-expands into a list of every published post with that tag. Lets writers organize content by tag and have it appear in nav automatically.
 
 ## Customizing
 
 In `/admin/sites/<siteId>/theme`:
 
+- **Primary color**
+- **Corner radius**
+- **Code font** — System monospace / JetBrains Mono
 - **Sidebar navigation** — each row is `Label` + `URL`. The URL can be:
   - a path (`/getting-started`)
   - an external URL (`https://...`)
   - a tag reference (`tag:tutorials`) → renders as a heading + list of tagged posts
-- Header navigation (top-level links)
-- Code font (system mono / JetBrains Mono / etc.)
-- Primary color, corner radius
+- **Logo image URL**
+- **Header navigation** — top-level links
+- **Footer links** — label + URL pairs
 
 ## Authoring tip
 
 Tag a post `guide` (in the post editor) and add a sidebar row with URL `tag:guide`. The sidebar will list that post automatically — no manual link editing every time you publish.
-
-## Getting started
-
-```bash
-npm install
-npx ampx sandbox
-npm run dev
-```