{/* Page Header */}
@@ -861,6 +939,9 @@ function Settings({
{/* Hardware Tier Badge */}
+ {/* Appearance & Themes Section */}
+
+
{/* Image Settings Section */}
diff --git a/app/frontend/src/components/TopStatusBar.jsx b/app/frontend/src/components/TopStatusBar.jsx
index 187a8b7..9fbafb2 100644
--- a/app/frontend/src/components/TopStatusBar.jsx
+++ b/app/frontend/src/components/TopStatusBar.jsx
@@ -1,7 +1,21 @@
-import React, { memo } from "react";
-import { Cpu, HardDrive, Database, Square, RefreshCw, Sun, Moon } from "lucide-react";
+import React, { memo, useState, useRef, useEffect } from "react";
+import { Cpu, HardDrive, Database, Square, RefreshCw, Sun, Moon, Palette, Check } from "lucide-react";
+import { THEMES } from "../themes";
function TopStatusBar({ telemetry, serverRunning, activeModel, onStopServer, isStoppingServer = false, theme, setTheme }) {
+ const [showThemeMenu, setShowThemeMenu] = useState(false);
+ const menuRef = useRef(null);
+
+ useEffect(() => {
+ function handleClickOutside(event) {
+ if (menuRef.current && !menuRef.current.contains(event.target)) {
+ setShowThemeMenu(false);
+ }
+ }
+ document.addEventListener("mousedown", handleClickOutside);
+ return () => document.removeEventListener("mousedown", handleClickOutside);
+ }, []);
+
const formatGb = (value) => {
const number = Number(value);
return Number.isFinite(number) && number > 0 ? number.toFixed(number >= 10 ? 0 : 1) : "--";
@@ -17,6 +31,8 @@ function TopStatusBar({ telemetry, serverRunning, activeModel, onStopServer, isS
return "status-indicator offline";
};
+ const isDark = (theme || "dark").startsWith("dark");
+
return (
@@ -34,15 +50,55 @@ function TopStatusBar({ telemetry, serverRunning, activeModel, onStopServer, isS
)}
-
+
+
+
+
+ {showThemeMenu && (
+
+
Select Theme
+
+ {THEMES.map((t) => {
+ const isActive = theme === t.id;
+ return (
+
+ );
+ })}
+
+ )}
+
+
{serverRunning && (