Permanent Dark Mode?

General
9

Below forced Dark Mode works properly under v2:

event.listen {
  -- name = 'system:ready',
  name = 'editor:init',
  run = function(e)
    if clientStore.get("darkMode") then
      editor.flashNotification("Current Theme: Dark")
    else
      editor.flashNotification("Current Theme: Light")
      clientStore.set("darkMode", true)
      editor.reloadUI()
    end
  end
}

It functions across browsers on both mobile and PC.

However, after the first full indexing from scratch on a mobile device, the interface may still remain in light mode. It usually requires a manual refresh to trigger the editor:init event and properly switch to dark mode.

I was therefore searching for a suitable event that would activate dark mode only after index:complete (an event not exist).

I first found that the system:ready event is roughly equivalent to editor:init, but it seemingly occurs before the index:complete event, so it doesn’t solve the issue.

Then I tried the editor:complete event (found through event), but that didn’t work either.

The editor:pageLoaded event also fires before index:complete, so it’s not a viable solution either. (inspired from Index Page)

At last, I discovered this dark magic:

-- priority: -1 
event.listen {
  -- name = "editor:pageLoaded",
  name = "hooks:renderTopWidgets",
  run = function(e)
    if not clientStore.get("darkMode") then
      clientStore.set("darkMode", true)
      editor.reloadUI()
    end
  end
}

it works perfectly after index:complete. Now, no matter how the user tinkers with SB, dark mode is the final destination (even if there’s no TopWidgets on the page?).