テーマシステム

AstroGlass は、Tailwind CSS v4 と Astro のコンポーネントアーキテクチャの上に構築された、非常に柔軟な動的テーマ機能を備えています。

アーキテクチャの概要

テーマシステムは、3つの主要なレイヤーで構成されています：

テーマレジストリ: src/config/themes.ts にある各テーマの定義。
CSS カスタムプロパティ: src/styles/_themes.css で定義されたテーマ対応の変数。
動的レンダリング: [theme].astro ページは、各セクションに対して正しいコンポーネントバリアントを動的にレンダリングします。

テーマレジストリ

すべてのテーマは src/config/themes.ts に登録されています。これにより、テーマのメタデータが一元化され、アプリケーション全体で利用できるようになります。

src/
- config/
  - themes.ts

各テーマの定義には以下が含まれます：

export const themes: ThemeDefinition[] = [
  {
    id: 'liquid',
    name: 'Liquid',
    color: 'from-blue-500 to-cyan-400',  // Tailwind グラデーションクラス
    icon: '💧',
    sections: ['Header', 'Hero', 'About', 'Features', 'Portfolio', 'Pricing', 'Testimonial', 'FAQ', 'CTA', 'Contact', 'Footer'],
    enabled: true,
    premium: false,
    description: '滑らかなアニメーションを伴う、有機的で流れるようなデザイン',
  },
  // Glass, Neo, Luxury, Minimal, Aurora...
];

CSS 変数

テーマ固有の色と効果は、CSS カスタムプロパティによって制御されます。変数は、<html> または <body> タグの data-theme 属性にスコープされています。

[data-theme="liquid"] {
  --p: 260 80% 60%;    /* プライマリ */
  --s: 310 80% 60%;    /* セカンダリ */
  --a: 190 90% 60%;    /* アクセント */
  --b1: 220 20% 10%;   /* ベース背景 */
  --bc: 220 20% 90%;   /* ベースコンテンツ (テキスト) */
}

コンポーネントは hsl(var(--p)) または Tailwind ユーティリティを介してこれらを消費します：

<div class="bg-[hsl(var(--p))] text-[hsl(var(--bc))]">
  テーマが適用されたコンテンツ
</div>

⚠️

命名規則

変数は、プロジェクト全体で使用されている DaisyUI に影響された命名規則と一致させるために、短い名前（--p, --s, --a, --b1, --bc, --er, --su）を使用しています。

コンポーネントの動的レンダリング

テーマページは src/pages/[theme].astro によってレンダリングされます。このファイルは コンポーネントマップ を使用して、各セクションの正しいバリアントを動的に選択します：

---
const componentMap = {
  liquid: {
    Header: HeaderLiquid,
    Hero: HeroLiquid,
    About: AboutLiquid,
    Features: FeaturesLiquid,
    // ... 12以上のセクション
  },
  glass: { /* ... */ },
  neo: { /* ... */ },
  luxury: { /* ... */ },
  minimal: { /* ... */ },
  aurora: { /* ... */ },
};

const components = componentMap[themeId];
---

<components.Header />
<components.Hero />
<components.About />
<!-- ... -->

ℹ️

各セクションのバリアントは、自己完結型の Astro コンポーネントです。内部ですべてのテキストに useTranslations() を使用しているため、外部のプロパティ（Props）は不要です。これにより、各テーマが均一な API を維持しながら、まったく異なる HTML 構造を持つことが可能になります。

新しいテーマの作成

テーマ定義の追加

テーマ定義オブジェクトを src/config/themes.ts に追加します。
CSS 変数の定義

新しいテーマの CSS 変数を src/styles/_themes.css に定義します。
セクションコンポーネントの作成

各セクションに対してテーマ固有のコンポーネントバリアントを作成します（例：src/components/sections/hero/HeroMyTheme.astro）。
コンポーネントマップへの登録

新しいテーマのコンポーネントを src/pages/[theme].astro 内の componentMap に追加します。
翻訳の追加

必要に応じて、src/locales/ 内の JSON ファイルに新しいローカライズされた文字列を追加します。

アーキテクチャの概要

テーマレジストリ

CSS 変数

コンポーネントの動的レンダリング

新しいテーマの作成

目次