Changing favicon & Darkmode

[mcboogieman]

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

[Ross]

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

[Snail]

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?

[22rw]

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

[paletochen]

So, did anyone figure out how to change the favicon for a docker instance?

I have 2 docker instances running at the same time, one for work and one personal, and I’d like to have different favicons for each one

[CaffeineFueled]

Was playing around on the test instance but not sure if it is the optimal solution.

You need the favicon as a PNG file.

Run command: Upload: File > Upload your favicon as favicon.png > Remove cache etc.

New favicon was displayed in private mode after that. I think that will work with other formats as well, when needed.

[paletochen]

This didn’t work for me, and also, I am not sure how this technically could work.
My initial assumption is that the new favicon png (or ico) files needs to go somewhere in the docker container file structure, but i couldn’t find where

[CaffeineFueled]

Yeah, should have logged in:

Auth Page
<link rel="icon" type="image/x-icon" href="/favicon.png">

After Authentication:
<link rel="icon" type="image/x-icon" href="/.client/favicon.png">

Currently no other idea (without the need of your own Dockerfile)

Cheers,
CF

[22rw]

If your docker container is running behind a reverse proxy, you can just serve your own favicon whenever the file is requested.

nginx:

location /.client/favicon.png {
    # eg: /var/www/media/silverbullet/favicon.png
    alias /path/to/favicon.png; 
}

Not really an elegant solution, but better than nothing

[norlan]

I use a space-script to replace the favicon with a svg image on init:

silverbullet.registerEventListener({name: "editor:init"}, (event) => {
 
  var link = document.createElement('link'),
      oldLink = document.getElementById('dynamic-favicon');
  link.id = 'dynamic-favicon';
  link.rel = 'icon';
  link.href = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='lightgreen' d='M21.04,12.13C21.18,12.13 21.31,12.19 21.42,12.3L22.7,13.58C22.92,13.79 22.92,14.14 22.7,14.35L21.7,15.35L19.65,13.3L20.65,12.3C20.76,12.19 20.9,12.13 21.04,12.13M19.07,13.88L21.12,15.93L15.06,22H13V19.94L19.07,13.88M10,2H14A2,2 0 0,1 16,4V6H20A2,2 0 0,1 22,8L20,10V8H4V19H11V21H4A2,2 0 0,1 2,19V8A2,2 0 0,1 4,6H8V4A2,2 0 0,1 10,2M14,6V4H10V6H14Z'/%3E%3C/svg%3E";
  if (oldLink) {
    document.head.removeChild(oldLink);
   }
  document.head.appendChild(link);
});

[paletochen]

Thanks both!

I tried @22rw option but i could not make it work.
I tried for example the following:

location /.client/favicon.png {
    # eg: /var/www/media/silverbullet/favicon.png
    alias /space/favicon.png; 
}

so pointing to a file I have inside my space but it didn’t work.

@norlan space-script works… mostly
It does change the favicon for the site, but not for the PWA.
I am indeed interested on the PWA too as I want to distinguish the personal and professional instance when opening them in my phone.

Any ideas how to change that one too?

Thanks

[bent0n]

On iOs, it’s a bit hacky but you can “change” the icon of a PWA:

• Open the PWA with a shortcut
• Change the icon of the shortcut

You will need to keep the PWA somewhere on your homescreen but you can hide it on the second page of a folder or something…

To open SilverBullet (or other) PWA from a shortcut, use the open URL command with:

webapp://https://note.example.tld/#boot/

[22rw]

Hey @paletochen
Did you put the location block with the favicon before the ‘/’-block with the reverse-proxy directive inside?
Otherwise the first block acts as a catch-all and returns before the favicon-block is reached.

But even if it worked, I’m pretty certain that this doesn’t solve the favicon issue in the PWA :\

[paletochen]

Actually, no, i put it after the / block so, you may be right that this could be the reason it didn’t work.
I may try it again, it could avoid me one extra space-config in the instance to change the favicon.
But yes, the one I care the most is the PWA one.

Thanks for coming back to this

UPDATE: It works adding it before the / section but, as you imagined, the PWA icon is not resolved yet

[22rw]

Did some more digging, and actually managed to change the PWA icon!
Looking in the web manifest, there’s another, larger png file at /.client/logo-dock.png.

If you serve your own file instead, the startup-/splashscreen-icon and app-icon of the PWA are changed to the new image (might require a reinstall):

location /.client/logo-dock.png {
    alias /var/www/media/silverbullet/logo-dock.png;
}

The result (my custom image is just the inverted default image):

Notes: The manifest declares the dimensions as 512x512, but the actual image size is 1024x1024. I didn’t test this, but i guess both sizes will work.

[paletochen]

It works!!!
Thank you so much.

I can finally have a nice icon for my work PWA instance

[zhangtai]

So many creative thoughts, thank you all!

[LumenYoung (Lumen Yang)]

Thanks @22rw! Am I correct to understand that I only need to substitute this file in the container with my icon and it should works?

[22rw]

If by substitute you mean having your reverse-proxy serve your own image file whenever the /.client/logo-dock.png file is requested - yes ;D

I don’t think it’s currently (easily) possible to substitute the actual image file inside the container, mainly because there is no separate image file.
In the docker container, the image is just a base64 string somewhere in the silverbullet.js file. You could theoretically edit this file and replace the string with your own base64 encoded image, but this would reset whenever a new image is pulled, so I don’t think the effort is worth it.

[LumenYoung (Lumen Yang)]

Okey I get it. Thanks!