base commit

client/src/app/providers/AppProviders.tsx

@@ -2,6 +2,103 @@ import { type PropsWithChildren, useMemo } from 'react'
 import CssBaseline from '@mui/material/CssBaseline'
 import { ThemeProvider, createTheme } from '@mui/material/styles'
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { ThemeControllerProvider, useThemeController } from '@/app/providers/theme-controller'
+
+function AppThemeInner({ children }: PropsWithChildren) {
+  const controller = useThemeController()
+
+  const theme = useMemo(
+    () =>
+      createTheme({
+        palette: (() => {
+          const isDark = controller.resolvedMode === 'dark'
+          const common = { mode: controller.resolvedMode }
+
+          const text = isDark
+            ? { primary: '#F2F2F2', secondary: 'rgba(242,242,242,0.72)', disabled: 'rgba(242,242,242,0.48)' }
+            : { primary: '#1F1B16', secondary: 'rgba(31,27,22,0.72)', disabled: 'rgba(31,27,22,0.48)' }
+
+          switch (controller.scheme) {
+            case 'forest':
+              return {
+                ...common,
+                primary: { main: isDark ? '#4CAF50' : '#2E7D32' },
+                secondary: { main: isDark ? '#A1887F' : '#6D4C41' },
+                info: { main: isDark ? '#29B6F6' : '#0288D1' },
+                success: { main: isDark ? '#66BB6A' : '#2E7D32' },
+                warning: { main: isDark ? '#FFB74D' : '#ED6C02' },
+                error: { main: isDark ? '#EF5350' : '#D32F2F' },
+                divider: isDark ? 'rgba(255,255,255,0.10)' : 'rgba(0,0,0,0.10)',
+                text,
+                background: isDark
+                  ? { default: '#0E1510', paper: '#121B14' }
+                  : { default: '#F6FAF6', paper: '#FFFFFF' },
+              }
+            case 'ocean':
+              return {
+                ...common,
+                primary: { main: isDark ? '#42A5F5' : '#1565C0' },
+                secondary: { main: isDark ? '#4DD0E1' : '#00838F' },
+                info: { main: isDark ? '#4FC3F7' : '#0288D1' },
+                success: { main: isDark ? '#26C6DA' : '#00838F' },
+                warning: { main: isDark ? '#FFCC80' : '#ED6C02' },
+                error: { main: isDark ? '#EF5350' : '#D32F2F' },
+                divider: isDark ? 'rgba(255,255,255,0.10)' : 'rgba(0,0,0,0.10)',
+                text,
+                background: isDark
+                  ? { default: '#0B1220', paper: '#0F172A' }
+                  : { default: '#F6FAFF', paper: '#FFFFFF' },
+              }
+            case 'berry':
+              return {
+                ...common,
+                primary: { main: isDark ? '#BA68C8' : '#7B1FA2' },
+                secondary: { main: isDark ? '#F06292' : '#C2185B' },
+                info: { main: isDark ? '#64B5F6' : '#1976D2' },
+                success: { main: isDark ? '#81C784' : '#2E7D32' },
+                warning: { main: isDark ? '#FFB74D' : '#ED6C02' },
+                error: { main: isDark ? '#EF5350' : '#D32F2F' },
+                divider: isDark ? 'rgba(255,255,255,0.10)' : 'rgba(0,0,0,0.10)',
+                text,
+                background: isDark
+                  ? { default: '#140A17', paper: '#1B0F20' }
+                  : { default: '#FFF7FD', paper: '#FFFFFF' },
+              }
+            case 'craft':
+            default:
+              return {
+                ...common,
+                primary: { main: isDark ? '#BCAAA4' : '#6D4C41' },
+                secondary: { main: isDark ? '#FFCCBC' : '#8D6E63' },
+                info: { main: isDark ? '#90CAF9' : '#1976D2' },
+                success: { main: isDark ? '#A5D6A7' : '#2E7D32' },
+                warning: { main: isDark ? '#FFB74D' : '#ED6C02' },
+                error: { main: isDark ? '#EF9A9A' : '#D32F2F' },
+                divider: isDark ? 'rgba(255,255,255,0.10)' : 'rgba(0,0,0,0.10)',
+                text,
+                background: isDark
+                  ? { default: '#12100F', paper: '#191615' }
+                  : { default: '#FAF8F5', paper: '#FFFFFF' },
+              }
+          }
+        })(),
+        shape: { borderRadius: 12 },
+        typography: {
+          fontFamily: '"Segoe UI", system-ui, sans-serif',
+          h4: { fontWeight: 700 },
+          h5: { fontWeight: 600 },
+        },
+      }),
+    [controller.resolvedMode, controller.scheme],
+  )
+
+  return (
+    <ThemeProvider theme={theme}>
+      <CssBaseline />
+      {children}
+    </ThemeProvider>
+  )
+}
 
 export function AppProviders({ children }: PropsWithChildren) {
   const queryClient = useMemo(
@@ -18,31 +115,11 @@ export function AppProviders({ children }: PropsWithChildren) {
     [],
   )
 
-  const theme = useMemo(
-    () =>
-      createTheme({
-        palette: {
-          mode: 'light',
-          primary: { main: '#6d4c41' },
-          secondary: { main: '#8d6e63' },
-          background: { default: '#faf8f5', paper: '#ffffff' },
-        },
-        shape: { borderRadius: 12 },
-        typography: {
-          fontFamily: '"Segoe UI", system-ui, sans-serif',
-          h4: { fontWeight: 700 },
-          h5: { fontWeight: 600 },
-        },
-      }),
-    [],
-  )
-
   return (
     <QueryClientProvider client={queryClient}>
-      <ThemeProvider theme={theme}>
-        <CssBaseline />
-        {children}
-      </ThemeProvider>
+      <ThemeControllerProvider>
+        <AppThemeInner>{children}</AppThemeInner>
+      </ThemeControllerProvider>
     </QueryClientProvider>
   )
 }

client/src/app/providers/theme-controller.tsx

@@ -0,0 +1,115 @@
+import { createContext, type PropsWithChildren, useContext, useEffect, useMemo, useState } from 'react'
+import type { PaletteMode } from '@mui/material'
+
+export type ColorScheme = 'craft' | 'forest' | 'ocean' | 'berry'
+
+export type ThemeModePreference = 'system' | PaletteMode
+
+export type ThemeSettings = {
+  mode: ThemeModePreference
+  scheme: ColorScheme
+}
+
+export type ThemeController = ThemeSettings & {
+  /** Итоговый режим, учитывая system. */
+  resolvedMode: PaletteMode
+  setMode: (mode: ThemeModePreference) => void
+  toggleMode: () => void
+  cycleMode: () => void
+  setScheme: (scheme: ColorScheme) => void
+}
+
+const THEME_STORAGE_KEY = 'craftshop_theme'
+
+function readStoredTheme(): ThemeSettings | null {
+  try {
+    const raw = localStorage.getItem(THEME_STORAGE_KEY)
+    if (!raw) return null
+    const parsed = JSON.parse(raw)
+    const mode: unknown = parsed?.mode
+    const scheme: unknown = parsed?.scheme
+    const modeOk = mode === 'light' || mode === 'dark' || mode === 'system'
+    const schemeOk = scheme === 'craft' || scheme === 'forest' || scheme === 'ocean' || scheme === 'berry'
+    if (!modeOk || !schemeOk) return null
+    return { mode, scheme }
+  } catch {
+    return null
+  }
+}
+
+function getSystemMode(): PaletteMode {
+  if (typeof window === 'undefined') return 'light'
+  return window.matchMedia?.('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
+}
+
+function resolveMode(pref: ThemeModePreference): PaletteMode {
+  return pref === 'system' ? getSystemMode() : pref
+}
+
+const ThemeControllerContext = createContext<ThemeController | null>(null)
+
+export function useThemeController(): ThemeController {
+  const ctx = useContext(ThemeControllerContext)
+  if (!ctx) throw new Error('useThemeController must be used within ThemeControllerProvider')
+  return ctx
+}
+
+export function ThemeControllerProvider({ children }: PropsWithChildren) {
+  const [settings, setSettings] = useState<ThemeSettings>(
+    () => readStoredTheme() ?? { mode: 'system', scheme: 'craft' },
+  )
+
+  const [systemMode, setSystemMode] = useState<PaletteMode>(() => getSystemMode())
+
+  useEffect(() => {
+    const mql = window.matchMedia?.('(prefers-color-scheme: dark)')
+    if (!mql) return
+
+    const handler = () => setSystemMode(mql.matches ? 'dark' : 'light')
+
+    // начальное значение
+    handler()
+
+    if (typeof mql.addEventListener === 'function') {
+      mql.addEventListener('change', handler)
+      return () => mql.removeEventListener('change', handler)
+    }
+
+    // Safari старых версий
+    mql.addListener(handler)
+    return () => mql.removeListener(handler)
+  }, [])
+
+  useEffect(() => {
+    try {
+      localStorage.setItem(THEME_STORAGE_KEY, JSON.stringify(settings))
+    } catch {
+      // ignore
+    }
+  }, [settings])
+
+  const resolvedMode = settings.mode === 'system' ? systemMode : settings.mode
+
+  const controller = useMemo<ThemeController>(
+    () => ({
+      mode: settings.mode,
+      resolvedMode,
+      scheme: settings.scheme,
+      setMode: (mode) => setSettings((s) => ({ ...s, mode })),
+      toggleMode: () =>
+        setSettings((s) => ({
+          ...s,
+          mode: resolveMode(s.mode) === 'light' ? 'dark' : 'light',
+        })),
+      cycleMode: () =>
+        setSettings((s) => ({
+          ...s,
+          mode: s.mode === 'system' ? 'light' : s.mode === 'light' ? 'dark' : 'system',
+        })),
+      setScheme: (scheme) => setSettings((s) => ({ ...s, scheme })),
+    }),
+    [resolvedMode, settings.mode, settings.scheme],
+  )
+
+  return <ThemeControllerContext.Provider value={controller}>{children}</ThemeControllerContext.Provider>
+}