Add light theme

src/client/components/chart-cards/common/chart/cartesian-grid.tsx

@@ -22,7 +22,7 @@ export const CartesianGrid = () => (
         key={index}
         y1={Math.max(1, Math.min(height - 1, (height * index) / 4))}
         y2={Math.max(1, Math.min(height - 1, (height * index) / 4))}
-        stroke='var(--color-neutral1)'
+        stroke='var(--color-background1)'
         strokeWidth={1}
       />
     ))}

src/client/components/chart-cards/common/chart/index.css

@@ -1,5 +1,5 @@
 .chart {
-  color: var(--color-neutral2);
+  color: var(--color-text-subdued);
   display: grid;
   font-size: 16px;
   gap: 4px;

src/client/components/chart-cards/static.tsx

@@ -1,6 +1,7 @@
 import { useAnimationFrame } from '@/hooks/use-animation-frame';
 import { useQuery } from '@tanstack/react-query';
-import { useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
+import { Switch } from '../switch';
 
 const formatUptime = (value: number) => {
   const seconds = String(Math.floor(value % 60)).padStart(2, '0');
@@ -37,6 +38,12 @@ const Uptime = ({ boot_time }: Pick<StaticData, 'boot_time'>) => {
 
 export const Static = () => {
   const { data: staticData } = useQuery<StaticData>({ queryKey: ['static'] });
+  const root = useRef(document.getElementById('root')!);
+  const [dark, setDark] = useState(window.matchMedia('(prefers-color-scheme: dark)').matches);
+
+  useEffect(() => {
+    root.current.setAttribute('data-theme', dark ? 'dark' : 'light');
+  }, [dark]);
 
   return (
     staticData && (
@@ -51,6 +58,12 @@ export const Static = () => {
         <small>Kernel</small>
         <h3>{staticData.kernel_version}</h3>
         {staticData.boot_time && <Uptime boot_time={staticData.boot_time} />}
+
+        <Switch
+          checked={dark}
+          label={`${dark ? 'Dark' : 'Light'} theme`}
+          onChange={({ target }) => setDark(target.checked)}
+        />
       </div>
     )
   );