feat: toggle button for switching between light and dark theme

[hinakhadim]

This PR introduces toggle theme between light and dark on runtime in 5 MFEs (learner-dashboard, learning, account, profile, discussions):

Architecture:

MFEs:

• The package @edly-io/indigo-brand-openedx@^2.1.0 includes SCSS files supporting light and dark themes.
• The package @edly-io/indigo-frontend-component-header@^3.1.1 provides an option to show or hide the theme toggle icon based on the presence of MFE_CONFIG['THEME_COOKIE_NAME'].
• This PR includes the env.config.jsx file that loads the theme in the MFE by reading the cookie value to determine which theme is to be applied.
• Learner-Dashboard header will not have toggle icon because the MFE does not install a custom header now. More details are mentioned here.

LMS:

• The header is responsible for setting the theme.
• A JavaScript file dark-theme.js loads the cookie value when the page is first loaded.

---

[hinakhadim]

Improved the toggle button for better user experience:

LMS:

Light theme:

Dark theme:

MFE:

Light theme:

Dark theme:

[hinakhadim]

@regisb Could you please go through it again?

[hinakhadim]

The code implements the following conditions:

LMS:

• The cookie name is hardcoded as indigo-toggle-dark.
• The cookie expiration is set to 3 months (90 days).
• The toggle button is visible only if INDIGO_ENABLE_DARK_TOGGLE is set to True.
• On page load, if INDIGO_ENABLE_DARK_TOGGLE is True, the theme (light/dark) will be applied to the body. The cookie expiration date is refreshed on each page load.
• If INDIGO_ENABLE_DARK_TOGGLE is False, the system will always load with the light theme, the toggle button will not be displayed, the theme will not be applied on page load, and the cookie expiration will not be updated.

MFE (Micro-Frontend):

• The cookie name is hardcoded as indigo-toggle-dark.
• The theme cookie expiration is set to 90 days.
• The MFE receives the INDIGO_ENABLE_DARK_TOGGLE value via getConfig().INDIGO_ENABLE_DARK_TOGGLE from the LMS, passed as MFE_CONFIG['INDIGO_ENABLE_DARK_TOGGLE'] = True.
• If MFE_CONFIG['INDIGO_ENABLE_DARK_TOGGLE'] = True: - On page load, the theme (light/dark) is applied to the body, and the cookie expiration is refreshed. - The toggle button will be visible in the header.
• Otherwise: - The theme will not be applied on page load, and the cookie expiration will not be updated. The MFE will always start in the light theme. - The toggle button will not be visible.

LMS and MFE Integration:

We set MFE_CONFIG['INDIGO_ENABLE_DARK_TOGGLE'] = True to inform the MFEs that the toggle button or theme switching are disabled within our system. And MFEs should only show light theme.

[regisb]

Pretty rad @hinakhadim! Let's fix the instructions and merge in master, such that Redwood can benefit from that feature.