Contrib.social

[beta4] Theme "scheme" setting is overriden by browser local storage

Open on Drupal.org →
Created on 8 February 2023, over 1 year ago
Updated 18 April 2024, 2 months ago

Problem/Motivation

"Scheme" switching works well in a Drupal point-of view, because the markup is updated:

<html lang="en" dir="ltr" data-fr-scheme="dark">

But there is a nasty JS which is overriding it in the DOM according to a local storage setting:

<html dir="ltr" data-fr-scheme="system" class="no-touchevents js" data-fr-js="true" data-fr-theme="light" lang="en"><head>

The local storage check is executing before, so it always win:

    const scheme = supportLocalStorage() ? localStorage.getItem('scheme') : '';
    const schemeAttr = document.documentElement.getAttribute(ATTRIBUTE_SCHEME);
    switch (true) {
      case scheme === SchemeValue.DARK:
        setDarkTheme();
        break;
      case scheme === SchemeValue.SYSTEM:
        checkPreferences();
        break;
      case schemeAttr === SchemeValue.DARK:
        setDarkTheme();
        break;
      case schemeAttr === SchemeValue.SYSTEM:
        checkPreferences();
        break;
    }

The JS is also adding a data-fr-theme attribute which is oudated.

Steps to reproduce

Go to /admin/appearance/settings/ui_suite_dsfr
Set "Theme color" = "dark" and save
Go to front, it is still light

Proposed resolution

It may be complicated, because it may happen upstream.

🐛 Bug report
Status

Fixed

Version

1.0

Component

Code

Created by

🇫🇷France pdureau Paris

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

Comments & Activities

  • Issue created by @pdureau
  • Issue was unassigned.
  • Comment over 1 year ago →
    🇫🇷France pdureau Paris
  • Comment about 1 year ago →
    🇫🇷France pdureau Paris
  • Comment about 1 year ago →
    🇫🇷France pdureau Paris
  • Comment 11 months ago →
    System Message
    • pdureau → committed d5a73158 on 1.0.x 
      Issue #3340307 by pdureau: Theme scheme setting is overriden by browser...
  • Status changed to Fixed 11 months ago
  • Comment 11 months ago →
    🇫🇷France pdureau Paris

    Fixed. This fix is as hacky as the upstream issue:

      if (document.documentElement.hasAttribute("data-fr-scheme")) {
    localStorage.setItem("scheme", null);
  }

    Tests

    My system: Light
    Drupal: Light
    Result: Light ✅

    My system: Light
    Drupal: Dark
    Result: Dark ✅

    My system: Light
    Drupal: System
    Result: Light ✅

    My system: Dark
    Drupal: Light
    Result: Light ✅

    My system: Dark
    Drupal: Dark
    Result: Dark ✅

    My system: Dark
    Drupal: System
    Result: Dark ✅

  • Comment 11 months ago →
    System Message

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

  • Status changed to Fixed 2 months ago
  • Comment 2 months ago →
    🇫🇷France NicociN

    I have to re-open the issue, because it seems that this update leads to another (new ?) issue on all our projects : the theme switch is not taken into account.

    The use case : when I switch, the current page displays properly (according to selected theme), and local storage is also updated with selected theme. But on page reload (sometime we need to reload 2 or 3 times to trigger the issue), the local storage 'scheme' value is set to 'null', leading to a reset of theme (data-fr-scheme : system & data-fr-theme : [your-system-theme]).

    Solution : if I comment the added JS (localStorage.setItem("scheme", null); in `ui_suite_dsfr/js/theme_switcher.js`) everything works as expected.

    drupal/ui_suite_dsfr : 1.0.x-dev@dev
    Browser : FF / Chrome

  • Comment 2 months ago →
    🇫🇷France NicociN
contrib.social Blog FAQ Discussions
Production build 0.69.0 2024