Deck themes
Готовые CSS-темы для <deck-stage>. Каждая — один CSS-файл, который подключается рядом с deck-stage.js. Конкретный набор шрифтов, цветов, размеров.
Файлы
templates/theme-minimal.css — спокойный, для B2B и продуктовых ревью.templates/theme-editorial.css — антиква + воздух, для лонгридов и питчей.templates/theme-dark.css — тёмный фон, для конференций и кинематографичности.templates/theme-data.css — для отчётов с цифрами и таблицами.templates/theme-brutalist.css — моноширинная утилитарность, для девелопер-брендов.
Использование
<link rel="stylesheet" href="theme-editorial.css" />
<script src="deck-stage.js"></script>
<deck-stage width="1920" height="1080">
<section>
<h1>Заголовок</h1>
<p>Текст</p>
</section>
</deck-stage>
Темы не используют !important — переопределяй конкретные слайды inline-стилями.
Что общего у всех тем
Каждая тема задаёт:
--bg, --fg, --muted, --accent--font-display, --font-body, --font-mono- размеры
h1, h2, h3, p, .eyebrow
.statement, .two-col, .title-stack, .dark (инвертированный режим).placeholder
Слайды переносимы между темами — поменяй <link>, и тот же HTML выглядит иначе.
Правила выбора
| Тема |
Подходит |
Не подходит |
| minimal |
внутренние ревью, продукт |
креатив-агентства |
| editorial |
питчи, манифесты, бренды |
data-репорты |
| dark |
конференции, AI/tech |
финансы, образование |
| data |
отчёты, KPI, аналитика |
креатив, маркетинг |
| brutalist |
dev-tools, опен-сорс |
продажи b2c |
1---2name: deck-themes3description: Готовые CSS-темы для slides без бренда: минимал, editorial, dark, data, brutalist. Триггеры: «тема презентации», «оформление дека». Любой артефакт → theme-factory.4---56# Deck themes78Готовые CSS-темы для `<deck-stage>`. Каждая — один CSS-файл, который подключается рядом с `deck-stage.js`. Конкретный набор шрифтов, цветов, размеров.910## Файлы1112- `templates/theme-minimal.css` — спокойный, для B2B и продуктовых ревью.13- `templates/theme-editorial.css` — антиква + воздух, для лонгридов и питчей.14- `templates/theme-dark.css` — тёмный фон, для конференций и кинематографичности.15- `templates/theme-data.css` — для отчётов с цифрами и таблицами.16- `templates/theme-brutalist.css` — моноширинная утилитарность, для девелопер-брендов.1718## Использование1920```html21<link rel="stylesheet" href="theme-editorial.css" />22<script src="deck-stage.js"></script>23<deck-stage width="1920" height="1080">24 <section>25 <h1>Заголовок</h1>26 <p>Текст</p>27 </section>28</deck-stage>29```3031Темы не используют !important — переопределяй конкретные слайды inline-стилями.3233## Что общего у всех тем3435Каждая тема задаёт:36- `--bg`, `--fg`, `--muted`, `--accent`37- `--font-display`, `--font-body`, `--font-mono`38- размеры `h1`, `h2`, `h3`, `p`, `.eyebrow`39- `.statement`, `.two-col`, `.title-stack`, `.dark` (инвертированный режим)40- `.placeholder`4142Слайды переносимы между темами — поменяй `<link>`, и тот же HTML выглядит иначе.4344## Правила выбора4546| Тема | Подходит | Не подходит |47|---|---|---|48| minimal | внутренние ревью, продукт | креатив-агентства |49| editorial | питчи, манифесты, бренды | data-репорты |50| dark | конференции, AI/tech | финансы, образование |51| data | отчёты, KPI, аналитика | креатив, маркетинг |52| brutalist | dev-tools, опен-сорс | продажи b2c |
JHamidun