golomazov/hotelsync
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add auto theme mode (light/dark/auto by time of day)

Browse Source 
- ThemeContext: add 'auto' mode that switches light 7:00-22:00, dark otherwise, re-checks every minute
- Topbar: cycle through 3 modes on click, show Monitor icon for auto mode
- Settings → Внешний вид: 3-button grid with split preview for auto

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
HotelSync
2026-03-17 18:22:37 +03:00
parent 7b045b38a6
commit dd9a2a3da9
3 changed files with 63 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
src/pages/SettingsPage.tsx
View File

@@ -33,7 +33,7 @@ export function SettingsPage() {
const [section, setSection] = useState('general')
const [saved, setSaved] = useState(false)
const [hotel, setHotel] = useState<Hotel | null>(null)
const { theme, toggle } = useTheme()
const { mode, theme, setMode } = useTheme()
useEffect(() => {
if (!slug) return
@@ -336,25 +336,36 @@ export function SettingsPage() {
<div className="space-y-4">
<div>
<p className="text-sm font-medium text-slate-700 dark:text-slate-300 mb-3">Тема интерфейса</p>
<div className="grid grid-cols-2 gap-3">
<div className="grid grid-cols-3 gap-3">
{([
{ id: 'light', label: 'Светлая' },
{ id: 'dark', label: 'Тёмная' },
{ id: 'light', label: 'Светлая', desc: null },
{ id: 'dark', label: 'Тёмная', desc: null },
{ id: 'auto', label: 'Авто', desc: 'Светлая 7:00–22:00, тёмная ночью' },
] as const).map(t => (
<button
key={t.id}
onClick={() => { if (theme !== t.id) toggle() }}
onClick={() => setMode(t.id)}
className={cn(
'p-4 rounded-xl border-2 transition-all text-left',
theme === t.id ? 'border-brand-500' : 'border-slate-200 dark:border-slate-600 hover:border-slate-300',
mode === t.id ? 'border-brand-500' : 'border-slate-200 dark:border-slate-600 hover:border-slate-300',
)}
>
<div className={cn('w-full h-14 rounded-lg mb-2', t.id === 'light' ? 'bg-white border border-slate-200' : 'bg-slate-800')}>
<div className={cn('h-3 w-3/4 rounded mx-2 mt-2', t.id === 'light' ? 'bg-slate-200' : 'bg-slate-600')} />
<div className={cn('h-2 w-1/2 rounded mx-2 mt-1', t.id === 'light' ? 'bg-slate-100' : 'bg-slate-700')} />
</div>
{t.id === 'auto' ? (
<div className="w-full h-14 rounded-lg mb-2 overflow-hidden border border-slate-200 flex">
<div className="flex-1 bg-white" />
<div className="flex-1 bg-slate-800" />
</div>
) : (
<div className={cn('w-full h-14 rounded-lg mb-2', t.id === 'light' ? 'bg-white border border-slate-200' : 'bg-slate-800')}>
<div className={cn('h-3 w-3/4 rounded mx-2 mt-2', t.id === 'light' ? 'bg-slate-200' : 'bg-slate-600')} />
<div className={cn('h-2 w-1/2 rounded mx-2 mt-1', t.id === 'light' ? 'bg-slate-100' : 'bg-slate-700')} />
</div>
)}
<p className="text-sm font-medium text-slate-900 dark:text-slate-100">{t.label}</p>
{theme === t.id && <p className="text-xs text-brand-600 dark:text-brand-400">Активна</p>}
{mode === t.id
? <p className="text-xs text-brand-600 dark:text-brand-400">Активна</p>
: t.desc && <p className="text-xs text-slate-400 dark:text-slate-500 leading-tight">{t.desc}</p>
}
</button>
))}
</div>