feat: toggle button for switching between light and dark theme #97

hinakhadim · 2024-08-20T07:11:50Z

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.3 provides an option to show or hide the theme toggle icon based on the presence of MFE_CONFIG['INDIGO_ENABLE_DARK_TOGGLE'].
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.

tutorindigo/plugin.py

tutorindigo/templates/indigo/env.config.jsx

tutorindigo/templates/indigo/lms/static/sass/extra/_header.scss

hinakhadim · 2024-09-06T11:58:48Z

Improved the toggle button for better user experience:

LMS:

Light theme:

Dark theme:

MFE:

Light theme:

Dark theme:

README.rst

tutorindigo/plugin.py

hinakhadim · 2024-09-27T12:13:57Z

@regisb Could you please go through it again?

README.rst

tutorindigo/plugin.py

tutorindigo/templates/indigo/env.config.jsx

tutorindigo/templates/indigo/lms/static/js/dark-theme.js

tutorindigo/templates/indigo/lms/templates/header/navbar-authenticated.html

tutorindigo/templates/indigo/lms/static/sass/extra/_header.scss

tutorindigo/templates/indigo/lms/templates/header/navbar-authenticated.html

tutorindigo/templates/indigo/lms/static/js/dark-theme.js

hinakhadim · 2024-10-08T07:50:39Z

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 · 2024-10-09T09:34:54Z

README.rst


-    tutor config save --set INDIGO_ENABLE_DARK_THEME=True
+    tutor config save --set INDIGO_THEME_COOKIE_NAME=null
    tutor images build openedx


The only thing left is to update the instructions :)

tutor config save --set INDIGO_ENABLE_DARK_TOGGLE=false tutor local restart lms

Updated the instructions:

tutor config save --set INDIGO_ENABLE_DARK_TOGGLE=false tutor images build openedx # required after enable/disable toggle tutor local start -d

Oh it's too bad that we have to rebuild the openedx image is there any way to avoid that, such as accessing the setting from the js code?

We are depending on rebuilding of image due to the following two reasons:

JS file

Scss file if condition to show/hide toggle. [This can be handled in js file too.]

I'm exploring it. So far, I'm unable to find a solution. Just thinking, if we can somehow pass variable from HTML/Mako to js . something like this: but this isn't working.

<%! from django.conf import settings %> <% indigoDark = settings.MFE_CONFIG.get('INDIGO_ENABLE_DARK_TOGGLE', true) %> <div class="theme-toggle-button mr-4"> .....HTML..... </div> <script type="text/javascript"> window.darkkTheme = '{{ indigoDark }}' </script>

OR pass value to a tag and hide it like the below:

<%! from django.conf import settings %> <% indigo_dark = settings.MFE_CONFIG.get('INDIGO_ENABLE_DARK_TOGGLE', true) %> <div class="theme-toggle-button mr-4"> .....HTML..... </div> <span class='hide indigo-toggle-value'>{indigo_dark}</span>

then get value in js file using. $('indigo-toggle-value');

Don't spend too much time on this. If you can't find a quick fix, let's just ask people to rebuild the openedx image.

regisb · 2024-10-09T09:35:47Z

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

tutorindigo/templates/indigo/lms/static/js/dark-theme.js

regisb · 2024-10-09T10:43:13Z

tutorindigo/templates/indigo/env.config.jsx

