diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index 55df05f..231885b 100644 --- a/frontend/src/App.tsx +++ b/frontend/src/App.tsx @@ -7,12 +7,25 @@ import { ConfigPanel } from './components/ConfigPanel'; import { SCTE35Trigger } from './components/SCTE35Trigger'; import { PortStatus, RecorderConfig } from './types'; +type Theme = 'dark' | 'light'; + export default function App() { const [ports, setPorts] = useState([]); const [selectedPort, setSelectedPort] = useState(null); const [configPort, setConfigPort] = useState(null); const [configs, setConfigs] = useState>({}); const [clock, setClock] = useState(''); + const [theme, setTheme] = useState(() => { + try { return (localStorage.getItem('de-theme') as Theme) ?? 'dark'; } catch { return 'dark'; } + }); + + // Apply theme to + useEffect(() => { + document.documentElement.setAttribute('data-theme', theme); + try { localStorage.setItem('de-theme', theme); } catch {} + }, [theme]); + + const toggleTheme = () => setTheme(t => t === 'dark' ? 'light' : 'dark'); const wsUrl = `ws://${window.location.host}/ws`; const { isConnected, lastMessage } = useWebSocket(wsUrl); @@ -71,7 +84,7 @@ export default function App() { setSelectedPort(prev => (prev === portIndex ? null : portIndex)); }; - const selectedPortData = ports.find(p => p.port_index === selectedPort) ?? null; + const isDark = theme === 'dark'; return (
@@ -88,7 +101,7 @@ export default function App() { position: 'sticky', top: 0, zIndex: 100, - boxShadow: '0 2px 20px rgba(0,0,0,0.6)', + boxShadow: isDark ? '0 2px 20px rgba(0,0,0,0.6)' : '0 2px 12px rgba(0,0,0,0.08)', }}>
Dragon Encode
@@ -112,7 +127,8 @@ export default function App() {
-
+
+ {/* WS status */}
{isConnected ? 'LIVE' : 'DISCONNECTED'}
+
+ + {/* Clock */} {clock} + +
+ + {/* Theme toggle */} +
@@ -185,7 +232,7 @@ export default function App() { animation: 'panelEnter 0.25s ease both', }}> {/* Preview */} -
+
- {/* Global SCTE-35 panel */} -
+ {/* Global SCTE-35 */} +