fix: dark mode

web/src/components/LiveChip.jsx

@@ -2,10 +2,7 @@ import { h } from 'preact';
 
 export function LiveChip({ className }) {
   return (
-    <div
+    <div className={`inline relative px-2 py-1 rounded-full ${className}`}>
-      className={`inline relative px-2 py-1 rounded-full ${className}`}
-      style={{ backgroundColor: 'rgba(255, 255, 255, 0.1)' }}
-    >
       <div className='relative inline-block w-3 h-3 mr-2'>
         <span class='flex h-3 w-3'>
           <span

web/src/components/Tabs.jsx

@@ -28,7 +28,9 @@ export function Tabs({ children, selectedIndex: selectedIndexProp, onChange, cla
 }
 
 export function TextTab({ selected, text, onClick }) {
-  const selectedStyle = selected ? 'text-black bg-white' : 'text-white bg-transparent';
+  const selectedStyle = selected
+    ? 'text-white bg-blue-500 dark:text-black dark:bg-white'
+    : 'text-black dark:text-white bg-transparent';
   return (
     <button onClick={onClick} className={`rounded-full px-4 py-2 ${selectedStyle}`}>
       <span>{text}</span>

web/src/components/Timeline.jsx

@@ -13,7 +13,7 @@ export default function Timeline({ events, offset, currentIndex, onChange }) {
   const [scrollActive, setScrollActive] = useState(true);
 
   useEffect(() => {
-    if (events && timelineOffset) {
+    if (events && events.length > 0 && timelineOffset) {
       const firstEvent = events[0];
       if (firstEvent) {
         setMarkerTime(longToDate(firstEvent.start_time));

web/src/routes/Camera_V2.jsx

@@ -115,16 +115,16 @@ export default function Camera({ camera }) {
   };
 
   return (
-    <div className='flex bg-gray-900 w-full h-full justify-center'>
+    <div className='flex bg-white dark:bg-black w-full h-full justify-center'>
       <div className='relative max-w-screen-md flex-grow w-full'>
         <div className='absolute top-0 text-white w-full'>
           <div className='flex pt-4 pl-4 items-center w-full h-16 z10'>
             {(playerType === 'live' || playerType === 'debug') && (
               <Fragment>
-                <Heading size='xl' className='mr-2'>
+                <Heading size='xl' className='mr-2 text-black dark:text-white'>
                   {camera}
                 </Heading>
-                <LiveChip />
+                <LiveChip className='text-green-400 border-2 border-solid border-green-400 dark:border-transparent dark:text-white dark:bg-white bg-opacity-40 dark:bg-opacity-10' />
               </Fragment>
             )}
           </div>