Theme "scheme" setting is overriden by browser local storage

Created on 8 February 2023, almost 2 years 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

Active

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

Production build 0.71.5 2024