backend/app/api/routes/maintenance.py

@@ -126,7 +126,8 @@ async def get_printer_total_hours(db: AsyncSession, printer_id: int) -> float:
     """Calculate total active hours for a printer from runtime counter plus offset.
 
     Uses the runtime_seconds counter which tracks actual machine active time
-    (RUNNING and PAUSE states), including calibration, heating, and printing.
+    (RUNNING state only — paused time is excluded since maintenance intervals
+    measure mechanical wear, not wall-clock active time, see #1521).
     """
     # Get printer runtime and offset
     result = await db.execute(
@@ -714,7 +715,7 @@ async def set_printer_hours(
 
     The offset is calculated as: offset = total_hours - runtime_hours
     Where runtime_hours comes from the runtime_seconds counter that tracks
-    actual machine active time (RUNNING/PAUSE states).
+    actual machine active time (RUNNING state only — paused time excluded, #1521).
     """
     # Get printer
     result = await db.execute(select(Printer).where(Printer.id == printer_id))

backend/app/main.py

@@ -4380,7 +4380,13 @@ RUNTIME_TRACKING_INTERVAL = 30  # Update every 30 seconds
 
 
 async def track_printer_runtime():
-    """Background task to track printer active runtime (RUNNING/PAUSE states)."""
+    """Background task to track printer active runtime (RUNNING state only).
+
+    PAUSE is intentionally excluded — the runtime counter feeds hours-based
+    maintenance intervals (rod lubrication, belt checks, nozzle cleaning)
+    which track mechanical wear. Pause time has no motion and no wear, so
+    counting it inflates maintenance warnings (#1521).
+    """
     logger = logging.getLogger(__name__)
 
     # Wait for MQTT connections to establish on startup
@@ -4418,7 +4424,7 @@ async def track_printer_runtime():
                 new_runtime = runtime_secs
                 new_last_update = last_update
 
-                if state.state in ("RUNNING", "PAUSE"):
+                if state.state == "RUNNING":
                     if last_update:
                         lu = last_update if last_update.tzinfo else last_update.replace(tzinfo=timezone.utc)
                         elapsed = (now - lu).total_seconds()

backend/app/models/printer.py

@@ -20,7 +20,9 @@ class Printer(Base):
     is_active: Mapped[bool] = mapped_column(Boolean, default=True)
     auto_archive: Mapped[bool] = mapped_column(Boolean, default=True)
     print_hours_offset: Mapped[float] = mapped_column(Float, default=0.0)  # Baseline hours to add
-    runtime_seconds: Mapped[int] = mapped_column(default=0)  # Accumulated active runtime (RUNNING/PAUSE states)
+    runtime_seconds: Mapped[int] = mapped_column(
+        default=0
+    )  # Accumulated active runtime (RUNNING state only — see #1521)
     last_runtime_update: Mapped[datetime | None] = mapped_column(
         DateTime, nullable=True
     )  # Last time runtime was updated

backend/tests/unit/test_runtime_tracking_pause.py

@@ -0,0 +1,155 @@
+"""Regression tests for the runtime-tracking task (#1521).
+
+The ``runtime_seconds`` counter on each printer feeds hours-based maintenance
+intervals (rod lubrication, belt checks, nozzle cleaning). It was accumulating
+elapsed time whenever ``state.state`` was ``RUNNING`` *or* ``PAUSE``, which
+meant a print paused for hours (e.g. overnight) inflated the maintenance
+clock without any actual mechanical wear. Fix excludes PAUSE; these tests
+pin the new contract.
+"""
+
+from __future__ import annotations
+
+import asyncio
+from datetime import datetime, timedelta, timezone
+from types import SimpleNamespace
+from unittest.mock import patch
+
+import pytest
+from sqlalchemy import select
+from sqlalchemy.ext.asyncio import AsyncSession, async_sessionmaker, create_async_engine
+
+
+async def _build_db_with_printer(*, runtime_seconds: int, last_runtime_update: datetime | None):
+    """Spin up an in-memory DB with one active printer in the requested state."""
+    import backend.app.models  # noqa: F401  -- register all models on Base.metadata
+    from backend.app.core.database import Base
+    from backend.app.models.printer import Printer
+
+    engine = create_async_engine("sqlite+aiosqlite:///:memory:", echo=False)
+    async with engine.begin() as conn:
+        await conn.run_sync(Base.metadata.create_all)
+    session_maker = async_sessionmaker(engine, class_=AsyncSession, expire_on_commit=False)
+
+    async with session_maker() as db:
+        db.add(
+            Printer(
+                id=1,
+                name="P1",
+                serial_number="S1",
+                ip_address="1.1.1.1",
+                access_code="x",
+                is_active=True,
+                runtime_seconds=runtime_seconds,
+                last_runtime_update=last_runtime_update,
+            )
+        )
+        await db.commit()
+    return engine, session_maker
+
+
+async def _run_one_iteration(session_maker, state_value: str):
+    """Run a single iteration of track_printer_runtime() against a mocked state.
+
+    Patches ``asyncio.sleep`` to skip the startup wait and cancel after the
+    first loop tick. Patches ``printer_manager.get_status`` to return a fake
+    state with the requested ``.state`` value. Points the module-level
+    ``async_session`` at the test DB so the loop's queries hit it.
+    """
+    from backend.app import main as app_main
+
+    sleep_calls = {"count": 0}
+    real_sleep = asyncio.sleep
+
+    async def fake_sleep(seconds, *args, **kwargs):
+        sleep_calls["count"] += 1
+        # First sleep = the 15s startup wait. Second sleep = end-of-iteration
+        # tick; raise here so the loop exits cleanly via its CancelledError
+        # handler after exactly one work cycle.
+        if sleep_calls["count"] >= 2:
+            raise asyncio.CancelledError()
+        # Yield control to keep the event loop healthy without blocking.
+        await real_sleep(0)
+
+    fake_state = SimpleNamespace(state=state_value, connected=True)
+
+    # The loop's tail-of-iteration sleep is OUTSIDE its try/except, so the
+    # CancelledError raised from fake_sleep propagates out of the function
+    # rather than triggering the inner break — catch it at the test boundary.
+    with (
+        patch.object(app_main, "async_session", session_maker),
+        patch.object(app_main.printer_manager, "get_status", return_value=fake_state),
+        patch.object(app_main.asyncio, "sleep", fake_sleep),
+        pytest.raises(asyncio.CancelledError),
+    ):
+        await app_main.track_printer_runtime()
+
+
+@pytest.mark.asyncio
+async def test_pause_state_does_not_accumulate_runtime():
+    """PAUSE must NOT add to runtime_seconds — paused = no motion = no wear (#1521)."""
+    seeded_runtime = 1000  # 1000s already accumulated
+    seeded_last_update = datetime.now(timezone.utc) - timedelta(seconds=300)  # 5min ago
+    engine, session_maker = await _build_db_with_printer(
+        runtime_seconds=seeded_runtime, last_runtime_update=seeded_last_update
+    )
+
+    await _run_one_iteration(session_maker, state_value="PAUSE")
+
+    from backend.app.models.printer import Printer
+
+    async with session_maker() as db:
+        row = (await db.execute(select(Printer).where(Printer.id == 1))).scalar_one()
+        # Runtime counter unchanged — the 5 minutes paused contributed nothing.
+        assert row.runtime_seconds == seeded_runtime
+        # last_runtime_update cleared on the non-running branch so the next
+        # transition to RUNNING starts fresh and doesn't back-bill paused time.
+        assert row.last_runtime_update is None
+
+    await engine.dispose()
+
+
+@pytest.mark.asyncio
+async def test_running_state_still_accumulates_runtime():
+    """RUNNING must continue to accumulate — the bug was scope, not the whole feature."""
+    seeded_runtime = 1000
+    seeded_last_update = datetime.now(timezone.utc) - timedelta(seconds=60)
+    engine, session_maker = await _build_db_with_printer(
+        runtime_seconds=seeded_runtime, last_runtime_update=seeded_last_update
+    )
+
+    await _run_one_iteration(session_maker, state_value="RUNNING")
+
+    from backend.app.models.printer import Printer
+
+    async with session_maker() as db:
+        row = (await db.execute(select(Printer).where(Printer.id == 1))).scalar_one()
+        # Wall-clock elapsed since seeded_last_update should now be added.
+        # Allow a generous lower bound (≥30s) — actual elapsed depends on
+        # how fast the test runs, but it MUST have grown past the seed.
+        assert row.runtime_seconds > seeded_runtime
+        assert row.runtime_seconds >= seeded_runtime + 30
+        assert row.last_runtime_update is not None
+
+    await engine.dispose()
+
+
+@pytest.mark.asyncio
+async def test_idle_state_clears_last_update_without_accumulating():
+    """A non-active state (FINISH/IDLE/PREPARE/etc.) must clear last_runtime_update
+    so a later RUNNING transition doesn't retroactively back-bill all the idle time."""
+    seeded_runtime = 1000
+    seeded_last_update = datetime.now(timezone.utc) - timedelta(seconds=3600)  # 1h ago
+    engine, session_maker = await _build_db_with_printer(
+        runtime_seconds=seeded_runtime, last_runtime_update=seeded_last_update
+    )
+
+    await _run_one_iteration(session_maker, state_value="FINISH")
+
+    from backend.app.models.printer import Printer
+
+    async with session_maker() as db:
+        row = (await db.execute(select(Printer).where(Printer.id == 1))).scalar_one()
+        assert row.runtime_seconds == seeded_runtime  # no accumulation
+        assert row.last_runtime_update is None  # cleared, prevents back-bill
+    await engine.dispose()

frontend/src/__tests__/components/Layout.test.tsx

@@ -125,6 +125,47 @@ describe('Layout', () => {
         expect(buttons.length).toBeGreaterThan(0);
       });
     });
+
+    it('cycles through dark → light → system → dark', async () => {
+      localStorage.setItem('theme-mode', 'dark');
+      render(<Layout />);
+
+      await waitFor(() => {
+        // In dark mode, title should say "Switch to light mode"
+        const btn = document.querySelector('button[title="Switch to light mode"]');
+        expect(btn).toBeInTheDocument();
+      });
+
+      // Click to go from dark → light
+      const lightBtn = document.querySelector('button[title="Switch to light mode"]')!;
+      lightBtn.click();
+
+      await waitFor(() => {
+        // In light mode, title should say "Switch to system mode"
+        const btn = document.querySelector('button[title="Switch to system mode"]');
+        expect(btn).toBeInTheDocument();
+      });
+
+      // Click to go from light → system
+      const systemBtn = document.querySelector('button[title="Switch to system mode"]')!;
+      systemBtn.click();
+
+      await waitFor(() => {
+        // In system mode, title should say "Switch to dark mode"
+        const btn = document.querySelector('button[title="Switch to dark mode"]');
+        expect(btn).toBeInTheDocument();
+      });
+
+      // Click to go from system → dark
+      const darkBtn = document.querySelector('button[title="Switch to dark mode"]')!;
+      darkBtn.click();
+
+      await waitFor(() => {
+        // Back to dark mode
+        const btn = document.querySelector('button[title="Switch to light mode"]');
+        expect(btn).toBeInTheDocument();
+      });
+    });
   });
 
   describe('plate detection alert modal', () => {

frontend/src/__tests__/contexts/ThemeContext.test.tsx

@@ -0,0 +1,181 @@
+/**
+ * Tests for the ThemeContext system theme detection feature.
+ */
+
+import { describe, it, expect, beforeEach } from 'vitest';
+import { renderHook, act } from '@testing-library/react';
+import { ThemeProvider, useTheme } from '../../contexts/ThemeContext';
+import type { ReactNode } from 'react';
+
+// Helper to create a controllable matchMedia mock for individual tests
+function mockMatchMedia(prefersDark: boolean) {
+  let listener: ((e: MediaQueryListEvent) => void) | null = null;
+
+  const mql = {
+    matches: prefersDark,
+    media: '(prefers-color-scheme: dark)',
+    onchange: null,
+    addListener: () => {},
+    removeListener: () => {},
+    addEventListener: (_event: string, cb: (e: MediaQueryListEvent) => void) => {
+      listener = cb;
+    },
+    removeEventListener: () => {},
+    dispatchEvent: () => true,
+  };
+
+  Object.defineProperty(window, 'matchMedia', {
+    writable: true,
+    value: () => mql,
+  });
+
+  return {
+    /** Simulate an OS theme change event */
+    fireChange: (dark: boolean) => {
+      mql.matches = dark;
+      if (listener) {
+        listener({ matches: dark } as MediaQueryListEvent);
+      }
+    },
+  };
+}
+
+function wrapper({ children }: { children: ReactNode }) {
+  return <ThemeProvider>{children}</ThemeProvider>;
+}
+
+describe('ThemeContext', () => {
+  beforeEach(() => {
+    localStorage.clear();
+    document.documentElement.className = '';
+  });
+
+  describe('systemPreference initialization', () => {
+    it('initializes systemPreference as dark when OS prefers dark', () => {
+      mockMatchMedia(true);
+
+      const { result } = renderHook(() => useTheme(), { wrapper });
+
+      // When mode is system, resolvedMode should follow OS preference
+      act(() => result.current.setMode('system'));
+      expect(result.current.resolvedMode).toBe('dark');
+    });
+
+    it('initializes systemPreference as light when OS prefers light', () => {
+      mockMatchMedia(false);
+
+      const { result } = renderHook(() => useTheme(), { wrapper });
+
+      act(() => result.current.setMode('system'));
+      expect(result.current.resolvedMode).toBe('light');
+    });
+  });
+
+  describe('matchMedia change event', () => {
+    it('updates systemPreference when OS theme changes', () => {
+      const { fireChange } = mockMatchMedia(false);
+
+      const { result } = renderHook(() => useTheme(), { wrapper });
+      act(() => result.current.setMode('system'));
+
+      expect(result.current.resolvedMode).toBe('light');
+
+      act(() => fireChange(true));
+      expect(result.current.resolvedMode).toBe('dark');
+
+      act(() => fireChange(false));
+      expect(result.current.resolvedMode).toBe('light');
+    });
+  });
+
+  describe('resolvedMode', () => {
+    it('follows explicit mode when mode is dark', () => {
+      mockMatchMedia(false);
+
+      const { result } = renderHook(() => useTheme(), { wrapper });
+      act(() => result.current.setMode('dark'));
+
+      expect(result.current.resolvedMode).toBe('dark');
+    });
+
+    it('follows explicit mode when mode is light', () => {
+      mockMatchMedia(true);
+
+      const { result } = renderHook(() => useTheme(), { wrapper });
+      act(() => result.current.setMode('light'));
+
+      expect(result.current.resolvedMode).toBe('light');
+    });
+
+    it('follows systemPreference when mode is system', () => {
+      const { fireChange } = mockMatchMedia(true);
+
+      const { result } = renderHook(() => useTheme(), { wrapper });
+      act(() => result.current.setMode('system'));
+
+      expect(result.current.resolvedMode).toBe('dark');
+
+      act(() => fireChange(false));
+      expect(result.current.resolvedMode).toBe('light');
+    });
+
+    it('ignores OS changes when mode is explicit', () => {
+      const { fireChange } = mockMatchMedia(false);
+
+      const { result } = renderHook(() => useTheme(), { wrapper });
+      act(() => result.current.setMode('dark'));
+
+      act(() => fireChange(true));
+      expect(result.current.resolvedMode).toBe('dark');
+    });
+  });
+
+  describe('document root dark class', () => {
+    it('adds dark class when mode is system and OS prefers dark', () => {
+      mockMatchMedia(true);
+
+      const { result } = renderHook(() => useTheme(), { wrapper });
+      act(() => result.current.setMode('system'));
+
+      expect(document.documentElement.classList.contains('dark')).toBe(true);
+    });
+
+    it('removes dark class when mode is system and OS prefers light', () => {
+      mockMatchMedia(false);
+
+      const { result } = renderHook(() => useTheme(), { wrapper });
+      act(() => result.current.setMode('system'));
+
+      expect(document.documentElement.classList.contains('dark')).toBe(false);
+    });
+
+    it('adds dark class when mode is explicitly dark', () => {
+      mockMatchMedia(false);
+
+      const { result } = renderHook(() => useTheme(), { wrapper });
+      act(() => result.current.setMode('dark'));
+
+      expect(document.documentElement.classList.contains('dark')).toBe(true);
+    });
+  });
+
+  describe('toggleMode', () => {
+    it('cycles dark → light → system → dark', () => {
+      mockMatchMedia(false);
+      localStorage.setItem('theme-mode', 'dark');
+
+      const { result } = renderHook(() => useTheme(), { wrapper });
+
+      expect(result.current.mode).toBe('dark');
+
+      act(() => result.current.toggleMode());
+      expect(result.current.mode).toBe('light');
+
+      act(() => result.current.toggleMode());
+      expect(result.current.mode).toBe('system');
+
+      act(() => result.current.toggleMode());
+      expect(result.current.mode).toBe('dark');
+    });
+  });
+});

frontend/src/__tests__/pages/SettingsPage.test.tsx

@@ -927,4 +927,65 @@ describe('SettingsPage', () => {
       15_000,
     );
   });
+
+  describe('theme mode buttons', () => {
+    it('renders Dark, Light, and System buttons', async () => {
+      render(<SettingsPage />);
+
+      await waitFor(() => {
+        expect(screen.getByRole('button', { name: 'Dark' })).toBeInTheDocument();
+        expect(screen.getByRole('button', { name: 'Light' })).toBeInTheDocument();
+        expect(screen.getByRole('button', { name: 'System' })).toBeInTheDocument();
+      });
+    });
+
+    it('highlights the active mode button with green border', async () => {
+      render(<SettingsPage />);
+      const user = userEvent.setup();
+
+      await waitFor(() => {
+        expect(screen.getByRole('button', { name: 'System' })).toBeInTheDocument();
+      });
+
+      await user.click(screen.getByRole('button', { name: 'System' }));
+
+      await waitFor(() => {
+        const systemBtn = screen.getByRole('button', { name: 'System' });
+        expect(systemBtn.className).toContain('border-bambu-green');
+      });
+    });
+
+    it('clicking a theme button switches mode', async () => {
+      localStorage.setItem('theme-mode', 'dark');
+      render(<SettingsPage />);
+      const user = userEvent.setup();
+
+      await waitFor(() => {
+        const darkBtn = screen.getByRole('button', { name: 'Dark' });
+        expect(darkBtn.className).toContain('border-bambu-green');
+      });
+
+      const lightBtn = screen.getByRole('button', { name: 'Light' });
+      await user.click(lightBtn);
+
+      await waitFor(() => {
+        expect(lightBtn.className).toContain('border-bambu-green');
+      });
+    });
+
+    it('shows a toast when theme button is clicked', async () => {
+      render(<SettingsPage />);
+      const user = userEvent.setup();
+
+      await waitFor(() => {
+        expect(screen.getByRole('button', { name: 'System' })).toBeInTheDocument();
+      });
+
+      await user.click(screen.getByRole('button', { name: 'System' }));
+
+      await waitFor(() => {
+        expect(screen.getByText('Settings saved')).toBeInTheDocument();
+      });
+    });
+  });
 });

frontend/src/__tests__/setup.ts

@@ -26,18 +26,19 @@ afterEach(() => {
 afterAll(() => server.close());
 
 // Mock window.matchMedia for responsive components
+// Uses a plain function (not vi.fn) so vi.restoreAllMocks() in tests can't wipe it
 Object.defineProperty(window, 'matchMedia', {
   writable: true,
-  value: vi.fn().mockImplementation((query: string) => ({
+  value: (query: string) => ({
     matches: false,
     media: query,
     onchange: null,
-    addListener: vi.fn(),
-    removeListener: vi.fn(),
-    addEventListener: vi.fn(),
-    removeEventListener: vi.fn(),
-    dispatchEvent: vi.fn(),
-  })),
+    addListener: () => {},
+    removeListener: () => {},
+    addEventListener: () => {},
+    removeEventListener: () => {},
+    dispatchEvent: () => true,
+  }),
 });
 
 // Mock ResizeObserver

frontend/src/components/Layout.tsx

@@ -1,6 +1,6 @@
 import { useState, useEffect, useCallback, useRef, useMemo } from 'react';
 import { NavLink, Outlet, useNavigate, useLocation } from 'react-router-dom';
-import { Printer, Archive, ListOrdered, BarChart3, Cloud, Settings, Sun, Moon, ChevronLeft, ChevronRight, Keyboard, Github, GripVertical, ArrowUpCircle, Wrench, FolderKanban, FolderOpen, X, Menu, Info, Plug, Bug, LogOut, Key, Loader2, Disc3, ShieldAlert, Bell, Globe, type LucideIcon } from 'lucide-react';
+import { Printer, Archive, ListOrdered, BarChart3, Cloud, Settings, Sun, Moon, Monitor, ChevronLeft, ChevronRight, Keyboard, Github, GripVertical, ArrowUpCircle, Wrench, FolderKanban, FolderOpen, X, Menu, Info, Plug, Bug, LogOut, Key, Loader2, Disc3, ShieldAlert, Bell, Globe, type LucideIcon } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
 import { useTheme } from '../contexts/ThemeContext';
 import { KeyboardShortcutsModal } from './KeyboardShortcutsModal';
@@ -78,9 +78,14 @@ export function setDefaultView(path: string) {
 export function Layout() {
   const navigate = useNavigate();
   const location = useLocation();
-  const { mode, toggleMode } = useTheme();
+  const { mode, resolvedMode, toggleMode } = useTheme();
   const { t } = useTranslation();
   const isSidebarCompact = useIsSidebarCompact();
+
+  // Theme toggle: mode → icon and tooltip
+  const ThemeIcon = { dark: Sun, light: Monitor, system: Moon }[mode];
+  const themeSwitchTitle = t({ dark: 'nav.switchToLight', light: 'nav.switchToSystem', system: 'nav.switchToDark' }[mode]);
+
   // Re-render Layout (and the page rendered inside <Outlet />) whenever the
   // backend color catalog is (re)populated, so pages that mounted before the
   // catalog fetched — and cached HSL-fallback color names during their first
@@ -499,7 +504,7 @@ export function Layout() {
             <Menu className="w-6 h-6 text-white" />
           </button>
           <img
-            src={mode === 'dark' ? '/img/bambuddy_logo_dark_transparent.png' : '/img/bambuddy_logo_light.png'}
+            src={resolvedMode === 'dark' ? '/img/bambuddy_logo_dark_transparent.png' : '/img/bambuddy_logo_light.png'}
             alt="Bambuddy"
             className="h-8 ml-3"
           />
@@ -525,7 +530,7 @@ export function Layout() {
         {/* Logo */}
         <div className={`border-b border-bambu-dark-tertiary flex items-center justify-center ${isSidebarCompact || sidebarExpanded ? 'p-4' : 'p-2'}`}>
           <img
-            src={mode === 'dark' ? '/img/bambuddy_logo_dark_transparent.png' : '/img/bambuddy_logo_light.png'}
+            src={resolvedMode === 'dark' ? '/img/bambuddy_logo_dark_transparent.png' : '/img/bambuddy_logo_light.png'}
             alt="Bambuddy"
             className={isSidebarCompact || sidebarExpanded ? 'h-16 w-auto' : 'h-8 w-8 object-cover object-left'}
           />
@@ -753,9 +758,9 @@ export function Layout() {
                 <button
                   onClick={toggleMode}
                   className="p-2 rounded-lg hover:bg-bambu-dark-tertiary transition-colors text-bambu-gray-light hover:text-white"
-                  title={mode === 'dark' ? t('nav.switchToLight') : t('nav.switchToDark')}
+                  title={themeSwitchTitle}
                 >
-                  {mode === 'dark' ? <Sun className="w-5 h-5" /> : <Moon className="w-5 h-5" />}
+                  <ThemeIcon className="w-5 h-5" />
                 </button>
                 {authEnabled && user && (
                   <>
@@ -858,9 +863,9 @@ export function Layout() {
               <button
                 onClick={toggleMode}
                 className="p-2 rounded-lg hover:bg-bambu-dark-tertiary transition-colors text-bambu-gray-light hover:text-white"
-                title={mode === 'dark' ? t('nav.switchToLight') : t('nav.switchToDark')}
+                title={themeSwitchTitle}
               >
-                {mode === 'dark' ? <Sun className="w-5 h-5" /> : <Moon className="w-5 h-5" />}
+                <ThemeIcon className="w-5 h-5" />
               </button>
               {authEnabled && user && (
                 <>

frontend/src/contexts/ThemeContext.tsx

@@ -1,7 +1,7 @@
 import { createContext, useContext, useEffect, useState, type ReactNode } from 'react';
 import { api } from '../api/client';
 
-type ThemeMode = 'light' | 'dark';
+type ThemeMode = 'light' | 'dark' | 'system';
 type ThemeStyle = 'classic' | 'glow' | 'vibrant';
 type DarkBackground = 'neutral' | 'warm' | 'cool' | 'oled' | 'slate' | 'forest';
 type LightBackground = 'neutral' | 'warm' | 'cool';
@@ -9,6 +9,7 @@ type ThemeAccent = 'green' | 'teal' | 'blue' | 'orange' | 'purple' | 'red';
 
 interface ThemeContextType {
   mode: ThemeMode;
+  resolvedMode: 'light' | 'dark';
   // Dark mode settings
   darkStyle: ThemeStyle;
   darkBackground: DarkBackground;
@@ -38,6 +39,23 @@ export function ThemeProvider({ children }: { children: ReactNode }) {
     return stored || legacy || 'dark';
   });
 
+  // System preference detection
+  const [systemPreference, setSystemPreference] = useState<'light' | 'dark'>(() => {
+    return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+  });
+
+  useEffect(() => {
+    const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+    const handler = (e: MediaQueryListEvent) => {
+      setSystemPreference(e.matches ? 'dark' : 'light');
+    };
+    mediaQuery.addEventListener('change', handler);
+    return () => mediaQuery.removeEventListener('change', handler);
+  }, []);
+
+  // Resolved mode: what's actually applied (always 'light' or 'dark')
+  const resolvedMode: 'light' | 'dark' = mode === 'system' ? systemPreference : mode;
+
   // Dark mode settings
   const [darkStyle, setDarkStyleState] = useState<ThemeStyle>(() => {
     return (localStorage.getItem('dark-style') as ThemeStyle) || 'vibrant';
@@ -104,8 +122,8 @@ export function ThemeProvider({ children }: { children: ReactNode }) {
       'accent-green', 'accent-teal', 'accent-blue', 'accent-orange', 'accent-purple', 'accent-red'
     );
 
-    // Apply based on current mode
-    if (mode === 'dark') {
+    // Apply based on resolved mode
+    if (resolvedMode === 'dark') {
       root.classList.add('dark');
       root.classList.add(`style-${darkStyle}`);
       root.classList.add(`bg-${darkBackground}`);
@@ -118,9 +136,13 @@ export function ThemeProvider({ children }: { children: ReactNode }) {
 
     localStorage.setItem('theme-mode', mode);
     localStorage.removeItem('theme');
-  }, [mode, darkStyle, darkBackground, darkAccent, lightStyle, lightBackground, lightAccent]);
+  }, [mode, resolvedMode, darkStyle, darkBackground, darkAccent, lightStyle, lightBackground, lightAccent]);
 
-  const toggleMode = () => setModeState(prev => prev === 'dark' ? 'light' : 'dark');
+  const toggleMode = () => setModeState(prev => {
+    if (prev === 'dark') return 'light';
+    if (prev === 'light') return 'system';
+    return 'dark';
+  });
   const setMode = (m: ThemeMode) => setModeState(m);
 
   // Dark setters
@@ -160,6 +182,7 @@ export function ThemeProvider({ children }: { children: ReactNode }) {
   return (
     <ThemeContext.Provider value={{
       mode,
+      resolvedMode,
       darkStyle, darkBackground, darkAccent,
       lightStyle, lightBackground, lightAccent,
       toggleMode, setMode,

frontend/src/i18n/locales/de.ts

@@ -24,6 +24,7 @@ export default {
     keyboardShortcuts: 'Tastaturkürzel (?)',
     switchToLight: 'Zum hellen Modus wechseln',
     switchToDark: 'Zum dunklen Modus wechseln',
+    switchToSystem: 'Zum Systemmodus wechseln',
     smartSwitches: 'Smart Switches',
     logout: 'Abmelden',
     installApp: 'App installieren',
@@ -2141,7 +2142,7 @@ export default {
     styleClassic: 'Klassisch',
     styleGlow: 'Leuchtend',
     styleVibrant: 'Lebendig',
-    themeToggleHint: 'Zwischen Hell- und Dunkelmodus mit dem Sonnen-/Mondsymbol in der Seitenleiste wechseln.',
+    themeToggleHint: 'Zwischen Dunkel-, Hell- und Systemmodus mit dem Symbol in der Seitenleiste wechseln.',
     // Archive
     autoArchivePrints: 'Drucke automatisch archivieren',
     autoArchiveDescription: '3MF-Dateien automatisch speichern, wenn Drucke abgeschlossen sind',

frontend/src/i18n/locales/en.ts

@@ -24,6 +24,7 @@ export default {
     keyboardShortcuts: 'Keyboard shortcuts (?)',
     switchToLight: 'Switch to light mode',
     switchToDark: 'Switch to dark mode',
+    switchToSystem: 'Switch to system mode',
     smartSwitches: 'Smart Switches',
     logout: 'Logout',
     installApp: 'Install app',
@@ -2144,7 +2145,7 @@ export default {
     styleClassic: 'Classic',
     styleGlow: 'Glow',
     styleVibrant: 'Vibrant',
-    themeToggleHint: 'Toggle between dark and light mode using the sun/moon icon in the sidebar.',
+    themeToggleHint: 'Toggle between dark, light, and system mode using the icon in the sidebar.',
     // Archive
     autoArchivePrints: 'Auto-archive prints',
     autoArchiveDescription: 'Automatically save 3MF files when prints complete',

frontend/src/i18n/locales/es.ts

@@ -24,6 +24,7 @@ export default {
     keyboardShortcuts: 'Atajos de teclado (?)',
     switchToLight: 'Cambiar a modo claro',
     switchToDark: 'Cambiar a modo oscuro',
+    switchToSystem: 'Cambiar a modo del sistema',
     smartSwitches: 'Interruptores inteligentes',
     logout: 'Cerrar sesión',
     installApp: 'Instalar app',
@@ -2144,7 +2145,7 @@ export default {
     styleClassic: 'Clásico',
     styleGlow: 'Resplandor',
     styleVibrant: 'Vibrante',
-    themeToggleHint: 'Alterne entre el modo oscuro y claro con el icono del sol/luna en la barra lateral.',
+    themeToggleHint: 'Alterne entre modo oscuro, claro y sistema con el icono en la barra lateral.',
     // Archive
     autoArchivePrints: 'Archivar impresiones automáticamente',
     autoArchiveDescription: 'Guardar automáticamente los archivos 3MF cuando se completan las impresiones',

frontend/src/i18n/locales/fr.ts

@@ -24,6 +24,7 @@ export default {
     keyboardShortcuts: 'Raccourcis clavier (?)',
     switchToLight: 'Passer au mode clair',
     switchToDark: 'Passer au mode sombre',
+    switchToSystem: 'Passer au mode système',
     smartSwitches: 'Interrupteurs intelligents',
     logout: 'Déconnexion',
     installApp: "Installer l'application",
@@ -2096,7 +2097,7 @@ export default {
     styleClassic: 'Classique',
     styleGlow: 'Lumineux',
     styleVibrant: 'Vif',
-    themeToggleHint: 'Basculer entre le mode sombre et clair avec l\'icône soleil/lune dans la barre latérale.',
+    themeToggleHint: 'Basculer entre le mode sombre, clair et système avec l\'icône dans la barre latérale.',
     autoArchivePrints: 'Archiver automatiquement les impressions',
     autoArchiveDescription: 'Sauvegarder automatiquement les fichiers 3MF à la fin des impressions',
     saveThumbnailsDescription: 'Extraire et sauvegarder les images d\'aperçu des fichiers 3MF',

frontend/src/i18n/locales/it.ts

@@ -24,6 +24,7 @@ export default {
     keyboardShortcuts: 'Scorciatoie da tastiera (?)',
     switchToLight: 'Passa a tema chiaro',
     switchToDark: 'Passa a tema scuro',
+    switchToSystem: 'Passa a tema di sistema',
     smartSwitches: 'Interruttori Smart',
     logout: 'Esci',
     installApp: 'Installa app',
@@ -2095,7 +2096,7 @@ export default {
     styleClassic: 'Classico',
     styleGlow: 'Luminoso',
     styleVibrant: 'Vibrante',
-    themeToggleHint: 'Passa tra modalità scura e chiara con l\'icona sole/luna nella barra laterale.',
+    themeToggleHint: 'Passa tra modalità scura, chiara e sistema con l\'icona nella barra laterale.',
     autoArchivePrints: 'Archiviazione automatica stampe',
     autoArchiveDescription: 'Salva automaticamente i file 3MF al completamento delle stampe',
     saveThumbnailsDescription: 'Estrai e salva le immagini di anteprima dai file 3MF',

frontend/src/i18n/locales/ja.ts

@@ -24,6 +24,7 @@ export default {
     keyboardShortcuts: 'キーボードショートカット (?)',
     switchToLight: 'ライトモードに切替',
     switchToDark: 'ダークモードに切替',
+    switchToSystem: 'システムモードに切替',
     smartSwitches: 'スマートスイッチ',
     logout: 'ログアウト',
     installApp: 'アプリをインストール',
@@ -2140,7 +2141,7 @@ export default {
     styleClassic: 'クラシック',
     styleGlow: 'グロー',
     styleVibrant: 'ビビッド',
-    themeToggleHint: 'サイドバーの太陽/月アイコンでダークモードとライトモードを切り替えます。',
+    themeToggleHint: 'サイドバーのアイコンでダーク、ライト、システムモードを切り替えます。',
     // Archive
     autoArchivePrints: '印刷を自動アーカイブ',
     autoArchiveDescription: '印刷完了時に3MFファイルを自動保存',

frontend/src/i18n/locales/pt-BR.ts

@@ -24,6 +24,7 @@ export default {
     keyboardShortcuts: 'Atalhos de teclado (?)',
     switchToLight: 'Mudar para modo claro',
     switchToDark: 'Mudar para modo escuro',
+    switchToSystem: 'Mudar para modo do sistema',
     smartSwitches: 'Interruptores inteligentes',
     logout: 'Sair',
     installApp: 'Instalar app',
@@ -2095,7 +2096,7 @@ export default {
     styleClassic: 'Clássico',
     styleGlow: 'Brilhante',
     styleVibrant: 'Vibrante',
-    themeToggleHint: 'Alternar entre modo escuro e claro usando o ícone de sol/lua na barra lateral.',
+    themeToggleHint: 'Alternar entre modo escuro, claro e sistema usando o ícone na barra lateral.',
     autoArchivePrints: 'Arquivar impressões automaticamente',
     autoArchiveDescription: 'Salvar automaticamente arquivos 3MF quando impressões forem concluídas',
     saveThumbnailsDescription: 'Extrair e salvar imagens de pré-visualização dos arquivos 3MF',

frontend/src/i18n/locales/zh-CN.ts

@@ -24,6 +24,7 @@ export default {
     keyboardShortcuts: '键盘快捷键 (?)',
     switchToLight: '切换到浅色模式',
     switchToDark: '切换到深色模式',
+    switchToSystem: '切换到系统模式',
     smartSwitches: '智能开关',
     logout: '退出登录',
     installApp: '安装应用',
@@ -2140,7 +2141,7 @@ export default {
     styleClassic: '经典',
     styleGlow: '发光',
     styleVibrant: '鲜艳',
-    themeToggleHint: '使用侧边栏中的太阳/月亮图标在深色和浅色模式之间切换。',
+    themeToggleHint: '使用侧边栏中的图标在深色、浅色和系统模式之间切换。',
     autoArchivePrints: '自动归档打印',
     autoArchiveDescription: '打印完成时自动保存3MF文件',
     saveThumbnailsDescription: '从3MF文件中提取并保存预览图像',

frontend/src/i18n/locales/zh-TW.ts

@@ -24,6 +24,7 @@ export default {
     keyboardShortcuts: '鍵盤快捷鍵 (?)',
     switchToLight: '切換到淺色模式',
     switchToDark: '切換到深色模式',
+    switchToSystem: '切換到系統模式',
     smartSwitches: '智慧開關',
     logout: '登出',
     installApp: '安裝應用程式',
@@ -2140,7 +2141,7 @@ export default {
     styleClassic: '經典',
     styleGlow: '發光',
     styleVibrant: '鮮豔',
-    themeToggleHint: '使用側邊欄中的太陽/月亮圖示在深色和淺色模式之間切換。',
+    themeToggleHint: '使用側邊欄中的圖示在深色、淺色和系統模式之間切換。',
     autoArchivePrints: '自動歸檔列印',
     autoArchiveDescription: '列印完成時自動儲存3MF檔案',
     saveThumbnailsDescription: '從3MF檔案中提取並儲存預覽影像',

frontend/src/pages/SettingsPage.tsx

@@ -158,9 +158,10 @@ export function SettingsPage() {
   const { showToast } = useToast();
   const { authEnabled, user, isAdmin, refreshAuth, hasPermission } = useAuth();
   const {
-    mode,
+    mode, resolvedMode,
     darkStyle, darkBackground, darkAccent,
     lightStyle, lightBackground, lightAccent,
+    setMode,
     setDarkStyle, setDarkBackground, setDarkAccent,
     setLightStyle, setLightBackground, setLightAccent,
   } = useTheme();
@@ -1638,11 +1639,31 @@ export function SettingsPage() {
               </h2>
             </CardHeader>
             <CardContent className="space-y-3">
+              {/* Theme Mode Selector */}
+              <div className="flex items-center gap-2 mb-2">
+                <label className="text-sm text-bambu-gray">{t('settings.theme')}:</label>
+                <div className="flex gap-1">
+                  {([
+                    { id: 'dark', label: t('settings.themeDark') },
+                    { id: 'light', label: t('settings.themeLight') },
+                    { id: 'system', label: t('settings.themeSystem') },
+                  ] as const).map(({ id, label }) => (
+                    <button
+                      key={id}
+                      onClick={() => { setMode(id); showToast(t('settings.toast.settingsSaved'), 'success'); }}
+                      className={`px-3 py-1 text-xs rounded-lg border transition-colors ${mode === id ? 'border-bambu-green bg-bambu-green/10 text-bambu-green' : 'border-gray-300 dark:border-bambu-dark-tertiary text-gray-500 dark:text-bambu-gray hover:text-gray-900 dark:hover:text-white cursor-pointer'}`}
+                    >
+                      {label}
+                    </button>
+                  ))}
+                </div>
+              </div>
+
               {/* Dark Mode Settings */}
-              <div className={`space-y-3 p-4 rounded-lg border ${mode === 'dark' ? 'border-bambu-green bg-bambu-green/5' : 'border-bambu-dark-tertiary'}`}>
+              <div className={`space-y-3 p-4 rounded-lg border ${resolvedMode === 'dark' ? 'border-bambu-green bg-bambu-green/5' : 'border-bambu-dark-tertiary'}`}>
                 <h3 className="text-sm font-medium text-white flex items-center gap-2">
                   {t('settings.darkMode')}
-                  {mode === 'dark' && <span className="text-xs text-bambu-green">{t('settings.active')}</span>}
+                  {resolvedMode === 'dark' && <span className="text-xs text-bambu-green">{t('settings.active')}</span>}
                 </h3>
                 <div className="grid grid-cols-3 gap-3">
                   <div>
@@ -1691,10 +1712,10 @@ export function SettingsPage() {
               </div>
 
               {/* Light Mode Settings */}
-              <div className={`space-y-3 p-4 rounded-lg border ${mode === 'light' ? 'border-bambu-green bg-bambu-green/5' : 'border-bambu-dark-tertiary'}`}>
+              <div className={`space-y-3 p-4 rounded-lg border ${resolvedMode === 'light' ? 'border-bambu-green bg-bambu-green/5' : 'border-bambu-dark-tertiary'}`}>
                 <h3 className="text-sm font-medium text-white flex items-center gap-2">
                   {t('settings.lightMode')}
-                  {mode === 'light' && <span className="text-xs text-bambu-green">{t('settings.active')}</span>}
+                  {resolvedMode === 'light' && <span className="text-xs text-bambu-green">{t('settings.active')}</span>}
                 </h3>
                 <div className="grid grid-cols-3 gap-3">
                   <div>

frontend/src/pages/StatsPage.tsx

@@ -253,7 +253,7 @@ function SuccessRateWidget({
             <span className="text-sm text-white font-medium">{stats?.failed_prints || 0}</span>
           </div>
           <div className="flex items-center gap-2">
-            <Ban className="w-4 h-4 text-bambu-gray flex-shrink-0" />
+            <Ban className="w-4 h-4 text-status-warning flex-shrink-0" />
             <span className="text-sm text-bambu-gray">{t('stats.cancelled')}</span>
             <span className="text-sm text-white font-medium">{stats?.cancelled_prints || 0}</span>
           </div>

static/index.html

@@ -26,7 +26,7 @@
 
     <!-- Splash screens for iOS -->
     <link rel="apple-touch-startup-image" href="/img/android-chrome-512x512.png" />
-    <script type="module" crossorigin src="/assets/index-BW850Rth.js"></script>
+    <script type="module" crossorigin src="/assets/index-B9TjqVXt.js"></script>
     <link rel="stylesheet" crossorigin href="/assets/index-y4woBlMv.css">
   </head>
   <body>