Dice Chess Wiki

Implementation Plan

2 min read

Внедрение системы тем (Theme Engine) и редизайн

В этом документе описан план архитектурного перехода от жестко заданных цветов к полноценной дизайн-системе на базе семантических переменных, а также сопутствующий редизайн интерфейса.

Цель (Objective)

  1. Создать масштабируемую систему переключения тем (с сохранением в localStorage).
  2. Добавить 3 базовые темы: dark (текущая улучшенная), light (светлая версия) и dracula (популярная контрастная тема).
  3. Провести рефакторинг компонентов, заменив специфичные классы Tailwind (например, bg-slate-900) на семантические (например, bg-surface).
  4. Внедрить современные дизайн-паттерны (стекломорфизм, радиальные градиенты на фоне), о которых мы говорили ранее.

Архитектурные изменения (Proposed Changes)

1. Настройка CSS-переменных и Tailwind v4

В Tailwind v4 конфигурация переехала в CSS. Мы создадим семантические токены и привяжем их к нашим CSS-переменным в зависимости от атрибута data-theme на теге <html>.

[MODIFY] src/app.css

Добавление директивы @theme и CSS-переменных:

  • Токены фонов: --bg-app, --bg-surface, --bg-surface-hover
  • Токены текста: --text-primary, --text-secondary, --text-muted
  • Токены границ и акцентов: --border-subtle, --accent, --accent-hover

2. Стейт-менеджмент темы (Theme Store)

Нам нужен глобальный реактивный store в Svelte 5 для управления темой и синхронизации с localStorage и DOM.

[NEW] src/lib/stores/themeStore.svelte.ts

Создание класса/стейта, который:

  • Считывает начальную тему из localStorage или системных настроек (prefers-color-scheme).
  • Обновляет document.documentElement.setAttribute('data-theme', theme).
  • Предоставляет метод для переключения тем.

[MODIFY] index.html

Добавление небольшого скрипта в <head>, чтобы избежать “вспышки нестилизованного контента” (FOUC), устанавливающего правильный data-theme до рендера Svelte.

3. Рефакторинг и Редизайн Компонентов

Мы пройдемся по всем основным компонентам и переведем их на новые утилиты, заодно улучшив внешний вид (добавим glassmorphism и переработаем типографику).

[MODIFY] src/App.svelte

  • Замена bg-slate-950 на bg-background.
  • Добавление селектора тем (Theme Switcher) в верхнюю панель навигации (header).
  • Улучшение типографики логотипа и навигации.

[MODIFY] src/components/GameList.svelte

  • Рефакторинг блока с пагинацией и заголовком списка игр.
  • Перевод состояний загрузки (loading) и ошибок на семантические цвета.

[MODIFY] src/components/GameCard.svelte

  • Полная переработка карточки:
    • Внедрение матового стекла: bg-surface/60 backdrop-blur-md.
    • Добавление эффектов при наведении: плавный подъем (-translate-y-1) и свечение тени цветом акцента.
    • Улучшенная верстка имен игроков и их рейтингов (выравнивание, более читаемый шрифт).

План тестирования (Verification Plan)

Ручное тестирование

  • Переключить темы через селектор в UI.
  • Убедиться, что выбранная тема сохраняется при перезагрузке страницы.
  • Проверить читабельность текста (контрастность) во всех трех темах (Dark, Light, Dracula).
  • Проверить наличие hover-эффектов на карточках игр.

> Требуется подтверждение

Подтвердите этот план, чтобы я начал вносить изменения в код. Если у вас есть пожелания по конкретным дополнительным темам (кроме Dark, Light, Dracula), дайте знать!

Graph View