From 50e4725c8795c8cb597e4b50bf965f9ec76a6012 Mon Sep 17 00:00:00 2001
From: Stevie Robinson <stevie.robinson@gmail.com>
Date: Sun, 28 Sep 2025 00:48:06 +0200
Subject: [PATCH] New: Switch theme automatically on system change

(cherry picked from commit 4904e85887b8455483e509b83abaa2c6517d45a0)
---
 frontend/src/Helpers/Hooks/useTheme.ts | 56 ++++++++++++++++++++++++++
 1 file changed, 56 insertions(+)
 create mode 100644 frontend/src/Helpers/Hooks/useTheme.ts

diff --git a/frontend/src/Helpers/Hooks/useTheme.ts b/frontend/src/Helpers/Hooks/useTheme.ts
new file mode 100644
index 000000000..e39930886
--- /dev/null
+++ b/frontend/src/Helpers/Hooks/useTheme.ts
@@ -0,0 +1,56 @@
+import { useEffect, useState } from 'react';
+import { useSelector } from 'react-redux';
+import { createSelector } from 'reselect';
+import AppState from 'App/State/AppState';
+import themes from 'Styles/Themes';
+
+function createThemeSelector() {
+  return createSelector(
+    (state: AppState) => state.settings.ui.item.theme || window.Lidarr.theme,
+    (theme) => theme
+  );
+}
+
+const useTheme = () => {
+  const selectedTheme = useSelector(createThemeSelector());
+  const [resolvedTheme, setResolvedTheme] = useState(selectedTheme);
+
+  useEffect(() => {
+    if (selectedTheme !== 'auto') {
+      setResolvedTheme(selectedTheme);
+      return;
+    }
+
+    const applySystemTheme = () => {
+      setResolvedTheme(
+        window.matchMedia('(prefers-color-scheme: dark)').matches
+          ? 'dark'
+          : 'light'
+      );
+    };
+
+    applySystemTheme();
+
+    window
+      .matchMedia('(prefers-color-scheme: dark)')
+      .addEventListener('change', applySystemTheme);
+
+    return () => {
+      window
+        .matchMedia('(prefers-color-scheme: dark)')
+        .removeEventListener('change', applySystemTheme);
+    };
+  }, [selectedTheme]);
+
+  return resolvedTheme;
+};
+
+export default useTheme;
+
+export const useThemeColor = (color: string) => {
+  const theme = useTheme();
+  const themeVariables = themes[theme];
+
+  // @ts-expect-error - themeVariables is a string indexable type
+  return themeVariables[color];
+};