Changing favicon & Darkmode

Tricks & Techniques
1

Hello everyone!

I’ve been an absolutely enthusiastic Silverbullet user for about a week now. I am currently busy trying to exploit the “hackable” aspect of silverbullet and am customizing a few things. Unfortunately, I am currently desperate about 2 things:

  1. How do I change the favicon?
  2. How do I get silverbullet to start in the dark theme in a browser with a dark theme? I can make the setting manually, but after the cookies get deleted automatically Silverbullet starts in light mode again. Or is this behavior normal? Then I would realize the switching via js.

Can you please give me a tip on how to do this?

If relevant: I have installed Silverbullet via Docker Compose and integrated Caddy as a reverse proxy in the stack to use SSL

3 Likes
2

For the favicon, I assume you change this image silverbullet/web/images at main · silverbulletmd/silverbullet · GitHub

3

Bumping this up; I was also looking for a way to change favicon.

I just started using SilverBullet, so still figuring my way around. But perhaps we can use media transclusion tagged to point it to replace the default favicon?

4

Replying on 2.
After having a look at the source, it seems like at the moment, silverbullet only looks at the darkMode key in the clientStore and sets the theme accordingly in the “editor:init” event. This leads to the behaviour you described, meaning it ignores browser theme (-changes).

My current solution is this space-script, registering a listener to “editor:init”, that itself adds a listener to the '(prefers-color-scheme: dark)' media query change event, updating the editor ui everytime this event is called:

silverbullet.registerEventListener({name: "editor:init"}, async (event) => {
  const mqlThemePref = window.matchMedia('(prefers-color-scheme: dark)');
  // Initial theme update
  await editor.setUiOption("darkMode", mqlThemePref.matches);
  
  mqlThemePref.addEventListener("change", async (mqlChanged) => {
    await editor.setUiOption("darkMode", mqlChanged.matches);
  });
});

I hope we get this behaviour included in 1.0 ;D

5 Likes