Preference settings

assets/core/ts/index.ts

@@ -31,6 +31,7 @@ import { modalServiceMeta } from '@Core/ts/services/Modal';
 import { queryServiceMeta } from '@Core/ts/services/Query';
 import { toastServiceMeta } from '@Core/ts/services/Toast';
 import { wpMediaServiceMeta } from '@Core/ts/services/WPMedia';
+import { preferenceServiceMeta } from '@Core/ts/services/Preference';
 
 import { registerLegacyFunctions } from '@Core/ts/legacy';
 import { getNonceData } from '@Core/ts/utils/nonce';
@@ -64,7 +65,14 @@ const initializePlugin = () => {
       passwordInputMeta,
       copyToClipboardMeta,
     ],
-    services: [formServiceMeta, modalServiceMeta, queryServiceMeta, toastServiceMeta, wpMediaServiceMeta],
+    services: [
+      formServiceMeta,
+      modalServiceMeta,
+      queryServiceMeta,
+      toastServiceMeta,
+      wpMediaServiceMeta,
+      preferenceServiceMeta,
+    ],
   });
 
   TutorComponentRegistry.initWithAlpine(Alpine);
@@ -75,6 +83,7 @@ const initializePlugin = () => {
   // Expose TutorCore with services and utilities
   // Use Object.assign to extend existing TutorCore instead of overwriting
   window.TutorCore = Object.assign(window.TutorCore || {}, {
+    preference: preferenceServiceMeta.instance,
     toast: toastServiceMeta.instance,
     security: {
       escapeHtml,
@@ -90,12 +99,22 @@ const initializePlugin = () => {
   registerLegacyFunctions();
 
   Alpine.start();
+  ApplyTheme();
 };
 
 if (document.readyState === 'loading') {
-  document.addEventListener('DOMContentLoaded', initializePlugin);
+  document.addEventListener('DOMContentLoaded', () => {
+    initializePlugin();
+  });
 } else {
   initializePlugin();
 }
 
 export { Alpine, TutorComponentRegistry };
+
+function ApplyTheme() {
+  const wrapper = document.querySelector('[data-theme]') || document.body;
+  const attrTheme = wrapper.getAttribute('data-theme');
+  const initialTheme = attrTheme || preferenceServiceMeta.instance.defaultTheme;
+  preferenceServiceMeta.instance.applyTheme(initialTheme);
+}

assets/core/ts/services/Preference.ts

@@ -0,0 +1,65 @@
+import { type ServiceMeta } from '@Core/ts/types';
+
+export class PreferenceService {
+  defaultTheme: string = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+  private mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+  private systemThemeListener?: (e: MediaQueryListEvent) => void;
+
+  applyTheme(theme: string): void {
+    const wrapper = document.querySelector('[data-theme]') || document.body;
+
+    if (!theme) return;
+
+    if (this.systemThemeListener) {
+      this.mediaQuery.removeEventListener('change', this.systemThemeListener);
+      this.systemThemeListener = undefined;
+    }
+
+    const updateTheme = () => {
+      if (theme === 'system') {
+        wrapper.setAttribute('data-theme', this.mediaQuery.matches ? 'dark' : 'light');
+      } else {
+        wrapper.setAttribute('data-theme', theme);
+      }
+    };
+
+    updateTheme();
+
+    if (theme === 'system') {
+      this.systemThemeListener = () => updateTheme();
+      this.mediaQuery.addEventListener('change', this.systemThemeListener);
+    }
+
+    this.defaultTheme = theme;
+  }
+  applyFontScale(fontScale: string): void {
+    const head = document.head || document.getElementsByTagName('head')[0];
+    const styleId = 'tutor-font-scale';
+    let styleEl = document.getElementById(styleId) as HTMLStyleElement | null;
+
+    if (!fontScale) {
+      return;
+    }
+
+    const updateFontScale = () => {
+      const scaleNum = typeof fontScale === 'string' ? parseInt(fontScale, 10) : Number(fontScale);
+      if (Number.isNaN(scaleNum) || scaleNum <= 0) {
+        return;
+      }
+      const base = 16;
+      const px = (base * scaleNum) / 100;
+      if (!styleEl) {
+        styleEl = document.createElement('style');
+        styleEl.id = styleId;
+        head.appendChild(styleEl);
+      }
+      styleEl.textContent = `:root { font-size: ${px}px; }`;
+    };
+    updateFontScale();
+  }
+}
+
+export const preferenceServiceMeta: ServiceMeta<PreferenceService> = {
+  name: 'preference',
+  instance: new PreferenceService(),
+};

assets/src/js/frontend/dashboard/pages/settings.ts

@@ -59,6 +59,12 @@ interface ResetPasswordFormProps {
   confirm_new_password: string;
 }
 
+interface PreferencesFormProps {
+  auto_play_next: boolean;
+  theme: string;
+  font_scale: number;
+}
+
 const settings = () => {
   const query = window.TutorCore.query;
   const form = window.TutorCore.form;
@@ -78,6 +84,7 @@ const settings = () => {
     saveWithdrawMethodMutation: null as MutationState<TutorMutationResponse<string>> | null,
     resetPasswordMutation: null as MutationState<TutorMutationResponse<string>> | null,
     handleUpdateNotification: null as MutationState<unknown, unknown> | null,
+    savePreferencesMutation: null as MutationState<TutorMutationResponse<PreferencesFormProps>> | null,
 
     init() {
       if (!this.$el) {
@@ -153,14 +160,29 @@ const settings = () => {
 
       this.resetPasswordMutation = this.query.useMutation(this.resetPassword, {
         onSuccess: (data: TutorMutationResponse<string>) => {
-          this.toast.success(data?.message ?? __('Password updated successfully', 'tutor'));
+          this.toast.success(data?.message ?? __('Password updated successfully asdf', 'tutor'));
+        },
+        onError: (error: Error) => {
+          this.toast.error(convertToErrorMessage(error));
+        },
+      });
+
+      this.savePreferencesMutation = this.query.useMutation(this.updatePreferences, {
+        onSuccess: (data: TutorMutationResponse<PreferencesFormProps>) => {
+          this.toast.success(data?.message ?? __('Preferences saved successfully', 'tutor'));
         },
         onError: (error: Error) => {
           this.toast.error(convertToErrorMessage(error));
         },
       });
     },
 
+    async updatePreferences(payload: Record<string, unknown>) {
+      return wpAjaxInstance.post(endpoints.UPDATE_USER_PREFERENCES, payload) as unknown as Promise<
+        TutorMutationResponse<PreferencesFormProps>
+      >;
+    },
+
     async updateNotification(payload: Record<string, boolean>) {
       const transformedPayload = Object.keys(payload).reduce(
         (formattedPayload, key) => {

assets/src/js/v3/shared/utils/endpoints.ts

@@ -181,7 +181,8 @@ const endpoints = {
   SAVE_BILLING_INFO: 'tutor_save_billing_info',
   SAVE_WITHDRAW_METHOD: 'tutor_save_withdraw_account',
   RESET_PASSWORD: 'tutor_profile_password_reset',
-  UPDATE_PROFILE_NOTIFICATION: 'tutor_save_notification_preference'
+  UPDATE_PROFILE_NOTIFICATION: 'tutor_save_notification_preference',
+  UPDATE_USER_PREFERENCES: 'tutor_save_user_preferences',
 } as const;
 
 export default endpoints;

classes/Tutor.php

@@ -232,6 +232,15 @@ final class Tutor extends Singleton {
 	 */
 	private $user;
 
+	/**
+	 * UserPreference class object
+	 *
+	 * @since 4.0.0
+	 *
+	 * @var object
+	 */
+	private $user_preference;
+
 	/**
 	 * Theme_Compatibility class object
 	 *
@@ -495,6 +504,7 @@ public function __construct() {
 		$this->quiz                  = new Quiz();
 		$this->tools                 = new Tools();
 		$this->user                  = new User();
+		$this->user_preference       = new UserPreference();
 		$this->theme_compatibility   = new Theme_Compatibility();
 		$this->gutenberg             = new Gutenberg();
 		$this->course_settings_tabs  = new Course_Settings_Tabs();