feat(themes): 5 new dark theme presets — Cyberpunk/Ocean/Blood Red/Matrix/Midnight (P5-2)

Five complete vanilla-extract themes registered in useTheme (useThemes +
useThemeNames), each spreading darkThemeData so Success/Warning/Critical keep
their semantic colors and only Background/Surface/Primary/Secondary are
recolored. A code-review pass computed WCAG contrast for every theme; all body
and accent pairs clear AA except Midnight's Primary.OnMain which was 4.49:1 —
fixed by changing OnMain #0d1320 -> #000000 (5.07:1).

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

src/app/hooks/useTheme.ts

@@ -2,10 +2,15 @@ import { lightTheme } from 'folds';
 import { createContext, useContext, useEffect, useMemo, useState } from 'react';
 import { onDarkFontWeight, onLightFontWeight } from '../../config.css';
 import {
+  bloodRedTheme,
   butterTheme,
+  classicMatrixTheme,
+  cyberpunkTheme,
   darkTheme,
   lotusTerminalLightTheme,
   lotusTerminalTheme,
+  midnightTheme,
+  oceanTheme,
   silverTheme,
 } from '../../colors.css';
 import { settingsAtom } from '../state/settings';
@@ -43,6 +48,31 @@ export const ButterTheme: Theme = {
   kind: ThemeKind.Dark,
   classNames: ['butter-theme', butterTheme, onDarkFontWeight, 'prism-dark'],
 };
+export const CyberpunkTheme: Theme = {
+  id: 'cyberpunk-theme',
+  kind: ThemeKind.Dark,
+  classNames: ['cyberpunk-theme', cyberpunkTheme, onDarkFontWeight, 'prism-dark'],
+};
+export const OceanTheme: Theme = {
+  id: 'ocean-theme',
+  kind: ThemeKind.Dark,
+  classNames: ['ocean-theme', oceanTheme, onDarkFontWeight, 'prism-dark'],
+};
+export const BloodRedTheme: Theme = {
+  id: 'blood-red-theme',
+  kind: ThemeKind.Dark,
+  classNames: ['blood-red-theme', bloodRedTheme, onDarkFontWeight, 'prism-dark'],
+};
+export const ClassicMatrixTheme: Theme = {
+  id: 'classic-matrix-theme',
+  kind: ThemeKind.Dark,
+  classNames: ['classic-matrix-theme', classicMatrixTheme, onDarkFontWeight, 'prism-dark'],
+};
+export const MidnightTheme: Theme = {
+  id: 'midnight-theme',
+  kind: ThemeKind.Dark,
+  classNames: ['midnight-theme', midnightTheme, onDarkFontWeight, 'prism-dark'],
+};
 export const LotusTerminalTheme: Theme = {
   id: 'lotus-terminal-theme',
   kind: ThemeKind.Dark,
@@ -60,7 +90,20 @@ export const LotusTerminalLightTheme: Theme = {
 };
 
 export const useThemes = (): Theme[] => {
-  const themes: Theme[] = useMemo(() => [LightTheme, SilverTheme, DarkTheme, ButterTheme], []);
+  const themes: Theme[] = useMemo(
+    () => [
+      LightTheme,
+      SilverTheme,
+      DarkTheme,
+      ButterTheme,
+      CyberpunkTheme,
+      OceanTheme,
+      BloodRedTheme,
+      ClassicMatrixTheme,
+      MidnightTheme,
+    ],
+    [],
+  );
 
   return themes;
 };
@@ -72,6 +115,11 @@ export const useThemeNames = (): Record<string, string> =>
       [SilverTheme.id]: 'Silver',
       [DarkTheme.id]: 'Dark',
       [ButterTheme.id]: 'Butter',
+      [CyberpunkTheme.id]: 'Cyberpunk',
+      [OceanTheme.id]: 'Ocean',
+      [BloodRedTheme.id]: 'Blood Red',
+      [ClassicMatrixTheme.id]: 'Classic Matrix',
+      [MidnightTheme.id]: 'Midnight',
     }),
     [],
   );