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 components;
@tailwind utilities; @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 { @layer base {
html { @apply bg-bg text-gray-100; } html { @apply bg-bg text-text; }
body { @apply font-sans antialiased; } body { @apply font-sans antialiased; }
::selection { @apply bg-accent/30; } ::selection { background: rgb(var(--accent) / 0.3); }
} }
@layer components { @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 { @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-primary { @apply btn; background: rgb(var(--accent)); color: rgb(var(--accent-text)); }
.btn-ghost { @apply btn text-gray-300 hover:bg-surface2 hover:text-white; } .btn-primary:hover:not(:disabled) { background: rgb(var(--accent2)); }
.btn-danger { @apply btn bg-red-600/10 text-red-400 hover:bg-red-600/20; } .btn-ghost { @apply btn; color: rgb(var(--text-soft)); }
.card { @apply bg-surface border border-border rounded-xl; } .btn-ghost:hover:not(:disabled) { background: rgb(var(--surface2)); color: rgb(var(--text)); }
.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; } .btn-danger { @apply btn; background: rgb(220 38 38 / 0.1); color: rgb(248 113 113); }
.label { @apply block text-sm font-medium text-gray-300 mb-1.5; } .btn-danger:hover:not(:disabled) { background: rgb(220 38 38 / 0.2); }
.hint { @apply text-xs text-gray-500 mt-1; } .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-каналов с помощью ИИ', 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 }) { export default function RootLayout({ children }) {
return ( return (
<html lang="ru"> <html lang="ru" data-theme="light" suppressHydrationWarning>
<head> <head>
<script dangerouslySetInnerHTML={{ __html: themeInit }} />
<link rel="preconnect" href="https://fonts.googleapis.com" /> <link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="" /> <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="" />
<link <link
app/login/page.js
+5 -1
View File
@@ -2,6 +2,7 @@
import { useState } from 'react'; import { useState } from 'react';
import { useRouter } from 'next/navigation'; import { useRouter } from 'next/navigation';
import { Sparkles } from 'lucide-react'; import { Sparkles } from 'lucide-react';
import ThemeToggle from '@/components/ThemeToggle';
export default function LoginPage() { export default function LoginPage() {
const router = useRouter(); const router = useRouter();
@@ -30,7 +31,10 @@ export default function LoginPage() {
} }
return ( 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="w-full max-w-md">
<div className="flex items-center gap-2 mb-8 justify-center"> <div className="flex items-center gap-2 mb-8 justify-center">
<Sparkles className="w-7 h-7 text-accent" /> <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 Link from 'next/link';
import { useRouter } from 'next/navigation'; import { useRouter } from 'next/navigation';
import { Sparkles, LogOut } from 'lucide-react'; import { Sparkles, LogOut } from 'lucide-react';
import ThemeToggle from './ThemeToggle';
export default function Header({ user }) { export default function Header({ user }) {
const router = useRouter(); const router = useRouter();
@@ -16,8 +17,9 @@ export default function Header({ user }) {
<Sparkles className="w-5 h-5 text-accent" /> <Sparkles className="w-5 h-5 text-accent" />
<span className="font-bold">ZeroPost</span> <span className="font-bold">ZeroPost</span>
</Link> </Link>
<div className="flex items-center gap-3"> <div className="flex items-center gap-2">
<span className="text-sm text-gray-500 hidden sm:inline">{user?.email}</span> <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="Выйти"> <button onClick={logout} className="btn-ghost p-2" title="Выйти">
<LogOut className="w-4 h-4" /> <LogOut className="w-4 h-4" />
</button> </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} */ /** @type {import('tailwindcss').Config} */
function rgb(v) { return `rgb(var(--${v}) / <alpha-value>)`; }
module.exports = { module.exports = {
content: [ content: [
'./app/**/*.{js,jsx,ts,tsx}', './app/**/*.{js,jsx,ts,tsx}',
@@ -7,12 +9,25 @@ module.exports = {
theme: { theme: {
extend: { extend: {
colors: { colors: {
bg: '#0a0a0a', bg: rgb('bg'),
surface: '#141414', surface: rgb('surface'),
surface2: '#1c1c1c', surface2: rgb('surface2'),
border: '#2a2a2a', border: rgb('border'),
accent: '#10b981', text: rgb('text'),
accent2: '#34d399', 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: { fontFamily: {
sans: ['Inter', 'system-ui', 'sans-serif'], sans: ['Inter', 'system-ui', 'sans-serif'],