Theme specific metadata source images

frontend/src/Helpers/Hooks/useTheme.ts

@@ -2,10 +2,18 @@ import { useEffect, useState } from 'react';
 import { useUiSettingsValues } from 'Settings/UI/useUiSettings';
 import themes from 'Styles/Themes';
 
-const useTheme = () => {
+const useTheme = (): 'dark' | 'light' => {
   const { theme } = useUiSettingsValues();
   const selectedTheme = theme ?? window.Sonarr.theme;
-  const [resolvedTheme, setResolvedTheme] = useState(selectedTheme);
+  const [resolvedTheme, setResolvedTheme] = useState(() => {
+    if (selectedTheme === 'auto') {
+      return window.matchMedia('(prefers-color-scheme: dark)').matches
+        ? 'dark'
+        : 'light';
+    }
+
+    return selectedTheme;
+  });
 
   useEffect(() => {
     if (selectedTheme !== 'auto') {

frontend/src/Settings/MetadataSource/TheTvdb.tsx

@@ -1,14 +1,17 @@
 import React from 'react';
 import InlineMarkdown from 'Components/Markdown/InlineMarkdown';
+import useTheme from 'Helpers/Hooks/useTheme';
 import translate from 'Utilities/String/translate';
 import styles from './TheTvdb.css';
 
 function TheTvdb() {
+  const theme = useTheme();
+
   return (
     <div className={styles.container}>
       <img
         className={styles.image}
-        src={`${window.Sonarr.urlBase}/Content/Images/thetvdb.png`}
+        src={`${window.Sonarr.urlBase}/Content/Images/thetvdb-${theme}.png`}
       />
 
       <div className={styles.info}>