admin/zeropost-tool
1
0
Fork 1
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: light theme by default with dark toggle, CSS variables, FOUC prevention, theme persistence

Browse Source
This commit is contained in:
Alexey Pavlov
2026-05-31 17:39:26 +03:00
parent 1a1eac16ee
commit 76eb519018
6 changed files with 131 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/globals.css
+52 -9
View File
@@ -2,19 +2,62 @@
@tailwind components;
@tailwind utilities;
/* ── Светлая тема (по умолчанию) ──────────────────────────────────────────── */
:root {
--bg: 250 250 249; /* stone-50 — мягкий тёплый фон */
--surface: 255 255 255; /* белые карточки */
--surface2: 245 245 244; /* stone-100 — инпуты */
--border: 231 229 228; /* stone-200 */
--text: 23 23 23; /* neutral-900 */
--text-soft: 82 82 91; /* zinc-600 */
--text-mute: 161 161 170; /* zinc-400 */
--accent: 16 185 129; /* emerald-500 */
--accent2: 5 150 105; /* emerald-600 */
--accent-text: 255 255 255; /* белый текст на акценте */
}
/* ── Тёмная тема ──────────────────────────────────────────────────────────── */
:root[data-theme='dark'] {
--bg: 10 10 10;
--surface: 20 20 20;
--surface2: 28 28 28;
--border: 42 42 42;
--text: 243 244 246; /* gray-100 */
--text-soft: 209 213 219; /* gray-300 */
--text-mute: 107 114 128; /* gray-500 */
--accent: 16 185 129;
--accent2: 52 211 153;
--accent-text: 0 0 0;
}
@layer base {
html { @apply bg-bg text-gray-100; }
html { @apply bg-bg text-text; }
body { @apply font-sans antialiased; }
::selection { @apply bg-accent/30; }
::selection { background: rgb(var(--accent) / 0.3); }
}
@layer components {
.btn { @apply inline-flex items-center justify-center gap-2 px-4 py-2 rounded-lg font-medium transition-colors disabled:opacity-50 disabled:cursor-not-allowed; }
.btn-primary { @apply btn bg-accent text-black hover:bg-accent2; }
.btn-ghost { @apply btn text-gray-300 hover:bg-surface2 hover:text-white; }
.btn-danger { @apply btn bg-red-600/10 text-red-400 hover:bg-red-600/20; }
.card { @apply bg-surface border border-border rounded-xl; }
.input { @apply w-full bg-surface2 border border-border rounded-lg px-3 py-2 text-gray-100 placeholder-gray-500 focus:outline-none focus:border-accent transition-colors; }
.label { @apply block text-sm font-medium text-gray-300 mb-1.5; }
.hint { @apply text-xs text-gray-500 mt-1; }
.btn-primary { @apply btn; background: rgb(var(--accent)); color: rgb(var(--accent-text)); }
.btn-primary:hover:not(:disabled) { background: rgb(var(--accent2)); }
.btn-ghost { @apply btn; color: rgb(var(--text-soft)); }
.btn-ghost:hover:not(:disabled) { background: rgb(var(--surface2)); color: rgb(var(--text)); }
.btn-danger { @apply btn; background: rgb(220 38 38 / 0.1); color: rgb(248 113 113); }
.btn-danger:hover:not(:disabled) { background: rgb(220 38 38 / 0.2); }
.card { @apply rounded-xl; background: rgb(var(--surface)); border: 1px solid rgb(var(--border)); }
.input {
@apply w-full rounded-lg px-3 py-2 focus:outline-none transition-colors;
background: rgb(var(--surface2));
border: 1px solid rgb(var(--border));
color: rgb(var(--text));
}
.input::placeholder { color: rgb(var(--text-mute)); }
.input:focus { border-color: rgb(var(--accent)); }
.label { @apply block text-sm font-medium mb-1.5; color: rgb(var(--text-soft)); }
.hint { @apply text-xs mt-1; color: rgb(var(--text-mute)); }
}
/* ── Theme switch animation ──────────────────────────────────────────────── */
* {
transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}
app/layout.js
+15 -1
View File
@@ -5,10 +5,24 @@ export const metadata = {
description: 'Инструмент для ведения Telegram-каналов с помощью ИИ',
};
// Inline-скрипт чтобы установить тему ДО рендера и избежать вспышки
const themeInit = `
(function() {
try {
var saved = localStorage.getItem('zp_theme');
var theme = saved || 'light';
document.documentElement.setAttribute('data-theme', theme);
} catch(e) {
document.documentElement.setAttribute('data-theme', 'light');
}
})();
`;
export default function RootLayout({ children }) {
return (
<html lang="ru">
<html lang="ru" data-theme="light" suppressHydrationWarning>
<head>
<script dangerouslySetInnerHTML={{ __html: themeInit }} />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="" />
<link
app/login/page.js
+5 -1
View File
@@ -2,6 +2,7 @@
import { useState } from 'react';
import { useRouter } from 'next/navigation';
import { Sparkles } from 'lucide-react';
import ThemeToggle from '@/components/ThemeToggle';
export default function LoginPage() {
const router = useRouter();
@@ -30,7 +31,10 @@ export default function LoginPage() {
}
return (
<main className="min-h-screen flex items-center justify-center p-4">
<main className="min-h-screen flex items-center justify-center p-4 relative">
<div className="absolute top-4 right-4">
<ThemeToggle />
</div>
<div className="w-full max-w-md">
<div className="flex items-center gap-2 mb-8 justify-center">
<Sparkles className="w-7 h-7 text-accent" />
components/Header.js
+4 -2
View File
@@ -2,6 +2,7 @@
import Link from 'next/link';
import { useRouter } from 'next/navigation';
import { Sparkles, LogOut } from 'lucide-react';
import ThemeToggle from './ThemeToggle';
export default function Header({ user }) {
const router = useRouter();
@@ -16,8 +17,9 @@ export default function Header({ user }) {
<Sparkles className="w-5 h-5 text-accent" />
<span className="font-bold">ZeroPost</span>
</Link>
<div className="flex items-center gap-3">
<span className="text-sm text-gray-500 hidden sm:inline">{user?.email}</span>
<div className="flex items-center gap-2">
<span className="text-sm text-gray-500 hidden sm:inline mr-2">{user?.email}</span>
<ThemeToggle />
<button onClick={logout} className="btn-ghost p-2" title="Выйти">
<LogOut className="w-4 h-4" />
</button>
components/ThemeToggle.js
+34
View File
@@ -0,0 +1,34 @@
'use client';
import { useEffect, useState } from 'react';
import { Sun, Moon } from 'lucide-react';
export default function ThemeToggle() {
const [theme, setTheme] = useState(null);
useEffect(() => {
const saved = typeof window !== 'undefined' && localStorage.getItem('zp_theme');
const current = saved || 'light';
setTheme(current);
document.documentElement.setAttribute('data-theme', current);
}, []);
function toggle() {
const next = theme === 'dark' ? 'light' : 'dark';
setTheme(next);
document.documentElement.setAttribute('data-theme', next);
localStorage.setItem('zp_theme', next);
}
// На SSR не рендерим (избегаем mismatch)
if (!theme) return <div className="w-9 h-9" />;
return (
<button
onClick={toggle}
title={theme === 'dark' ? 'Светлая тема' : 'Тёмная тема'}
className="w-9 h-9 inline-flex items-center justify-center rounded-lg hover:bg-surface2 transition-colors"
>
{theme === 'dark' ? <Sun className="w-4 h-4" /> : <Moon className="w-4 h-4" />}
</button>
);
}
tailwind.config.js
+21 -6
View File
@@ -1,4 +1,6 @@
/** @type {import('tailwindcss').Config} */
function rgb(v) { return `rgb(var(--${v}) / <alpha-value>)`; }
module.exports = {
content: [
'./app/**/*.{js,jsx,ts,tsx}',
@@ -7,12 +9,25 @@ module.exports = {
theme: {
extend: {
colors: {
bg: '#0a0a0a',
surface: '#141414',
surface2: '#1c1c1c',
border: '#2a2a2a',
accent: '#10b981',
accent2: '#34d399',
bg: rgb('bg'),
surface: rgb('surface'),
surface2: rgb('surface2'),
border: rgb('border'),
text: rgb('text'),
accent: rgb('accent'),
accent2: rgb('accent2'),
// Совместимость со старыми классами — gray-* мапим на наши text-*
gray: {
100: rgb('text'),
200: rgb('text-soft'),
300: rgb('text-soft'),
400: rgb('text-mute'),
500: rgb('text-mute'),
600: rgb('text-mute'),
700: rgb('border'),
800: rgb('surface2'),
900: rgb('surface'),
},
},
fontFamily: {
sans: ['Inter', 'system-ui', 'sans-serif'],