[pawelklasa]

Summary

• Add a controlled ThemeSwitcher dropdown with Light, Dark and System options, icons, and a selected-state checkmark.
• Use a half-filled circle for System in the trigger and menu.
• Add useThemePreference(), exposing preference, resolved scheme, and setPreference. System follows live OS changes; explicit choices persist using the existing storage key.
• Preserve existing saved Light/Dark preferences, the useColorScheme() tuple API, pre-paint bootstrap behavior, and the light default for clients that have not opted in.
• Add keyboard navigation, focus return, disabled state, accessibility tests, and Docs/Playground stories.

Cloud integration

Call useThemePreference() once near the app root and pass preference and setPreference to ThemeSwitcher. Continue using getColorSchemeBootstrapScript() in the document head before first paint. The switcher is controlled and does not independently mutate the document or storage.

Verification

• npm run lint
• npm run compile
• npm test: 79 suites passed; 496 tests passed, 2 skipped
• npm run build-storybook
• Chromium: Light/Dark selection and persistence, Escape focus return, live OS changes in System, reload persistence, and menu bounds at 375px.
• Browser compatibility checks: CSS-only consumers remain light under a dark OS; generated bootstrap resolves System and saved Light correctly.
• Inspected light, dark, and mobile screenshots.