Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix: send signal to LMS for changing theme in iframe #20

Merged
merged 1 commit into from
Sep 27, 2024
Merged

fix: send signal to LMS for changing theme in iframe #20

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
30 changes: 16 additions & 14 deletions src/ThemeToggleButton.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 = () => {
Expand All @@ -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 = '';

Expand All @@ -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) {
Expand All @@ -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>
);
};
Expand Down
Loading