Блог

Мы строим Next.js приложение. Мы находимся в процессе перехода от чистых эмоций к MUI.

В нашем приложении есть темный режим, который был переключен путем отсоединения и прикрепления класса к документу. Мы не можем использовать состояние реакции, потому что это вызовет вспышку с отображением кода на стороне сервера в Next.js.

Мы избежали этой вспышки с помощью следующего noflash.js сценария:

 (function () {
  // Change these if you use something different in your hook.
  var storageKey = 'darkMode';
  var classNameDark = 'dark-mode';
  var classNameLight = 'light-mode';

  function setClassOnDocumentBody(darkMode) {
    document.body.classList.add(darkMode ? classNameDark : classNameLight);
    document.body.classList.remove(darkMode ? classNameLight : classNameDark);
  }

  var preferDarkQuery = '(prefers-color-scheme: dark)';
  var mql = window.matchMedia(preferDarkQuery);
  var supportsColorSchemeQuery = mql.media === preferDarkQuery;
  // eslint-disable-next-line unicorn/no-null
  var localStorageTheme = null;
  try {
    localStorageTheme = localStorage.getItem(storageKey);
  } catch {
    // Do nothing
  }
  
  var localStorageExists = localStorageTheme !== null;
  if (localStorageExists) {
    localStorageTheme = JSON.parse(localStorageTheme);
  }

  // Determine the source of truth
  if (localStorageExists) {
    // source of truth from localStorage
    setClassOnDocumentBody(localStorageTheme);
  } else if (supportsColorSchemeQuery) {
    // source of truth from system
    setClassOnDocumentBody(mql.matches);
    localStorage.setItem(storageKey, mql.matches);
  } else {
    // source of truth from document.body
    var isDarkMode = document.body.classList.contains(classNameDark);
    localStorage.setItem(storageKey, JSON.stringify(isDarkMode));
  }
})();
 

В документах MUI описано только, как переключать темный режим через состояние реакции.

Есть ли способ установить значение для MUI с помощью класса? (Или переменная CSS, которая задается классом?)

Выглядит невозможным Редактировать: прямо сейчас.