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

overhangio · Oct 11, 2024 · 4b733db · 4b733db
1 parent cf4d9e5
commit 4b733db
Show file tree

Hide file tree

Showing 9 changed files with 225 additions and 30 deletions.
diff --git a/README.rst b/README.rst
@@ -29,7 +29,7 @@ Configuration
 - ``INDIGO_WELCOME_MESSAGE`` (default: "The place for all your online learning")
 - ``INDIGO_PRIMARY_COLOR`` (default: "#3b85ff")
 - ``INDIGO_FOOTER_NAV_LINKS`` (default: ``[{"title": "About", "url": "/about"}, {"title": "Contact", "url": "/contact"}]``)
-- ``INDIGO_ENABLE_DARK_THEME`` (default: False)
+- ``INDIGO_ENABLE_DARK_TOGGLE`` (default: True)
 
 The ``INDIGO_*`` settings listed above may be modified by running ``tutor config save --set INDIGO_...=...``. For instance, to remove all links from the footer, run::
 
@@ -40,19 +40,15 @@ Or, to set the primary color to forest green, run::
     # Note: The nested quotes are needed in order to handle the hash (#) correctly.
     tutor config save --set 'INDIGO_PRIMARY_COLOR="#225522"'
 
-Enabling Dark Theme
+Theme Toggle Button
 -------------------
 
-To enable the dark theme for the whole platform, run::
+The theme toggle button is enabled by default when Tutor Indigo is installed. The theme can be switched from light to dark and vice versa. To disable it, run::
 
-    tutor config save --set INDIGO_ENABLE_DARK_THEME=True
+    tutor config save --set INDIGO_ENABLE_DARK_TOGGLE=false
     tutor images build openedx
-    tutor images build mfe
     tutor local start -d
 
-.. warning:: 
-    The dark theme can't be changed dynamically through any toggle button in platform. Using the above config variable, the platform will start with either Light theme or Dark theme.
-
 
 Customization
 -------------

