feat: send signal to LMS to change theme in iframe

src/ThemeToggleButton.jsx

@@ -1,8 +1,11 @@
 import React from 'react';
 import { getConfig } from '@edx/frontend-platform';
 import Cookies from 'universal-cookie';
+import { Icon } from '@openedx/paragon';
+import { WbSunny, Nightlight } from '@openedx/paragon/icons';
 
 const ThemeToggleButton = () => {
+  const cookies = new Cookies();
   const themeCookieName = getConfig().THEME_COOKIE_NAME ? getConfig().THEME_COOKIE_NAME : null;
 
   const getNextWeek = () => {
@@ -11,9 +14,7 @@ const ThemeToggleButton = () => {
   };
 
   const onToggleTheme = () => {
-    const cookies = new Cookies();
     const serverURL = new URL(getConfig().LMS_BASE_URL);
-
     const options = { domain: serverURL.hostname, path: '/', expires: getNextWeek() };
     let themeName = '';
 
@@ -25,6 +26,11 @@ const ThemeToggleButton = () => {
       themeName = 'dark';
     }
     cookies.set(themeCookieName, themeName, options);
+
+    const learningMFEUnitIframe = document.getElementById('unit-iframe');
+    if (learningMFEUnitIframe) {
+      learningMFEUnitIframe.contentWindow.postMessage({ 'indigo-toggle-dark': themeName }, serverURL.origin);
+    }
   };
 
   if (!themeCookieName) {
@@ -33,18 +39,14 @@ const ThemeToggleButton = () => {
 
   return (
     <div className="theme-toggle-button">
-      <span id="darkmode" role="button" tabIndex="0" onClick={onToggleTheme} onKeyDown={onToggleTheme}>
-        <div className="darkmode_icon">
-          <span className="ray" />
-          <span className="ray" />
-          <span className="ray" />
-          <span className="ray" />
-          <span className="ray" />
-          <span className="ray" />
-          <span className="ray" />
-          <span className="ray" />
-        </div>
-      </span>
+      <div className="light-theme-icon"><Icon src={WbSunny} /></div>
+      <div className="toggle-switch">
+        <label htmlFor="theme-toggle-checkbox" className="switch">
+          <input id="theme-toggle-checkbox" defaultChecked={cookies.get(themeCookieName) === 'dark'} onChange={onToggleTheme} type="checkbox" />
+          <span className="slider round" />
+        </label>
+      </div>
+      <div className="dark-theme-icon"><Icon src={Nightlight} /></div>
     </div>
   );
 };