Add dark and light theme with OS preference support

Follow OS color scheme by default, with a three-way toggle
(System / Light / Dark) in the kebab menu. Light theme uses warm,
neutral tones with soft card-to-background contrast. Semantic colors
(damage, healing, conditions) keep their hue across themes.

Closes #10

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

apps/web/src/App.tsx

@@ -30,6 +30,7 @@ import { useBulkImport } from "./hooks/use-bulk-import";
 import { useEncounter } from "./hooks/use-encounter";
 import { usePlayerCharacters } from "./hooks/use-player-characters";
 import { useSidePanelState } from "./hooks/use-side-panel-state";
+import { useTheme } from "./hooks/use-theme";
 import { cn } from "./lib/utils";
 
 function rollDice(): number {
@@ -115,6 +116,7 @@ export function App() {
 
 	const bulkImport = useBulkImport();
 	const sidePanel = useSidePanelState();
+	const { preference: themePreference, cycleTheme } = useTheme();
 
 	const [rollSkippedCount, setRollSkippedCount] = useState(0);
 	const [rollSingleSkipped, setRollSingleSkipped] = useState(false);
@@ -263,6 +265,8 @@ export function App() {
 								showRollAllInitiative={hasCreatureCombatants}
 								rollAllInitiativeDisabled={!canRollAllInitiative}
 								onOpenSourceManager={sidePanel.showSourceManager}
+								themePreference={themePreference}
+								onCycleTheme={cycleTheme}
 								autoFocus
 							/>
 						</div>
@@ -325,6 +329,8 @@ export function App() {
 								showRollAllInitiative={hasCreatureCombatants}
 								rollAllInitiativeDisabled={!canRollAllInitiative}
 								onOpenSourceManager={sidePanel.showSourceManager}
+								themePreference={themePreference}
+								onCycleTheme={cycleTheme}
 							/>
 						</div>
 					</>