Dice Chess Wiki

Walkthrough

2 min read

Обновление UI: Theme Engine & Стекломорфизм

Я успешно завершил работу по внедрению системы тем и редизайну компонентов! 🎉

Что было сделано

1. Архитектура тем (Tailwind CSS v4)

  • Мы отказались от жестко прописанных цветов (bg-slate-900, text-slate-100) во всем приложении.
  • В app.css добавлены CSS-переменные для трех базовых тем:
    • Dark Theme (улучшенная текущая)
    • Light Theme (светлая версия)
    • Dracula (яркая высококонтрастная тема с фиолетовыми и розовыми акцентами)
  • Настроен блок @theme в Tailwind, который маппит наши переменные на классы (например, bg-surface, border-border, text-content).

2. Сохранение состояния

  • Создан стейт-менеджер themeStore.svelte.ts.
  • Он автоматически определяет системную тему при первом заходе, сохраняет выбор пользователя в localStorage и реактивно переключает data-theme атрибут у тега <html>.
  • В index.html добавлен inline-скрипт в <head>, чтобы избежать неприятного мерцания нестилизованного контента (FOUC) при загрузке.

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

  • Главная навигация: В правом верхнем углу теперь есть выпадающий список для мгновенного переключения тем.
  • Глубина и Фон: На главную страницу добавлены легкие радиальные градиенты на фоне (эффект свечения за контентом).
  • GameCard (Карточки):
    • Внедрен эффект “матового стекла”: полупрозрачный фон (bg-surface/60) с легким размытием заднего плана (backdrop-blur-md).
    • Добавлены микро-анимации: при наведении карточка плавно приподнимается вверх и получает свечение в цвет акцента текущей темы.
    • Улучшена типографика рейтинга: теперь он находится в аккуратной полупрозрачной плашке.

Как проверить?

Запустите сервер разработки в терминале:

npm run dev
# или
mise run dev

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

> Добавление новых тем

Благодаря новой архитектуре добавить любую новую тему (например, Nord, Solarized) занимает ровно 2 минуты — достаточно просто скопировать 10 CSS-переменных в конец файла app.css.

Graph View