Contrib.social

Config-import does not change theme to dark mode as value is set in localStorage

Open on Drupal.org →
Created on 15 September 2023, 10 months ago
Updated 24 May 2024, about 1 month ago

Problem/Motivation

We have a series of sites using Gin as an admin theme with the 'Appearance' theme setting set to 'Light'. We would like to switch all users to the dark color scheme variation. This is a setting on the theme settings form. This value can be updated in active and staged configuration. We use configuration management to deploy changes to our sites and the config-import command is working as expected. However existing users are still seeing the light mode because this setting is also stored in the browsers localStorage for all existing users. There is no process for users to clear out this local variable so they can not see the new dark theme.

Steps to reproduce

  1. As an admin user, setup an initial space for testing...
    1. Create a site using the Gin admin theme with the light variation.
    2. Do not enable the "Users can override Gin settings" setting.
    3. Add a new user to the site to reproduce this issue.
    4. Verify that light mode is set as active configuration. This setting can be viewed within the browsers debugging console by checking the value of drupalSettings.gin.darkmode which should return a zero-value.
  2. As the test-user to verify that the theme displays as expected...
    1. In a separate browser, log in as the test user.
    2. Confirm that the light theme is displaying.
    3. Verify that the dark mode configuration is set in the test-users local storage with a value of zero. In your debugging console you can check the value of localStorage.getItem('Drupal.gin.darkmode') which should return a zero-value.
  3. As an admin user, change the theme settings...
    1. Change the Gin theme 'Appearence' setting to use the 'Dark' variation and save the form.
    2. Verify that dark mode is set as active configuration. This setting can be viewed within the browsers debugging console by checking the value of drupalSettings.gin.darkmode which should return a value if '1'.
  4. As the test-user to verify the theme is not updated...
    1. Return to the browser with your test user.
    2. Confirm that the light theme is still displaying.
    3. Check the dark mode configuration again within the browser's local storage for the test user. This value will continue to read 'zero' even though the value was successfully changed in Drupal. In your debugging console you can check the value of localStorage.getItem('Drupal.gin.darkmode') which is still returning an incorrect zero value.

Proposed resolution

Update the Gin theme's init.js to account for global changes to the admin theme. Add a check to test if the value stored in Drupals active configuration does not match the value stored in the browser's localStorage. If these values differ, then we know the theme setting has changed and the user's local storage should update to match. Make sure this only applies to sites where user's are not allowed to personalize their Gin settings.

🐛 Bug report
Status

Fixed

Version

3.0

Component

Code

Created by

🇺🇸United States nJim

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Merge Requests

Comments & Activities

  • Issue created by @nJim
  • Merge request !304Issue #3387653: Config-import does not change theme to dark mode as value is set in localStorage → (Merged) created by nJim
  • First commit to issue fork.
  • Status changed to Needs work 9 months ago
  • Comment 9 months ago →
    🇨🇭Switzerland saschaeggi Zurich

    @njlim something is strange with this MR, I can't push a change.

    Can you cherry-pick your change to the correct branch 3387653-config-import-does-not and open a new MR there?

    diff --git a/js/init.js b/js/init.js
index 390c9cee..860de79c 100644
--- a/js/init.js
+++ b/js/init.js
@@ -32,13 +32,12 @@ function ginInitDarkmode() {
 
 ginInitDarkmode();
 
-// GinDarkMode is not set yet.
+// GinDarkMode is not set yet or config changes detected.
 window.addEventListener('DOMContentLoaded', () => {
-  if (!localStorage.getItem('Drupal.gin.darkmode')) {
-    localStorage.setItem('Drupal.gin.darkmode', drupalSettings.gin.darkmode);
-    ginInitDarkmode();
-  }
-  else if (drupalSettings.gin.darkmode != localStorage.getItem('Drupal.gin.darkmode') && !drupalSettings.gin.show_user_theme_settings) {
+  if (
+    !localStorage.getItem('Drupal.gin.darkmode') ||
+    (drupalSettings.gin.darkmode != localStorage.getItem('Drupal.gin.darkmode') && !drupalSettings.gin.show_user_theme_settings)
+  ) {
     localStorage.setItem('Drupal.gin.darkmode', drupalSettings.gin.darkmode);
     ginInitDarkmode();
   }

    And apply this diff.

    Thank you!

  • Status changed to Closed: outdated 6 months ago
  • Comment 6 months ago →
    🇨🇭Switzerland saschaeggi Zurich

    Closing because of the lack of activity. Feel free to reopen if we still need to work on this.

  • Status changed to Active 2 months ago
  • Comment 2 months ago →
    🇩🇪Germany jurgenhaas Gottmadingen

    I'm seeing the same issue and I'm happy to test and provide feedback. Just wondering: do I need the changes from the MR and the changes from #4? If so, I'm happy to prepare that in an MR so that we can follow-up from there.

  • Issue was unassigned.
  • Comment 2 months ago →
    🇩🇪Germany jurgenhaas Gottmadingen

    I figured it out, I adjusted the MR with the changes from #4 and can confirm that this fixes the issue.

    Committing to the MR was possible after I clicked on "Get push access" here in the issue and I also had to accept, that the commit goes to the default branch in the fork.

    I'll have to do some more tests, then I can set this to NR.

  • Status changed to Needs review 2 months ago
  • Comment 2 months ago →
    🇩🇪Germany jurgenhaas Gottmadingen

    I've now rebased the MR to the latest dev release and tested the solution successfully.

    The main issue with the patch has been, that the file /dist/js/init.js contains trailing white space. When loading the patch into an IDE and saving it for local usage, that trailing space gets removed, and suddenly the patch no longer applies. That's probably a separate issue, but I'd suggest to clean up the code base such that trailing spaces get removed completely.

  • Pipeline finished with Success
    about 2 months ago
    Total: 219s
    #169532
  • Comment about 2 months ago →
    System Message
  • Status changed to Fixed about 2 months ago
  • Comment about 2 months ago →
    🇨🇭Switzerland saschaeggi Zurich

    Awesome work, thanks Jürgen 👏

  • Comment about 1 month ago →
    System Message

    Automatically closed - issue fixed for 2 weeks with no activity.

contrib.social Blog FAQ Discussions
Production build 0.69.0 2024