From ee319bef3347c0e51f65fd536482b592786da06d Mon Sep 17 00:00:00 2001
From: melloware <mellowaredev@gmail.com>
Date: Sun, 21 Jul 2024 07:57:04 -0400
Subject: [PATCH] Fix #6476: Improve changeTheme logic and javadoc

---
 components/lib/api/PrimeReact.js        | 20 ++++++++++++--------
 components/lib/api/PrimeReactContext.js | 20 ++++++++++++--------
 components/lib/api/api.d.ts             |  6 +++---
 3 files changed, 27 insertions(+), 19 deletions(-)

diff --git a/components/lib/api/PrimeReact.js b/components/lib/api/PrimeReact.js
index 7e2a9f8eac..ac0d354cec 100644
--- a/components/lib/api/PrimeReact.js
+++ b/components/lib/api/PrimeReact.js
@@ -40,19 +40,23 @@ export default class PrimeReact {
 
     static changeTheme = function (currentTheme, newTheme, linkElementId, callback) {
         const linkElement = document.getElementById(linkElementId);
-        const cloneLinkElement = linkElement.cloneNode(true);
-        const newThemeUrl = linkElement.getAttribute('href').replace(currentTheme, newTheme);
 
-        cloneLinkElement.setAttribute('id', linkElementId + '-clone');
-        cloneLinkElement.setAttribute('href', newThemeUrl);
-        cloneLinkElement.addEventListener('load', () => {
-            linkElement.remove();
-            cloneLinkElement.setAttribute('id', linkElementId);
+        if (!linkElement) {
+            throw Error(`Element with id ${linkElementId} not found.`);
+        }
+
+        const newThemeUrl = linkElement.getAttribute('href').replace(currentTheme, newTheme);
+        const newLinkElement = document.createElement('link');
 
+        newLinkElement.setAttribute('rel', 'stylesheet');
+        newLinkElement.setAttribute('id', linkElementId);
+        newLinkElement.setAttribute('href', newThemeUrl);
+        newLinkElement.addEventListener('load', () => {
             if (callback) {
                 callback();
             }
         });
-        linkElement.parentNode?.insertBefore(cloneLinkElement, linkElement.nextSibling);
+
+        linkElement.parentNode?.replaceChild(newLinkElement, linkElement);
     };
 }
diff --git a/components/lib/api/PrimeReactContext.js b/components/lib/api/PrimeReactContext.js
index 27667f77e4..d6f13ca7cc 100644
--- a/components/lib/api/PrimeReactContext.js
+++ b/components/lib/api/PrimeReactContext.js
@@ -44,20 +44,24 @@ export const PrimeReactProvider = (props) => {
 
     const changeTheme = (currentTheme, newTheme, linkElementId, callback) => {
         const linkElement = document.getElementById(linkElementId);
-        const cloneLinkElement = linkElement.cloneNode(true);
-        const newThemeUrl = linkElement.getAttribute('href').replace(currentTheme, newTheme);
 
-        cloneLinkElement.setAttribute('id', linkElementId + '-clone');
-        cloneLinkElement.setAttribute('href', newThemeUrl);
-        cloneLinkElement.addEventListener('load', () => {
-            linkElement.remove();
-            cloneLinkElement.setAttribute('id', linkElementId);
+        if (!linkElement) {
+            throw Error(`Element with id ${linkElementId} not found.`);
+        }
 
+        const newThemeUrl = linkElement.getAttribute('href').replace(currentTheme, newTheme);
+        const newLinkElement = document.createElement('link');
+
+        newLinkElement.setAttribute('rel', 'stylesheet');
+        newLinkElement.setAttribute('id', linkElementId);
+        newLinkElement.setAttribute('href', newThemeUrl);
+        newLinkElement.addEventListener('load', () => {
             if (callback) {
                 callback();
             }
         });
-        linkElement.parentNode?.insertBefore(cloneLinkElement, linkElement.nextSibling);
+
+        linkElement.parentNode?.replaceChild(newLinkElement, linkElement);
     };
 
     /**
diff --git a/components/lib/api/api.d.ts b/components/lib/api/api.d.ts
index 986ec24a96..3929d14b57 100644
--- a/components/lib/api/api.d.ts
+++ b/components/lib/api/api.d.ts
@@ -227,10 +227,10 @@ export interface APIOptions {
     unstyled?: boolean;
     /**
      * This method is used to change the theme dynamically.
-     * @param {string} theme - The name of the theme to be applied.
-     * @param {string} newTheme - The name of the new theme to be applied.
+     * @param {string} currentTheme - The name of the current theme. Example 'lara-light-blue'
+     * @param {string} newTheme - The name of the new theme to be applied. Example 'md-dark-deeppurple'
      * @param {string} linkElementId - The id of the link element to be updated.
-     * @param callback - Callback to invoke when the theme change is completed.
+     * @param {() => void} [callback] - Callback to invoke when the theme change is completed.
      */
     changeTheme?(theme?: string, newTheme?: string, linkElementId?: string, callback?: () => void): void;
     /**