+
+const AddDarkTheme = () => {
+  const cookies = new Cookies();
+  const isThemeToggleEnabled = getConfig().INDIGO_ENABLE_DARK_TOGGLE;


I am unable to see the toggle in the MFEs, so I'm guessing this is not working as expected. The LMS config API call is properly returning INDIGO_ENABLE_DARK_TOGGLE: true. Can you please troubleshoot?

Yes, header package is not published yet in which we are using INDIGO_ENABLE_DARK_TOGGLE . Here's the PR for header. I am currently testing the header package and then publish it.
Then, I have to update header package version here too.

Publishing the header is done and the version is updated too. I've tested on my system and openedx and mfe image building is successful and working. I will test on sandboxdev and inform the results here.

I tested on sandboxdev and it's working fine. Steps I've taken:

tutor local stop rm -rf tutor/env pip install git+https://.......this branch tutor config save tutor images build openedx tutor images build mfe tutor local start -d tutor config save --set INDIGO_ENABLE_DARK_TOGGLE=false tutor images build openedx tutor local start -d tutor config save --set INDIGO_ENABLE_DARK_TOGGLE=true tutor images build openedx tutor local start -d

DawoudSheraz · 2024-10-11T06:44:37Z

CHANGELOG.md

+- [Feature] Introduced theme toggle feature with enable/disable option and runtime switch between light and dark modes. (by @hinakhadim) -->
+


nit: remove --> at the end

DawoudSheraz · 2024-10-11T06:48:15Z

tutorindigo/templates/indigo/lms/static/js/dark-theme.js

+      {% if INDIGO_ENABLE_DARK_TOGGLE %}
+      $('body').toggleClass("indigo-dark-theme", theme === 'dark');       // append or remove dark-class based on cookie-value
+      // update expiry
+      $.cookie(themeCookie, theme, { domain: window.location.hostname, expires: 90, path: '/' });


how is this different from operation in above file?

The applyThemeOnPage() function is the minimum criterion directly affecting whether the dark theme is applied. Instead of adding to the whole file, we focus specifically on this function.
But there are no significant performance gains in either way because LMS has to compile JS file whenever building an image.

DawoudSheraz · 2024-10-11T10:06:25Z

tutorindigo/templates/indigo/lms/static/js/dark-theme.js

+
+    function applyThemeOnPage(){
+      const theme = $.cookie(themeCookie);
+      {% if INDIGO_ENABLE_DARK_TOGGLE %}


Can we use django template if the condition here? It is JS file and not being included in django template such that the context variables will work here.

tutorindigo/templates/indigo/lms/static/sass/partials/lms/theme/_variables.scss

tutorindigo/templates/indigo/lms/templates/header/theme-toggle-button.html

hinakhadim marked this pull request as draft August 20, 2024 07:13

hinakhadim requested a review from regisb August 23, 2024 09:55

hinakhadim marked this pull request as ready for review August 23, 2024 09:55

hinakhadim requested a review from DawoudSheraz August 26, 2024 06:27

DawoudSheraz reviewed Aug 26, 2024

View reviewed changes

tutorindigo/plugin.py Outdated Show resolved Hide resolved

DawoudSheraz reviewed Aug 26, 2024

View reviewed changes

tutorindigo/templates/indigo/env.config.jsx Outdated Show resolved Hide resolved

DawoudSheraz reviewed Aug 26, 2024

View reviewed changes

tutorindigo/templates/indigo/lms/static/sass/extra/_header.scss Outdated Show resolved Hide resolved

hinakhadim force-pushed the hina/theme-cookies branch from bd971df to 6e9cd62 Compare September 6, 2024 11:55

hinakhadim requested review from regisb and removed request for regisb September 13, 2024 04:24

regisb reviewed Sep 16, 2024

View reviewed changes

README.rst Outdated Show resolved Hide resolved

tutorindigo/plugin.py Outdated Show resolved Hide resolved

regisb requested changes Sep 27, 2024

View reviewed changes

regisb reviewed Sep 30, 2024

View reviewed changes

tutorindigo/templates/indigo/lms/static/js/dark-theme.js Outdated Show resolved Hide resolved

regisb reviewed Oct 9, 2024

View reviewed changes

tutorindigo/templates/indigo/lms/static/js/dark-theme.js Outdated Show resolved Hide resolved

regisb reviewed Oct 9, 2024

View reviewed changes

regisb approved these changes Oct 10, 2024

View reviewed changes

hinakhadim force-pushed the hina/theme-cookies branch from c0b688e to 5eeda59 Compare October 11, 2024 04:59

DawoudSheraz reviewed Oct 11, 2024

View reviewed changes

hinakhadim force-pushed the hina/theme-cookies branch from 9835384 to 5057307 Compare October 11, 2024 07:24

DawoudSheraz reviewed Oct 11, 2024

View reviewed changes

tutorindigo/templates/indigo/lms/static/sass/partials/lms/theme/_variables.scss Outdated Show resolved Hide resolved

DawoudSheraz reviewed Oct 11, 2024

View reviewed changes

tutorindigo/templates/indigo/lms/templates/header/theme-toggle-button.html Outdated Show resolved Hide resolved

DawoudSheraz approved these changes Oct 11, 2024

View reviewed changes

hinakhadim added 2 commits October 11, 2024 15:45

feat: add toggle button for switching between light and dark theme

e5795fe

v18.2.1

0b4aa10

hinakhadim force-pushed the hina/theme-cookies branch from 5057307 to 0b4aa10 Compare October 11, 2024 10:47

hinakhadim merged commit e442c78 into overhangio:master Oct 11, 2024
1 check passed

regisb deleted the hina/theme-cookies branch October 14, 2024 06:46

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: toggle button for switching between light and dark theme #97

feat: toggle button for switching between light and dark theme #97

hinakhadim commented Aug 20, 2024 •

edited

Loading

hinakhadim commented Sep 6, 2024

hinakhadim commented Sep 27, 2024

hinakhadim commented Oct 8, 2024

regisb Oct 9, 2024

hinakhadim Oct 9, 2024

regisb Oct 10, 2024

hinakhadim Oct 10, 2024 •

edited

Loading

regisb Oct 10, 2024

regisb commented Oct 9, 2024

regisb Oct 9, 2024

hinakhadim Oct 9, 2024

hinakhadim Oct 9, 2024

hinakhadim Oct 10, 2024

DawoudSheraz Oct 11, 2024

DawoudSheraz Oct 11, 2024

hinakhadim Oct 11, 2024

DawoudSheraz Oct 11, 2024 •

edited

Loading

		- [Feature] Introduced theme toggle feature with enable/disable option and runtime switch between light and dark modes. (by @hinakhadim) -->

feat: toggle button for switching between light and dark theme #97

feat: toggle button for switching between light and dark theme #97

Conversation

hinakhadim commented Aug 20, 2024 • edited Loading

Architecture:

MFEs:

LMS:

hinakhadim commented Sep 6, 2024

LMS:

MFE:

hinakhadim commented Sep 27, 2024

hinakhadim commented Oct 8, 2024

LMS:

MFE (Micro-Frontend):

LMS and MFE Integration:

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

hinakhadim Oct 10, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

regisb commented Oct 9, 2024

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

DawoudSheraz Oct 11, 2024 • edited Loading

Choose a reason for hiding this comment

hinakhadim commented Aug 20, 2024 •

edited

Loading

hinakhadim Oct 10, 2024 •

edited

Loading

DawoudSheraz Oct 11, 2024 •

edited

Loading