Add config option to set default theme

ui/src/config.js

@@ -16,6 +16,7 @@ const defaultConfig = {
   devActivityPanel: true,
   devFastAccessCoverArt: false,
   enableStarRating: true,
+  defaultTheme: 'Dark',
 }
 
 let config

ui/src/reducers/themeReducer.js

@@ -1,7 +1,17 @@
 import { CHANGE_THEME } from '../actions'
+import config from '../config'
+import themes from '../themes'
+
+const defaultTheme = () => {
+  return (
+    Object.keys(themes).find(
+      (t) => themes[t].themeName === config.defaultTheme
+    ) || 'DarkTheme'
+  )
+}
 
 export const themeReducer = (
-  previousState = 'DarkTheme',
+  previousState = defaultTheme(),
   { type, payload }
 ) => {
   if (type === CHANGE_THEME) {

ui/src/themes/useCurrentTheme.js

@@ -2,6 +2,7 @@ import { useSelector } from 'react-redux'
 import useMediaQuery from '@material-ui/core/useMediaQuery'
 import themes from './index'
 import { AUTO_THEME_ID } from '../consts'
+import config from '../config'
 
 export default () => {
   const prefersLightMode = useMediaQuery('(prefers-color-scheme: light)')
@@ -9,6 +10,12 @@ export default () => {
     if (state.theme === AUTO_THEME_ID) {
       return prefersLightMode ? themes.LightTheme : themes.DarkTheme
     }
-    return themes[state.theme] || themes.DarkTheme
+    const themeName =
+      state.theme ||
+      Object.keys(themes).find(
+        (t) => themes[t].themeName === config.defaultTheme
+      ) ||
+      'DarkTheme'
+    return themes[themeName]
   })
 }