feat: implement theme selection and automatic theme application based on user preference. Update AppShell to include a dropdown for theme options and enhance layout to manage theme state. Adjust HTML language attribute to Russian and improve UI elements for better accessibility.

web/src/lib/AppShell.svelte

@@ -2,9 +2,19 @@
 	import { resolve } from '$app/paths';
 	import { page } from '$app/state';
 	import { cn } from '$lib/utils.js';
+	import { Button } from '$lib/components/ui/button/index.js';
 	import { buttonVariants } from '$lib/components/ui/button/button.svelte';
+	import {
+		DropdownMenu,
+		DropdownMenuContent,
+		DropdownMenuLabel,
+		DropdownMenuRadioGroup,
+		DropdownMenuRadioItem,
+		DropdownMenuTrigger
+	} from '$lib/components/ui/dropdown-menu/index.js';
 	import { Separator } from '$lib/components/ui/separator/index.js';
 	import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '$lib/components/ui/tooltip/index.js';
+	import type { ThemePreference } from '$lib/theme.js';
 
 	import Activity from '@lucide/svelte/icons/activity';
 	import Boxes from '@lucide/svelte/icons/boxes';
@@ -17,6 +27,9 @@
 	import CalendarClock from '@lucide/svelte/icons/calendar-clock';
 	import PanelLeftClose from '@lucide/svelte/icons/panel-left-close';
 	import PanelLeftOpen from '@lucide/svelte/icons/panel-left-open';
+	import Sun from '@lucide/svelte/icons/sun';
+	import Moon from '@lucide/svelte/icons/moon';
+	import Monitor from '@lucide/svelte/icons/monitor';
 
 	const nav = [
 		{ href: '/', label: 'Обзор', icon: LayoutDashboard },
@@ -34,7 +47,7 @@
 	] as const;
 
 	let collapsed = $state(false);
-	let { children } = $props();
+	let { children, theme = $bindable<ThemePreference>('system') } = $props();
 
 	function isActive(href: string) {
 		const pathname = page.url.pathname;
@@ -60,6 +73,37 @@
 					<p class="text-sidebar-foreground/50 truncate text-xs">Control plane</p>
 				</div>
 			{/if}
+			<DropdownMenu>
+				<DropdownMenuTrigger
+					class={cn(
+						buttonVariants({ variant: 'ghost', size: 'icon-sm' }),
+						'text-sidebar-foreground/60 hover:text-sidebar-foreground shrink-0'
+					)}
+					aria-label="Тема оформления"
+				>
+					<span class="flex size-4 items-center justify-center">
+						<Sun class="size-4 dark:hidden" />
+						<Moon class="hidden size-4 dark:block" />
+					</span>
+				</DropdownMenuTrigger>
+				<DropdownMenuContent align="end" class="w-44">
+					<DropdownMenuLabel>Тема</DropdownMenuLabel>
+					<DropdownMenuRadioGroup bind:value={theme}>
+						<DropdownMenuRadioItem value="light" class="gap-2">
+							<Sun class="size-4" />
+							Светлая
+						</DropdownMenuRadioItem>
+						<DropdownMenuRadioItem value="dark" class="gap-2">
+							<Moon class="size-4" />
+							Тёмная
+						</DropdownMenuRadioItem>
+						<DropdownMenuRadioItem value="system" class="gap-2">
+							<Monitor class="size-4" />
+							Как в системе
+						</DropdownMenuRadioItem>
+					</DropdownMenuRadioGroup>
+				</DropdownMenuContent>
+			</DropdownMenu>
 			<button
 				onclick={() => (collapsed = !collapsed)}
 				class={cn(

web/src/lib/theme.ts

@@ -0,0 +1,25 @@
+import { browser } from '$app/environment';
+
+export const THEME_STORAGE_KEY = 'evobgp-theme';
+
+export type ThemePreference = 'light' | 'dark' | 'system';
+
+export function readTheme(): ThemePreference {
+	if (!browser) return 'system';
+	try {
+		const s = localStorage.getItem(THEME_STORAGE_KEY);
+		if (s === 'light' || s === 'dark' || s === 'system') return s;
+	} catch {
+		/* ignore */
+	}
+	return 'system';
+}
+
+/** Синхронизирует класс `dark` на `document.documentElement` с выбранным режимом. */
+export function applyTheme(mode: ThemePreference): void {
+	if (!browser) return;
+	const dark =
+		mode === 'dark' ||
+		(mode === 'system' && window.matchMedia('(prefers-color-scheme: dark)').matches);
+	document.documentElement.classList.toggle('dark', dark);
+}