{currentTab.command}
diff --git a/web/src/shared/components/language-switcher.tsx b/web/src/shared/components/language-switcher.tsx
index 8feae28a..591c1994 100644
--- a/web/src/shared/components/language-switcher.tsx
+++ b/web/src/shared/components/language-switcher.tsx
@@ -65,8 +65,8 @@ export function LanguageSwitcher({ className }: LanguageSwitcherProps) {
onClick={() => setOpen((current) => !current)}
>
-
{currentLanguage.name}
-
+
{currentLanguage.name}
+
{open ? (
diff --git a/web/src/shared/components/theme-toggle.test.tsx b/web/src/shared/components/theme-toggle.test.tsx
new file mode 100644
index 00000000..58841889
--- /dev/null
+++ b/web/src/shared/components/theme-toggle.test.tsx
@@ -0,0 +1,34 @@
+/** @vitest-environment jsdom */
+
+import { fireEvent, render, screen } from '@testing-library/react'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { THEME_STORAGE_KEY } from '@/shared/lib/theme'
+import { ThemeToggle } from './theme-toggle'
+
+vi.mock('react-i18next', () => ({
+ useTranslation: () => ({
+ t: (key: string) => key,
+ }),
+}))
+
+describe('ThemeToggle', () => {
+ beforeEach(() => {
+ window.localStorage.clear()
+ document.documentElement.classList.remove('dark')
+ document.documentElement.dataset.theme = 'light'
+ document.documentElement.style.colorScheme = 'light'
+ })
+
+ it('switches theme and keeps the selection in browser-local storage', () => {
+ render()
+
+ const toggle = screen.getByRole('button', { name: 'theme.switchToDark' })
+ expect(toggle.getAttribute('aria-pressed')).toBe('false')
+
+ fireEvent.click(toggle)
+
+ expect(screen.getByRole('button', { name: 'theme.switchToLight' }).getAttribute('aria-pressed')).toBe('true')
+ expect(document.documentElement.classList.contains('dark')).toBe(true)
+ expect(window.localStorage.getItem(THEME_STORAGE_KEY)).toBe('dark')
+ })
+})
diff --git a/web/src/shared/components/theme-toggle.tsx b/web/src/shared/components/theme-toggle.tsx
new file mode 100644
index 00000000..86a832f9
--- /dev/null
+++ b/web/src/shared/components/theme-toggle.tsx
@@ -0,0 +1,44 @@
+import { Moon, Sun } from 'lucide-react'
+import { useTranslation } from 'react-i18next'
+import { useTheme } from '@/shared/hooks/use-theme'
+import { cn } from '@/shared/lib/utils'
+
+interface ThemeToggleProps {
+ className?: string
+}
+
+export function ThemeToggle({ className }: ThemeToggleProps) {
+ const { t } = useTranslation()
+ const { theme, toggleTheme } = useTheme()
+ const isDark = theme === 'dark'
+ const label = isDark ? t('theme.switchToLight') : t('theme.switchToDark')
+
+ return (
+
+ )
+}
diff --git a/web/src/shared/components/user-menu.tsx b/web/src/shared/components/user-menu.tsx
index bd3f4cba..a6761eae 100644
--- a/web/src/shared/components/user-menu.tsx
+++ b/web/src/shared/components/user-menu.tsx
@@ -130,7 +130,7 @@ export function UserMenu({ user, triggerClassName }: UserMenuProps) {
className="w-8 h-8 rounded-full border border-border/60"
/>
)}
-
+
{user.displayName}
diff --git a/web/src/shared/hooks/use-theme.ts b/web/src/shared/hooks/use-theme.ts
new file mode 100644
index 00000000..c75ba9b3
--- /dev/null
+++ b/web/src/shared/hooks/use-theme.ts
@@ -0,0 +1,24 @@
+import { useCallback, useState } from 'react'
+import {
+ applyTheme,
+ DEFAULT_THEME,
+ readStoredTheme,
+ saveTheme,
+ type Theme,
+} from '@/shared/lib/theme'
+
+export function useTheme() {
+ const [theme, setThemeState] = useState(() => readStoredTheme() ?? DEFAULT_THEME)
+
+ const setTheme = useCallback((nextTheme: Theme) => {
+ applyTheme(nextTheme)
+ saveTheme(nextTheme)
+ setThemeState(nextTheme)
+ }, [])
+
+ const toggleTheme = useCallback(() => {
+ setTheme(theme === 'light' ? 'dark' : 'light')
+ }, [setTheme, theme])
+
+ return { theme, setTheme, toggleTheme }
+}
diff --git a/web/src/shared/lib/theme.test.ts b/web/src/shared/lib/theme.test.ts
new file mode 100644
index 00000000..7ad337f4
--- /dev/null
+++ b/web/src/shared/lib/theme.test.ts
@@ -0,0 +1,53 @@
+/** @vitest-environment jsdom */
+
+import { beforeEach, describe, expect, it } from 'vitest'
+import {
+ applyTheme,
+ DEFAULT_THEME,
+ initializeTheme,
+ readStoredTheme,
+ saveTheme,
+ THEME_STORAGE_KEY,
+} from './theme'
+
+describe('theme preference', () => {
+ beforeEach(() => {
+ window.localStorage.clear()
+ document.documentElement.classList.remove('dark')
+ document.documentElement.removeAttribute('data-theme')
+ document.documentElement.style.colorScheme = ''
+ })
+
+ it('uses light when the browser has no saved preference', () => {
+ expect(initializeTheme()).toBe(DEFAULT_THEME)
+ expect(document.documentElement.classList.contains('dark')).toBe(false)
+ expect(document.documentElement.dataset.theme).toBe('light')
+ expect(document.documentElement.style.colorScheme).toBe('light')
+ })
+
+ it('restores a valid browser-local preference before render', () => {
+ window.localStorage.setItem(THEME_STORAGE_KEY, 'dark')
+
+ expect(initializeTheme()).toBe('dark')
+ expect(document.documentElement.classList.contains('dark')).toBe(true)
+ expect(document.documentElement.dataset.theme).toBe('dark')
+ })
+
+ it('ignores invalid and inaccessible storage values', () => {
+ expect(readStoredTheme({ getItem: () => 'system', setItem: () => undefined })).toBeNull()
+ expect(readStoredTheme({
+ getItem: () => {
+ throw new Error('blocked')
+ },
+ setItem: () => undefined,
+ })).toBeNull()
+ })
+
+ it('applies and saves only the selected frontend theme', () => {
+ applyTheme('dark')
+ saveTheme('dark')
+
+ expect(document.documentElement.classList.contains('dark')).toBe(true)
+ expect(window.localStorage.getItem(THEME_STORAGE_KEY)).toBe('dark')
+ })
+})
diff --git a/web/src/shared/lib/theme.ts b/web/src/shared/lib/theme.ts
new file mode 100644
index 00000000..0d0db929
--- /dev/null
+++ b/web/src/shared/lib/theme.ts
@@ -0,0 +1,56 @@
+export type Theme = 'light' | 'dark'
+
+export const THEME_STORAGE_KEY = 'skillhub-theme'
+export const DEFAULT_THEME: Theme = 'light'
+
+interface ThemeStorage {
+ getItem(key: string): string | null
+ setItem(key: string, value: string): void
+}
+
+export function isTheme(value: unknown): value is Theme {
+ return value === 'light' || value === 'dark'
+}
+
+export function readStoredTheme(storage: ThemeStorage | undefined = getBrowserStorage()): Theme | null {
+ if (!storage) return null
+
+ try {
+ const value = storage.getItem(THEME_STORAGE_KEY)
+ return isTheme(value) ? value : null
+ } catch {
+ return null
+ }
+}
+
+export function applyTheme(theme: Theme, root: HTMLElement = document.documentElement) {
+ root.classList.toggle('dark', theme === 'dark')
+ root.dataset.theme = theme
+ root.style.colorScheme = theme
+}
+
+export function initializeTheme(root: HTMLElement = document.documentElement): Theme {
+ const theme = readStoredTheme() ?? DEFAULT_THEME
+ applyTheme(theme, root)
+ return theme
+}
+
+export function saveTheme(theme: Theme, storage: ThemeStorage | undefined = getBrowserStorage()) {
+ if (!storage) return
+
+ try {
+ storage.setItem(THEME_STORAGE_KEY, theme)
+ } catch {
+ // Storage can be unavailable in private browsing or hardened browser contexts.
+ }
+}
+
+function getBrowserStorage(): Storage | undefined {
+ if (typeof window === 'undefined') return undefined
+
+ try {
+ return window.localStorage
+ } catch {
+ return undefined
+ }
+}
diff --git a/web/src/shared/ui/input.tsx b/web/src/shared/ui/input.tsx
index c2b09746..09c142ce 100644
--- a/web/src/shared/ui/input.tsx
+++ b/web/src/shared/ui/input.tsx
@@ -4,7 +4,7 @@ import { cn } from '@/shared/lib/utils'
export interface InputProps extends React.InputHTMLAttributes {}
export const INPUT_BASE_CLASS_NAME =
- 'flex h-11 w-full rounded-lg border bg-white px-4 py-2 text-sm text-foreground ring-offset-background transition-all duration-200 file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/40 focus-visible:border-primary/50 disabled:cursor-not-allowed disabled:opacity-50'
+ 'flex h-11 w-full rounded-lg border bg-background px-4 py-2 text-sm text-foreground ring-offset-background transition-all duration-200 file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/40 focus-visible:border-primary/50 disabled:cursor-not-allowed disabled:opacity-50'
const Input = React.forwardRef(
({ className, type, style, ...props }, ref) => {