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
-			location.reload()
+			// Apply theme instantly
+			applyTheme((input as HTMLInputElement).value)
 		} else {
 			return arn.reloadContent()
 		}

scripts/Actions/Theme.ts

@@ -105,16 +105,25 @@ 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)
 
+	// 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")) {
+		return
+	}
+
 	// Show preview message
-	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)
 
 	// After 30 seconds, switch back to default theme if the user doesn't own a PRO account
@@ -125,7 +134,6 @@ export function nextTheme(arn: AnimeNotifier) {
 		}
 	}, 30000)
 }
-}
 
 // Apply theme
 export function applyTheme(themeName: string) {