Permanent Dark Mode?

General
1

I had to reboot, and when my Space came back up it was no longer in Dark Mode.

Is there something I can add to make dark mode permanent?

THANKS!

2

I just figured out that it’s because of clearing browser cache, nothing to do with rebooting.

“problem” solved

3

Sorry I didn’t respond before. Dark mode should indeed be permanent already per client. Glad you figured out what was causing it for you.

4

Is there no way to enable a server-wide dark mode? Or is it possible to at least support “prefers-color-scheme”? I want to prevent getting blinded by SilverBullet each time I open the page :sweat_smile:

5

Sorry for bumping this topic again: is there any chance to have the dark mode to be the default, when new users access the site?

E.g. when I want the system to act like a blog and I have a certain instance of silverbullet to be accessible without login etc.? In that case I’d like the page to have a default style set already. (Well, maybe using Silverbullet as some kind of blogging system is not a good idea after all, even with the instance set to read only? Not sure, … but this is more offtopic here, sorry!)

6

I would also love a server-side dark mode.

My login doesn’t last across SilverBullet upgrades, so the login screen also blinds me with the white backgrounds sometimes. Additionally, the app also shows a full-white screen immediately on launch for a second before it remembers that it’s supposed to be dark.

Having a server-side dark mode would solve both issues and also remove the need for setting the dark mode on every client I use manually.

7

Whenever it forgets to switch to dark mode, I use this button to toggle it:

{[Editor: Toggle Dark Mode]}
8

As a stop gap, this space script will automatically set your client to dark mode if it’s not already (it will still flash though):

```space-script
silverbullet.registerEventListener({name: "editor:init"}, async () => {
  if(!await clientStore.get("darkMode")) {
    await clientStore.set("darkMode", true);
    await editor.reloadUI();
  }
});
```

The login page does not support dark mode at all yet, but this may be added as part of this: WIP: Refresh visuals of auth page by majjejjam · Pull Request #1124 · silverbulletmd/silverbullet · GitHub

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?).