Improved theme update

scripts/Actions/Serialization.ts

@@ -1,4 +1,5 @@
 import AnimeNotifier from "../AnimeNotifier"
+import { applyTheme } from "./Theme"
 
 // Save new data from an input field
 export async function save(arn: AnimeNotifier, input: HTMLElement) {
@@ -38,8 +39,8 @@ export async function save(arn: AnimeNotifier, input: HTMLElement) {
 			// Update nickname based links on the page
 			return arn.reloadPage()
 		} else if(apiEndpoint.startsWith("/api/settings/") && input.dataset.field === "Theme") {
-			// Reload for the theme to take effect
+			// Apply theme instantly
-			location.reload()
+			applyTheme((input as HTMLInputElement).value)
 		} else {
 			return arn.reloadContent()
 		}

scripts/Actions/Theme.ts

@@ -105,26 +105,34 @@ export function nextTheme(arn: AnimeNotifier) {
 	for(let i = 0; i < themesSorted.length; i++) {
 		if(themesSorted[i] === currentThemeName) {
 			let newIndex = (i + 1) % themesSorted.length
-			applyTheme(themesSorted[newIndex])
+			applyThemeAndPreview(arn, themesSorted[newIndex])
 			break
 		}
 	}
+}
+
+// Apply theme and check for PRO accounts
+export function applyThemeAndPreview(arn: AnimeNotifier, themeName: string) {
+	applyTheme(themeName)
 
 	// Clear preview timeout
 	clearTimeout(previewTimeoutID)
 
-	// Show preview message
+	// If it's the free light theme or a PRO user, nothing to do here
-	if(currentThemeName !== "light" && (!arn.user || arn.user.dataset.pro !== "true")) {
+	if(currentThemeName === "light" || (arn.user && arn.user.dataset.pro == "true")) {
-		arn.statusMessage.showInfo(`Previewing "${currentThemeName}" theme for 30 seconds. If you would like to use it permanently, please support us.`, 5000)
+		return
-
-		// After 30 seconds, switch back to default theme if the user doesn't own a PRO account
-		previewTimeoutID = setTimeout(() => {
-			if(currentThemeName !== "light") {
-				applyTheme("light")
-				arn.statusMessage.showInfo("Theme preview time has ended. If you would like to use it permanently, please support us.", 5000)
-			}
-		}, 30000)
 	}
+
+	// Show preview message
+	arn.statusMessage.showInfo(`Previewing "${currentThemeName}" theme for 30 seconds. If you would like to use it permanently, please support us.`, 5000)
+
+	// After 30 seconds, switch back to default theme if the user doesn't own a PRO account
+	previewTimeoutID = setTimeout(() => {
+		if(currentThemeName !== "light") {
+			applyTheme("light")
+			arn.statusMessage.showInfo("Theme preview time has ended. If you would like to use it permanently, please support us.", 5000)
+		}
+	}, 30000)
 }
 
 // Apply theme