diff --git a/tutorindigo/plugin.py b/tutorindigo/plugin.py
@@ -20,8 +20,8 @@
     "defaults": {
         "VERSION": __version__,
         "WELCOME_MESSAGE": "The place for all your online learning",
-        "ENABLE_DARK_THEME": False,
         "PRIMARY_COLOR": "#15376D",  # Indigo
+        "ENABLE_DARK_TOGGLE": True,
         # Footer links are dictionaries with a "title" and "url"
         # To remove all links, run:
         # tutor config save --set INDIGO_FOOTER_NAV_LINKS=[]
@@ -109,8 +109,8 @@ def _override_openedx_docker_image(
         (
             "mfe-dockerfile-post-npm-install-learning",
             """
-RUN npm install '@edx/brand@npm:@edly-io/indigo-brand-openedx@^2.0.0'{% if INDIGO_ENABLE_DARK_THEME %} --theme=dark{% endif %}
-RUN npm install '@edx/frontend-component-header@npm:@edly-io/indigo-frontend-component-header@~3.0.0'
+RUN npm install '@edx/brand@npm:@edly-io/indigo-brand-openedx@^2.1.1'
+RUN npm install '@edx/frontend-component-header@npm:@edly-io/indigo-frontend-component-header@^3.1.3'
 RUN npm install @edly-io/indigo-frontend-component-footer@^2.0.0
 
 COPY indigo/env.config.jsx /openedx/app/
@@ -119,16 +119,16 @@ def _override_openedx_docker_image(
         (
             "mfe-dockerfile-post-npm-install-authn",
             """
-RUN npm install '@edx/brand@npm:@edly-io/indigo-brand-openedx@^2.0.0'{% if INDIGO_ENABLE_DARK_THEME %} --theme=dark{% endif %}
+RUN npm install '@edx/brand@npm:@edly-io/indigo-brand-openedx@^2.1.1'
 """,
         ),
         # Tutor-Indigo v2.1 targets the styling updates in discussions and learner-dashboard MFE
         # brand-openedx is related to styling updates while others are for header and footer updates
         (
             "mfe-dockerfile-post-npm-install-discussions",
             """
-RUN npm install '@edx/brand@npm:@edly-io/indigo-brand-openedx@^2.0.0'{% if INDIGO_ENABLE_DARK_THEME %} --theme=dark{% endif %}
-RUN npm install '@edx/frontend-component-header@npm:@edly-io/indigo-frontend-component-header@~3.0.0'
+RUN npm install '@edx/brand@npm:@edly-io/indigo-brand-openedx@^2.1.1'
+RUN npm install '@edx/frontend-component-header@npm:@edly-io/indigo-frontend-component-header@^3.1.3'
 RUN npm install @edly-io/indigo-frontend-component-footer@^2.0.0
 
 COPY indigo/env.config.jsx /openedx/app/
@@ -137,7 +137,7 @@ def _override_openedx_docker_image(
         (
             "mfe-dockerfile-post-npm-install-learner-dashboard",
             """
-RUN npm install '@edx/brand@npm:@edly-io/indigo-brand-openedx@^2.0.0'{% if INDIGO_ENABLE_DARK_THEME %} --theme=dark{% endif %}
+RUN npm install '@edx/brand@npm:@edly-io/indigo-brand-openedx@^2.1.1'
 RUN npm install @edly-io/indigo-frontend-component-footer@^2.0.0
 
 COPY indigo/env.config.jsx /openedx/app/
@@ -146,8 +146,8 @@ def _override_openedx_docker_image(
         (
             "mfe-dockerfile-post-npm-install-profile",
             """
-RUN npm install '@edx/brand@npm:@edly-io/indigo-brand-openedx@^2.0.0'{% if INDIGO_ENABLE_DARK_THEME %} --theme=dark{% endif %}
-RUN npm install '@edx/frontend-component-header@npm:@edly-io/indigo-frontend-component-header@~3.0.0'
+RUN npm install '@edx/brand@npm:@edly-io/indigo-brand-openedx@^2.1.1'
+RUN npm install '@edx/frontend-component-header@npm:@edly-io/indigo-frontend-component-header@^3.1.3'
 RUN npm install @edly-io/indigo-frontend-component-footer@^2.0.0
 
 COPY indigo/env.config.jsx /openedx/app/
@@ -156,8 +156,8 @@ def _override_openedx_docker_image(
         (
             "mfe-dockerfile-post-npm-install-account",
             """
-RUN npm install '@edx/brand@npm:@edly-io/indigo-brand-openedx@^2.0.0'{% if INDIGO_ENABLE_DARK_THEME %} --theme=dark{% endif %}
-RUN npm install '@edx/frontend-component-header@npm:@edly-io/indigo-frontend-component-header@~3.0.0'
+RUN npm install '@edx/brand@npm:@edly-io/indigo-brand-openedx@^2.1.1'
+RUN npm install '@edx/frontend-component-header@npm:@edly-io/indigo-frontend-component-header@^3.1.3'
 RUN npm install @edly-io/indigo-frontend-component-footer@^2.0.0
 
 COPY indigo/env.config.jsx /openedx/app/
@@ -180,7 +180,6 @@ def _override_openedx_docker_image(
 for filename in javascript_files:
     if filename in PIPELINE['JAVASCRIPT']:
         PIPELINE['JAVASCRIPT'][filename]['source_filenames'] += dark_theme_filepath
-  
 """,
         ),
         # for development
@@ -193,6 +192,14 @@ def _override_openedx_docker_image(
 for filename in javascript_files:
     if filename in PIPELINE['JAVASCRIPT']:
         PIPELINE['JAVASCRIPT'][filename]['source_filenames'] += dark_theme_filepath
+
+MFE_CONFIG['INDIGO_ENABLE_DARK_TOGGLE'] = {{ INDIGO_ENABLE_DARK_TOGGLE }}
+""",
+        ),
+        (
+            "openedx-lms-production-settings",
+            """
+MFE_CONFIG['INDIGO_ENABLE_DARK_TOGGLE'] = {{ INDIGO_ENABLE_DARK_TOGGLE }}
 """,
         ),
     ]

diff --git a/tutorindigo/templates/indigo/env.config.jsx b/tutorindigo/templates/indigo/env.config.jsx
@@ -1,8 +1,39 @@
-import React from 'react';
+import React, { useEffect } from 'react';
+import Cookies from 'universal-cookie';
 
 import Footer from '@edly-io/indigo-frontend-component-footer';
+import { getConfig } from '@edx/frontend-platform';
 import { DIRECT_PLUGIN, PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-framework';
 
+let themeCookie = 'indigo-toggle-dark';
+let themeCookieExpiry = 90; // days
+
+const AddDarkTheme = () => {
+  const cookies = new Cookies();
+  const isThemeToggleEnabled = getConfig().INDIGO_ENABLE_DARK_TOGGLE;
+
+  const getCookieExpiry = () => {
+    const today = new Date();
+    return new Date(today.getFullYear(), today.getMonth(), today.getDate() + themeCookieExpiry);
+  };
+
+  const getCookieOptions = () => {
+    const serverURL = new URL(getConfig().LMS_BASE_URL);
+    const options = { domain: serverURL.hostname, path: '/', expires: getCookieExpiry() };
+    return options;
+  };
+
+  useEffect(() => {
+    const theme =  cookies.get(themeCookie);
+    if (isThemeToggleEnabled && theme === 'dark') {
+      document.body.classList.add('indigo-dark-theme');
+      cookies.set(themeCookie, theme, getCookieOptions());      //  on page load, update expiry
+    }
+  }, []);
+
+  return (<div />);
+};
+
 const themePluginSlot = {
   keepDefault: false,
   plugins: [
@@ -14,7 +45,16 @@ const themePluginSlot = {
         priority: 1,
         RenderWidget: <Footer />,
       },
-    }
+    },
+    {
+      op: PLUGIN_OPERATIONS.Insert,
+      widget: {
+        id: 'read_theme_cookie',
+        type: DIRECT_PLUGIN,
+        priority: 2,
+        RenderWidget: AddDarkTheme,
+      },
+    },
   ],
 };
 

diff --git a/tutorindigo/templates/indigo/lms/static/js/dark-theme.js b/tutorindigo/templates/indigo/lms/static/js/dark-theme.js
@@ -1,8 +1,38 @@
 $(document).ready(function() {
     'use strict';
 
-    const enableDarkTheme = {% if INDIGO_ENABLE_DARK_THEME %}true{% else %}false{% endif %};
-    if (enableDarkTheme){
-        $('body').addClass("indigo-dark-theme");
+    const themeCookie = 'indigo-toggle-dark';
+
+    function applyThemeOnPage(){
+      const theme = $.cookie(themeCookie);
+      {% 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: '/' });
+      {% endif %}
+    }
+
+    function setThemeToggleBtnState(){
+      const theme = $.cookie(themeCookie);
+      $("#toggle-switch-input").prop("checked", theme === 'dark');
+    }
+
+    function toggleTheme(){
+      const themeValue = $.cookie(themeCookie) === 'dark' ? 'light' : 'dark';
+      $.cookie(themeCookie, themeValue, { domain: window.location.hostname, expires: 90, path: '/' });
+
+      applyThemeOnPage();
     }
-});
+
+    // Listener for updating the theme inside an iframe
+    window.addEventListener("message", function(e){
+      if (e.data && e.data["indigo-toggle-dark"]){
+        applyThemeOnPage();
+      }
+    });
+
+    applyThemeOnPage();  // loading theme on page load
+    setThemeToggleBtnState(); // check/uncheck toggle btn based on theme
+
+    $('#toggle-switch').on('change', toggleTheme);
+});
diff --git a/tutorindigo/templates/indigo/lms/static/sass/extra/_header.scss b/tutorindigo/templates/indigo/lms/static/sass/extra/_header.scss
@@ -10,7 +10,14 @@ header.global-header {
         display: block;
     }
     .main-header {
-        height: auto;
+        display: flex;
+        align-items: center;
+        height: 50px;
+
+        @include media-breakpoint-up(lg) {
+            display: unset;
+            height: auto;
+        }
     }
     .header-logo {
         margin: 0;
@@ -31,6 +38,7 @@ header.global-header {
         }
     }
     .nav-links {
+        width: 100%;
         .main {
             margin: 0 0 0 38px;
             .nav-tab {
@@ -52,6 +60,7 @@ header.global-header {
         .secondary {
             margin: 0;
             position: relative;
+            justify-content: end;
             .toggle-user-dropdown {
                 padding: 9px 15px;
                 background: $primary-light;
@@ -161,6 +170,81 @@ header.global-header {
     }
 }
 
+.theme-toggle-button{
+    position: relative;
+    display: {% if INDIGO_ENABLE_DARK_TOGGLE %}flex{% else %}none{% endif %};
+    align-items: center;
+    margin-right: 0 !important;
+
+    @include media-breakpoint-up(lg) {
+        margin-right: 1.5rem !important;
+    }
+
+    .light-theme-icon, .dark-theme-icon{
+        width: 18px;
+        height: 1.5rem;
+        color: $primary;
+        & svg {
+            width: inherit;
+            height: inherit;
+        }
+    }
+
+    #toggle-switch {
+        display: flex;
+        margin: 0 5px;
+
+        label {
+            margin: 0;
+        }
+
+/* The switch - the box around the slider */
+        .switch {
+            position: relative;
+            display: inline-block;
+            width: 45px;
+            height: 24px;
+
+            /* Hide default HTML checkbox */
+            input {
+                opacity: 0;
+                width: 0;
+                height: 0;
+            }
+
+            /* The slider */
+            .slider {
+                position: absolute;
+                cursor: pointer;
+                top: 0;
+                left: 0;
+                right: 0;
+                bottom: 0;
+                background-color: $primary-d;
+                transition: .4s;
+
+                &::before{
+                    position: absolute;
+                    content: "";
+                    height: 20px;
+                    width: 20px;
+                    left: 3px;
+                    bottom: 2px;
+                    background-color: white;
+                    transition: .4s;
+                }
+
+                &.round{
+                    border-radius: 34px;
+                    &::before{
+                        border-radius: 50%;
+                    }
+                }
+            }
+        }
+    }
+}
+
 
 
 body.indigo-dark-theme {
@@ -234,4 +318,23 @@ body.indigo-dark-theme {
             }
         }
     }
-}
+
+// theme toggle switch
+  .theme-toggle-button{
+        .light-theme-icon, .dark-theme-icon{
+            color: $text-color-primary;
+        }
+        #toggle-switch {
+            .switch {
+                /* The slider */
+                .slider {
+                    background-color: #ccc;
+                    &::before{
+                        transform: translateX(19px);
+                        box-shadow: 0 0 1px $primary-d;
+                    }
+                }
+            }
+        }
+    }
+}
diff --git a/tutorindigo/templates/indigo/lms/static/sass/partials/lms/theme/_variables.scss b/tutorindigo/templates/indigo/lms/static/sass/partials/lms/theme/_variables.scss
@@ -31,3 +31,6 @@ $danger-d: #FFA07A;
 $success-d: #54CF5E;
 $btn-color-d: #112F6B;
 $body-bg-d:#0D0D0E;
+
+$warning-400: #ffe340;
+$page-color-transition: transparent .2s ease, color .2s ease;
diff --git a/tutorindigo/templates/indigo/lms/templates/header/navbar-authenticated.html b/tutorindigo/templates/indigo/lms/templates/header/navbar-authenticated.html
@@ -53,7 +53,8 @@
       </div>
     % endif
   </div>
-  <div class="secondary">
+  <div class="secondary d-flex align-items-center">
+    <%include file="./theme-toggle-button.html" />
     <%include file="user_dropdown.html"/>
   </div>
 </div>
diff --git a/tutorindigo/templates/indigo/lms/templates/header/navbar-not-authenticated.html b/tutorindigo/templates/indigo/lms/templates/header/navbar-not-authenticated.html
@@ -42,7 +42,8 @@
     %endif
   % endif
   </div>
-  <div class="secondary">
+  <div class="secondary d-flex align-items-center">
+    <%include file="./theme-toggle-button.html" />
     <div class="btn-holder">
       % if allows_login:
         % if allow_public_account_creation and not disable_register_button: