Add accent color theming and a manual Check for Updates button in Settings

Author: voidstackloop

README.md

@@ -51,9 +51,10 @@ Beyond chat, Modelforge includes an **agentic mode** — the model can read/writ
 
 **Customization & control**
 - English and Turkish UI localization.
+- **Theming** — light/dark/system color mode plus a choice of accent colors (default gray, blue, green, purple, orange, rose), in Settings → Appearance.
 - Configurable Ollama host — point at a remote server instead of localhost.
 - Data export/import, and one-click "copy diagnostic info" for bug reports.
-- Auto-updates: packaged builds check GitHub Releases for new versions.
+- **Updates** — packaged builds check GitHub Releases for new versions automatically on launch, plus a manual "Check for updates" button in Settings (also available from the app menu).
 
 ## Screenshots
 

app/src/main.ts

@@ -279,6 +279,7 @@ function registerIpcHandlers(): void {
         isBusy = busy;
     });
     ipcMain.handle("app:getVersion", () => app.getVersion());
+    ipcMain.handle("app:checkForUpdates", () => checkForUpdatesManually(() => mainWindow));
     ipcMain.handle("app:getDiagnostics", async () => ({
         appVersion: app.getVersion(),
         electron: process.versions.electron,

app/src/preload.ts

@@ -88,6 +88,7 @@ contextBridge.exposeInMainWorld("api", {
     app: {
         setBusy: (busy: boolean) => ipcRenderer.invoke("app:setBusy", busy),
         getVersion: () => ipcRenderer.invoke("app:getVersion"),
+        checkForUpdates: () => ipcRenderer.invoke("app:checkForUpdates"),
         getDiagnostics: () => ipcRenderer.invoke("app:getDiagnostics"),
         openLogsFolder: () => ipcRenderer.invoke("app:openLogsFolder"),
     },

frontend/src/components/theme-provider.tsx

@@ -1,6 +1,10 @@
 import { createContext, useContext, useEffect, useState } from "react";
 
 type Theme = "dark" | "light" | "system";
+export type AccentColor = "default" | "blue" | "green" | "purple" | "orange" | "rose";
+
+// eslint-disable-next-line react-refresh/only-export-components -- constant shared with the accent-color picker in Settings
+export const ACCENT_COLORS: AccentColor[] = ["default", "blue", "green", "purple", "orange", "rose"];
 
 type ThemeProviderProps = {
     children: React.ReactNode;
@@ -11,9 +15,12 @@ type ThemeProviderProps = {
 type ThemeProviderState = {
     theme: Theme;
     setTheme: (theme: Theme) => void;
+    accent: AccentColor;
+    setAccent: (accent: AccentColor) => void;
 };
 
 const ThemeProviderContext = createContext<ThemeProviderState | undefined>(undefined);
+const ACCENT_STORAGE_KEY = "vite-ui-accent";
 
 export function ThemeProvider({
     children,
@@ -23,6 +30,9 @@ export function ThemeProvider({
     const [theme, setThemeState] = useState<Theme>(
         () => (localStorage.getItem(storageKey) as Theme) || defaultTheme
     );
+    const [accent, setAccentState] = useState<AccentColor>(
+        () => (localStorage.getItem(ACCENT_STORAGE_KEY) as AccentColor) || "default"
+    );
 
     useEffect(() => {
         const root = window.document.documentElement;
@@ -39,13 +49,24 @@ export function ThemeProvider({
         root.classList.add(theme);
     }, [theme]);
 
+    useEffect(() => {
+        const root = window.document.documentElement;
+        root.classList.remove(...ACCENT_COLORS.map((c) => `theme-${c}`));
+        if (accent !== "default") root.classList.add(`theme-${accent}`);
+    }, [accent]);
+
     const setTheme = (theme: Theme) => {
         localStorage.setItem(storageKey, theme);
         setThemeState(theme);
     };
 
+    const setAccent = (accent: AccentColor) => {
+        localStorage.setItem(ACCENT_STORAGE_KEY, accent);
+        setAccentState(accent);
+    };
+
     return (
-        <ThemeProviderContext.Provider value={{ theme, setTheme }}>
+        <ThemeProviderContext.Provider value={{ theme, setTheme, accent, setAccent }}>
             {children}
         </ThemeProviderContext.Provider>
     );

frontend/src/index.css

@@ -44,6 +44,66 @@
   --ring: oklch(0.556 0 0);
 }
 
+/* Accent color themes — layered on top of the light/dark mode above. Only
+   --primary/--ring (and their foreground) are tinted; backgrounds, borders,
+   and muted surfaces stay neutral so the accent reads as a deliberate highlight
+   color rather than tinting the whole UI. "Default" (no .theme-* class) keeps
+   the original grayscale look. */
+.theme-blue {
+  --primary: oklch(0.5 0.2 260);
+  --primary-foreground: oklch(0.985 0 0);
+  --ring: oklch(0.5 0.2 260);
+}
+.dark.theme-blue {
+  --primary: oklch(0.65 0.19 260);
+  --primary-foreground: oklch(0.145 0 0);
+  --ring: oklch(0.65 0.19 260);
+}
+
+.theme-green {
+  --primary: oklch(0.5 0.16 145);
+  --primary-foreground: oklch(0.985 0 0);
+  --ring: oklch(0.5 0.16 145);
+}
+.dark.theme-green {
+  --primary: oklch(0.65 0.17 145);
+  --primary-foreground: oklch(0.145 0 0);
+  --ring: oklch(0.65 0.17 145);
+}
+
+.theme-purple {
+  --primary: oklch(0.5 0.22 300);
+  --primary-foreground: oklch(0.985 0 0);
+  --ring: oklch(0.5 0.22 300);
+}
+.dark.theme-purple {
+  --primary: oklch(0.65 0.2 300);
+  --primary-foreground: oklch(0.145 0 0);
+  --ring: oklch(0.65 0.2 300);
+}
+
+.theme-orange {
+  --primary: oklch(0.58 0.19 55);
+  --primary-foreground: oklch(0.985 0 0);
+  --ring: oklch(0.58 0.19 55);
+}
+.dark.theme-orange {
+  --primary: oklch(0.7 0.17 55);
+  --primary-foreground: oklch(0.145 0 0);
+  --ring: oklch(0.7 0.17 55);
+}
+
+.theme-rose {
+  --primary: oklch(0.55 0.22 10);
+  --primary-foreground: oklch(0.985 0 0);
+  --ring: oklch(0.55 0.22 10);
+}
+.dark.theme-rose {
+  --primary: oklch(0.65 0.19 10);
+  --primary-foreground: oklch(0.145 0 0);
+  --ring: oklch(0.65 0.19 10);
+}
+
 @theme inline {
   --radius-sm: calc(var(--radius) - 4px);
   --radius-md: calc(var(--radius) - 2px);

frontend/src/lib/translations.ts

@@ -90,7 +90,15 @@ export interface Dictionary {
     copyDiagnosticInfo: string;
     copied: string;
     openLogsFolder: string;
+    checkForUpdates: string;
     language: string;
+    appearance: string;
+    colorMode: string;
+    colorModeLight: string;
+    colorModeDark: string;
+    colorModeSystem: string;
+    accentColor: string;
+    accentColorNames: { default: string; blue: string; green: string; purple: string; orange: string; rose: string };
     general: string;
     providers: string;
     models: string;
@@ -191,7 +199,22 @@ export const en: Dictionary = {
     copyDiagnosticInfo: "Copy diagnostic info",
     copied: "Copied",
     openLogsFolder: "Open logs folder",
+    checkForUpdates: "Check for updates",
     language: "Language",
+    appearance: "Appearance",
+    colorMode: "Color mode",
+    colorModeLight: "Light",
+    colorModeDark: "Dark",
+    colorModeSystem: "System",
+    accentColor: "Accent color",
+    accentColorNames: {
+        default: "Default (gray)",
+        blue: "Blue",
+        green: "Green",
+        purple: "Purple",
+        orange: "Orange",
+        rose: "Rose",
+    },
     general: "General",
     providers: "Providers",
     models: "Models",
@@ -293,7 +316,22 @@ export const tr: Dictionary = {
     copyDiagnosticInfo: "Tanılama bilgisini kopyala",
     copied: "Kopyalandı",
     openLogsFolder: "Günlük klasörünü aç",
+    checkForUpdates: "Güncellemeleri denetle",
     language: "Dil",
+    appearance: "Görünüm",
+    colorMode: "Renk modu",
+    colorModeLight: "Açık",
+    colorModeDark: "Koyu",
+    colorModeSystem: "Sistem",
+    accentColor: "Vurgu rengi",
+    accentColorNames: {
+        default: "Varsayılan (gri)",
+        blue: "Mavi",
+        green: "Yeşil",
+        purple: "Mor",
+        orange: "Turuncu",
+        rose: "Gül kurusu",
+    },
     general: "Genel",
     providers: "Sağlayıcılar",
     models: "Modeller",

frontend/src/pages/Settings.tsx

@@ -12,6 +12,7 @@ import {
     Settings2,
     Bug,
     Copy,
+    RefreshCw,
 } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { Badge } from "@/components/ui/badge";
@@ -35,6 +36,8 @@ import { OPENAI_MODELS, ANTHROPIC_MODELS, formatModelRef } from "@/lib/providers
 import { useSessions } from "@/lib/sessions-context";
 import { useI18n } from "@/lib/i18n";
 import type { Locale } from "@/lib/translations";
+import { useTheme, ACCENT_COLORS, type AccentColor } from "@/components/theme-provider";
+import { cn } from "@/lib/utils";
 
 // Ollama pulls Hugging Face GGUF models via a "hf.co/user/repo[:quant]" model
 // name — accept a pasted full URL or the "huggingface.co/" host too, rather
@@ -46,12 +49,25 @@ function normalizeModelTag(input: string): string {
         .replace(/^huggingface\.co\//i, "hf.co/");
 }
 
+// Static preview swatches for the accent color picker — independent of the
+// live CSS variables so the dot always shows the same recognizable hue
+// regardless of which theme is currently active.
+const ACCENT_SWATCHES: Record<AccentColor, string> = {
+    default: "oklch(0.556 0 0)",
+    blue: "oklch(0.55 0.2 260)",
+    green: "oklch(0.55 0.16 145)",
+    purple: "oklch(0.55 0.22 300)",
+    orange: "oklch(0.62 0.19 55)",
+    rose: "oklch(0.58 0.22 10)",
+};
+
 function formatBytes(bytes: number) {
     return `${(bytes / 1e9).toFixed(1)} GB`;
 }
 
 export default function Settings() {
     const { t, locale, setLocale } = useI18n();
+    const { theme, setTheme, accent, setAccent } = useTheme();
     const [running, setRunning] = useState<boolean | null>(null);
     const [specs, setSpecs] = useState<SystemSpecs | null>(null);
     const [recommendations, setRecommendations] = useState<ModelRecommendations | null>(null);
@@ -291,6 +307,44 @@ export default function Settings() {
                             </SettingsRow>
                         </SettingsSection>
 
+                        <SettingsSection title={t.appearance}>
+                            <SettingsRow label={t.colorMode}>
+                                <Select value={theme} onValueChange={(v) => setTheme(v as "light" | "dark" | "system")}>
+                                    <SelectTrigger size="sm" className="w-36">
+                                        <SelectValue />
+                                    </SelectTrigger>
+                                    <SelectContent>
+                                        <SelectItem value="light">{t.colorModeLight}</SelectItem>
+                                        <SelectItem value="dark">{t.colorModeDark}</SelectItem>
+                                        <SelectItem value="system">{t.colorModeSystem}</SelectItem>
+                                    </SelectContent>
+                                </Select>
+                            </SettingsRow>
+                            <SettingsRow label={t.accentColor} stacked>
+                                <div className="flex flex-wrap gap-2">
+                                    {ACCENT_COLORS.map((c) => (
+                                        <button
+                                            key={c}
+                                            type="button"
+                                            onClick={() => setAccent(c)}
+                                            aria-label={t.accentColorNames[c]}
+                                            aria-pressed={accent === c}
+                                            title={t.accentColorNames[c]}
+                                            className={cn(
+                                                "flex size-8 items-center justify-center rounded-full border-2 transition-colors",
+                                                accent === c ? "border-foreground" : "border-transparent"
+                                            )}
+                                        >
+                                            <span
+                                                className="size-6 rounded-full"
+                                                style={{ backgroundColor: ACCENT_SWATCHES[c] }}
+                                            />
+                                        </button>
+                                    ))}
+                                </div>
+                            </SettingsRow>
+                        </SettingsSection>
+
                         <SettingsSection title={t.language}>
                             <SettingsRow label={t.language}>
                                 <Select value={locale} onValueChange={(v) => setLocale(v as Locale)}>
@@ -346,9 +400,14 @@ export default function Settings() {
                             </SettingsSection>
                         )}
 
-                        <p className="text-center text-xs text-muted-foreground">
-                            {t.appName}{appVersion ? ` v${appVersion}` : ""}
-                        </p>
+                        <div className="flex flex-col items-center gap-1.5">
+                            <p className="text-center text-xs text-muted-foreground">
+                                {t.appName}{appVersion ? ` v${appVersion}` : ""}
+                            </p>
+                            <Button size="sm" variant="outline" onClick={() => window.api.app.checkForUpdates()} className="gap-1.5">
+                                <RefreshCw className="size-3.5" /> {t.checkForUpdates}
+                            </Button>
+                        </div>
                     </div>
 
                     <div>

frontend/src/types/electron.d.ts

@@ -253,6 +253,7 @@ export interface ElectronApi {
   app: {
     setBusy: (busy: boolean) => Promise<void>;
     getVersion: () => Promise<string>;
+    checkForUpdates: () => Promise<void>;
     getDiagnostics: () => Promise<{
       appVersion: string;
       electron: string;