Dark theme by default (#410)

AgeManning · web-flow · commit b948e97010da · 2025-07-30T13:19:32.000+10:00
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -58,6 +58,7 @@ const openSauce = localFont({
     },
   ],
   variable: '--openSauce',
+  preload: false,
 })
 
 const roboto = localFont({
@@ -74,6 +75,7 @@ const roboto = localFont({
     },
   ],
   variable: '--roboto',
+  preload: false,
 })
 
 const archivo = localFont({
@@ -90,23 +92,25 @@ const archivo = localFont({
     },
   ],
   variable: '--archivo',
+  preload: false,
 })
 
 export default function RootLayout({ children }: { children: React.ReactNode }) {
   return (
-    <html lang='en'>
+    <html lang='en' suppressHydrationWarning>
       <head>
         <script
           dangerouslySetInnerHTML={{
             __html: `
               (function() {
                 try {
                   const theme = JSON.parse(localStorage.getItem('UI')?.trim() || 'null');
-                  if (theme === "DARK") {
+                  if (theme === "DARK" || theme === null) {
                     document.documentElement.classList.add('dark');
                   }
                 } catch (e) {
                   console.error('Failed to parse theme from localStorage:', e);
+                  document.documentElement.classList.add('dark');
                 }
               })();
             `,
diff --git a/next.config.js b/next.config.js
@@ -1,7 +1,7 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   reactStrictMode: false,
-  webpack(config) {
+  webpack(config, { dev }) {
     config.module.rules.push({
       test: /\.svg$/,
       use: ['@svgr/webpack'],
@@ -13,6 +13,11 @@ const nextConfig = {
       topLevelAwait: true,
     }
 
+    // Suppress source map warnings for third-party modules in development
+    if (dev) {
+      config.devtool = 'cheap-module-source-map'
+    }
+
     return config
   },
 }
diff --git a/src/components/NetworkPeerSpeedometer/NetworkPeerSpeedometer.tsx b/src/components/NetworkPeerSpeedometer/NetworkPeerSpeedometer.tsx
@@ -17,6 +17,9 @@ const NetworkPeerSpeedometer: FC<NetworkPeerSpeedometerProps> = ({ peerData }) =
   const mode = useRecoilValue(uiMode)
   const { connected } = peerData
 
+  // Ensure connected value is a valid number to prevent NaN in transform attributes
+  const safeConnectedValue = typeof connected === 'number' && !isNaN(connected) ? connected : 0
+
   return (
     <Tooltip
       id='peerCount'
@@ -40,7 +43,7 @@ const NetworkPeerSpeedometer: FC<NetworkPeerSpeedometerProps> = ({ peerData }) =
             darkMode='dark:text-white'
             type='text-caption2'
           >
-            {connected}
+            {safeConnectedValue}
           </Typography>
           <ReactSpeedometer
             width={90}
@@ -63,7 +66,7 @@ const NetworkPeerSpeedometer: FC<NetworkPeerSpeedometerProps> = ({ peerData }) =
             labelFontSize='6px'
             valueTextFontSize='9px'
             segmentColors={['tomato', 'gold', 'limegreen']}
-            value={connected}
+            value={safeConnectedValue}
             maxValue={100}
             textColor={'transparent'}
           />
