diff --git a/app/globals.css b/app/globals.css
index 9db0b9f..f1953fa 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -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;
 }
diff --git a/app/layout.js b/app/layout.js
index 3d2a435..8744720 100644
--- a/app/layout.js
+++ b/app/layout.js
@@ -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
diff --git a/app/login/page.js b/app/login/page.js
index 280106a..bcffd19 100644
--- a/app/login/page.js
+++ b/app/login/page.js
@@ -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" />
diff --git a/components/Header.js b/components/Header.js
index c026b42..0eab259 100644
--- a/components/Header.js
+++ b/components/Header.js
@@ -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>
diff --git a/components/ThemeToggle.js b/components/ThemeToggle.js
new file mode 100644
index 0000000..60f2400
--- /dev/null
+++ b/components/ThemeToggle.js
@@ -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>
+  );
+}
diff --git a/tailwind.config.js b/tailwind.config.js
index b79b678..cd29a4b 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -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'],