Adjust theme preview message to include theme & mode

gameyfin/src/main/frontend/components/theming/ThemeSelector.tsx

@@ -5,6 +5,7 @@ import {themes} from "Frontend/theming/themes";
 import {Theme} from "Frontend/theming/theme";
 import ThemePreview from "Frontend/components/theming/ThemePreview";
 import {UserPreferencesEndpoint} from "Frontend/generated/endpoints";
+import {toTitleCase} from "Frontend/util/utils";
 
 export function ThemeSelector() {
 
@@ -56,7 +57,9 @@ export function ThemeSelector() {
                     )))
                 }
             </div>
-            <p className="text-2xl font-semibold mt-8">Preview</p>
+            <p className="text-2xl font-semibold mt-8">Preview for theme
+                "{toTitleCase(theme!.replaceAll("-", " "))}"
+            </p>
             <Divider/>
             <div className="flex flex-row gap-8 items-baseline">
                 <div className="flex flex-row gap-4">

gameyfin/src/main/frontend/util/utils.ts

@@ -24,6 +24,12 @@ export function roleToRoleName(role: string) {
     return role.charAt(0).toUpperCase() + role.slice(1);
 }
 
+export function toTitleCase(str: string) {
+    return str.toLowerCase().split(' ').map((word: string) => {
+        return (word.charAt(0).toUpperCase() + word.slice(1));
+    }).join(' ');
+}
+
 export function roleToColor(role: string) {
     switch (role) {
         case "ROLE_SUPERADMIN":