Major updates and improvements to BZZZ system

- Updated configuration and deployment files
- Improved system architecture and components
- Enhanced documentation and testing
- Fixed various issues and added new features

🤖 Generated with [Claude Code](https://claude.ai/code)

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

deployments/bare-metal/config-ui/app/components/ThemeToggle.tsx

@@ -0,0 +1,57 @@
+'use client'
+
+import { useState, useEffect } from 'react'
+import { SunIcon, MoonIcon } from '@heroicons/react/24/outline'
+
+export default function ThemeToggle() {
+  const [isDark, setIsDark] = useState(true) // Default to dark mode
+
+  useEffect(() => {
+    // Check for saved theme preference or default to dark
+    const savedTheme = localStorage.getItem('chorus-theme')
+    const prefersDark = !savedTheme || savedTheme === 'dark'
+    
+    setIsDark(prefersDark)
+    updateTheme(prefersDark)
+  }, [])
+
+  const updateTheme = (dark: boolean) => {
+    const html = document.documentElement
+    if (dark) {
+      html.classList.add('dark')
+      html.classList.remove('light')
+    } else {
+      html.classList.remove('dark')
+      html.classList.add('light')
+    }
+  }
+
+  const toggleTheme = () => {
+    const newIsDark = !isDark
+    setIsDark(newIsDark)
+    updateTheme(newIsDark)
+    
+    // Save preference
+    localStorage.setItem('chorus-theme', newIsDark ? 'dark' : 'light')
+  }
+
+  return (
+    <button
+      onClick={toggleTheme}
+      className="btn-text flex items-center space-x-2 p-2 rounded-md transition-colors duration-200"
+      aria-label={`Switch to ${isDark ? 'light' : 'dark'} theme`}
+    >
+      {isDark ? (
+        <>
+          <SunIcon className="h-4 w-4" />
+          <span className="text-xs">Light</span>
+        </>
+      ) : (
+        <>
+          <MoonIcon className="h-4 w-4" />
+          <span className="text-xs">Dark</span>
+        </>
+      )}
+    </button>
+  )
+}