feat: dark theme by default for landing page with theme toggle

This commit is contained in:
apuc committed 2026-08-27 18:09:47 +03:00
1 parent 13db11e5a1
commit d82879798b
1 file changed
+54
+54
View File
@@ -5,16 +5,43 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ИИ Пресс-секретарь — умный контент для вашего бизнеса</title>
<meta name="description" content="ИИ Пресс-секретарь — сервис, который создаёт контент-план, генерирует посты и картинки для вашего бизнеса и публикует их в Telegram.">
<script>
// Тёмная тема по умолчанию; светлая — по выбору пользователя (сохраняется в localStorage)
(function () {
try {
var saved = localStorage.getItem('theme');
if (saved === 'light') {
document.documentElement.setAttribute('data-theme', 'light');
}
} catch (e) {}
})();
</script>
<style>
/* Тёмная тема по умолчанию */
:root {
--bg: #0f172a;
--surface: #1e293b;
--surface-2: #273449;
--text: #e2e8f0;
--text-muted: #94a3b8;
--accent: #60a5fa;
--accent-hover: #93c5fd;
--accent-soft: #1e3a5f;
--border: #334155;
--border-strong: #475569;
}
/* Светлая тема (по выбору пользователя) */
:root[data-theme="light"] {
--bg: #f4f5f7;
--surface: #ffffff;
--surface-2: #f1f3f6;
--text: #1f2328;
--text-muted: #4b5563;
--accent: #2563eb;
--accent-hover: #1d4ed8;
--accent-soft: #eef2ff;
--border: #e2e5ea;
--border-strong: #d1d5db;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
@@ -190,6 +217,7 @@
<span>ИИ Пресс-секретарь</span>
</a>
<div class="header-actions">
<button type="button" class="btn btn-ghost theme-toggle" data-theme-toggle aria-label="Переключить тему">🌙</button>
<a class="btn btn-ghost" href="/login">Войти</a>
<a class="btn btn-primary" href="/register">Регистрация</a>
</div>
@@ -275,5 +303,31 @@
© 2026 ИИ Пресс-секретарь · <a href="/login">Вход</a> · <a href="/register">Регистрация</a> · <a href="/dashboard">Кабинет</a>
</div>
</footer>
<script>
(function () {
function isDark() {
return document.documentElement.getAttribute('data-theme') !== 'light';
}
function setIcon(btn) {
if (btn) btn.textContent = isDark() ? '\u2600\uFE0F' : '\uD83C\uDF19';
}
document.addEventListener('click', function (e) {
var btn = e.target.closest('[data-theme-toggle]');
if (!btn) return;
if (isDark()) {
document.documentElement.setAttribute('data-theme', 'light');
try { localStorage.setItem('theme', 'light'); } catch (err) {}
} else {
document.documentElement.removeAttribute('data-theme');
try { localStorage.setItem('theme', 'dark'); } catch (err) {}
}
setIcon(btn);
});
document.addEventListener('DOMContentLoaded', function () {
setIcon(document.querySelector('[data-theme-toggle]'));
});
})();
</script>
</body>
</html>