Система тем

AstroGlass включает гибкую систему динамических тем, построенную на основе Tailwind CSS v4 и компонентной архитектуры Astro.

Обзор архитектуры

Система тем состоит из трёх основных слоёв:

1. Реестр тем: Определения каждой темы в src/config/themes.ts.
2. CSS-переменные: Тематические переменные в src/styles/_themes.css.
3. Динамический рендеринг: Страница [theme].astro динамически отображает правильный вариант компонента для каждой секции.

Реестр тем

Каждая тема зарегистрирована в src/config/themes.ts:

export const themes: ThemeDefinition[] = [
  {
    id: 'liquid',
    name: 'Liquid',
    color: 'from-blue-500 to-cyan-400',
    icon: '💧',
    sections: ['Header', 'Hero', 'About', 'Features', 'Portfolio', 'Pricing', 'Testimonial', 'FAQ', 'CTA', 'Contact', 'Footer'],
    enabled: true,
    premium: false,
    description: 'Fluid, organic design with smooth animations',
  },
  // Glass, Neo, Luxury, Minimal, Aurora...
];

CSS-переменные

Цвета и эффекты тем контролируются через CSS-переменные с атрибутом 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%;   /* Текст */
}

Динамический рендеринг компонентов

Тематические страницы отображаются через src/pages/[theme].astro с использованием карты компонентов:

---
const componentMap = {
  liquid: { Header: HeaderLiquid, Hero: HeroLiquid, About: AboutLiquid, ... },
  glass: { ... },
  aurora: { ... },
};
const components = componentMap[themeId];
---
<components.Header />
<components.Hero />
<components.About />

Создание новой темы