logo isn't changeable anymore

[celevra]

Vaultwarden Support String

Hi,

in the new 2025.1.1 Webinterface the Logo is directly in the source code as svg and with that we can't change it anymore.
before that change, it was easy as:

      -v /docker/vaultwarden/icon-white.png:/web-vault/images/icon-white.png \
      -v /docker/vaultwarden/icon-white.png:/web-vault/images/icon-dark.png \
      -v /docker/vaultwarden/[email protected]:/web-vault/images/[email protected] \
      -v /docker/vaultwarden/[email protected]:/web-vault/images/[email protected] \

please implement a setting to change the logo or go back to files.
Logos have something todo with trust. We want to see that we are on the right server, with help of our logos.
It has nothing todo with licenses and copyright texts in the footer.

regards

Vaultwarden Build Version

1.33.0

Deployment method

Official Container Image

Custom deployment method

No response

Reverse Proxy

nginx

Host/Server Operating System

Linux

Operating System Version

ubuntu

Clients

Web Vault

Client Version

No response

Steps To Reproduce

1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. Click on '...'
5. Etc '...'

Expected Result

Logos should be changeable

Actual Result

logos not changeble because they are hardcoded

Logs

Screenshots or Videos

No response

Additional Context

No response

[stefan0xC]

Well, that has been changed upstream, so this is not something we can easily revert ourselves.
If it's that important for you, you can still build the web-vault yourself to change the logo.

Or alternatively you can also write a script that replaces the SVGs when Vaultwardens starts. (This might be a bit tricky but should be possible, I think.)

[BlackDex]

Checkout https://github.com/dani-garcia/vaultwarden/wiki/Customize-Vaultwarden-CSS

It might need some changes though for the latest web-vault, but i think the icon change should work.

[stefan0xC]

Checkout https://github.com/dani-garcia/vaultwarden/wiki/Customize-Vaultwarden-CSS

It might need some changes though for the latest web-vault, but i think the icon change should work.

Changing app-login img.logo to app-root img.new-logo-themed changes the PNG logo, but that's only visible for a split second until it gets replaced by the embedded SVG. So that's not working anymore.

update: Oh, but the ones below seem to work, but crudely (by not embedding the SVG the fill colors won't be dependent on the theme...)

update 2: I've updated the selectors and made it so that only the top left logos are changed.

[ecesarini]

If it could be useful, I've been able to custom my instance using these selectors:

/* LOGIN PAGE */
/* Use a custom top left logo on login and locked screen page */
auth-anon-layout > main > a > bit-icon > svg {
  display: none !important;
}
auth-anon-layout > main > a bit-icon::before {
  display: block;
  content: "" !important;
  width: 175px !important;
  height: 36px !important;
  background-image: url(../images/my_logo.svg) !important;
  background-repeat: no-repeat !important;
  background-size: contain;
}

/* Use a custom login logo on login and locked screen page */
auth-anon-layout > main > div bit-icon > svg {
  display: none !important;
}

auth-anon-layout > main > div bit-icon::before {
  display: block;
  content: "" !important;
  width: 100% !important;
  height: 4.5em !important;
  background-image: url(../images/login_logo.png) !important;
  background-repeat: no-repeat !important;
  background-size: contain;
}


/* DASHBOARD */
/* Change vw dashboard logo */
#bit-side-nav > bit-nav-logo svg {
  display: none !important;
}
#bit-side-nav > bit-nav-logo::before {
  display: block;
  content: "" !important;
  width: 100% !important;
  height: 5.5em !important;
  background-image: url(../images/my_logo.png) !important;
  background-repeat: no-repeat !important;
  background-size: contain;
  margin: 5% 0 0 10% !important;
}

I'll take advantage of this topic to ask a question:
Is there a simple way to hook the background color of password-manager gui? I tried some selectors but it partially works. It doesn't seem trivial to change color style homogeneously with few rules.

[Sir-IT-Papi]

@ecesarini any advice on how I can get this going. I'm a total newbie and don't know where to start to make an hbs file

edit: I just found out where to find the file now to edit it.

just mounted the image to the container and changed the images/"My imagename".png in the hbs file but nothing

[smile2008]

please read this:
https://github.com/dani-garcia/vaultwarden/wiki/Customize-Vaultwarden-CSS

[CSpencerLTD]

@smile2008 I still don't get how to change the main logo on the login page :( I've replaced the other logo's but cannot figure out how to change that one.

[nixielectra]

Hey @CSpencerLTD, I'm able to change the main logo by following @BlackDex and @ecesarini advice up there.

1 - mount the svg
- ./images/:/web-vault/images/custom/

2 - hbs file

auth-anon-layout > main > div bit-icon > svg {
  display: none !important;
}

auth-anon-layout > main > div bit-icon::before {
  display: block;
  content: "" !important;
  width: 128px !important;
  height: 128px !important;
  background-image: url(../images/custom/logo.svg) !important;
  background-repeat: no-repeat !important;
  background-size: contain;
}

result

[celevra]

thx @ALL

worked for me this way:

/* top left login screen */
auth-anon-layout > main bit-icon > svg {
  display: none !important;
}

auth-anon-layout > main bit-icon::before {
  display: block;
  content: "" !important;
  width: 50px !important;
  height: 50px !important;
  background-image: url(../images/logo.png) !important;
  background-repeat: no-repeat !important;
  background-size: contain;
}

/* top left */
bit-nav-logo > div bit-icon > svg {
  display: none !important;
}

bit-nav-logo > div bit-icon::before {
  display: block;
  content: "" !important;
  width: 50px !important;
  height: 50px !important;
  background-image: url(../images/logo.png) !important;
  background-repeat: no-repeat !important;
  background-size: contain;
}

/* loading */
app-root img.new-logo-themed {
  width: 50px !important;
  height: 50px !important;
  content: url(../images/logo.png) !important;
}

/* login form */
auth-anon-layout > main > div > div bit-icon > svg {
  display: none !important;
}

auth-anon-layout > main > div > div bit-icon::before {
  display: block;
  content: "" !important;
  width: 128px !important;
  height: 128px !important;
  background-image: url(../images/logo.png) !important;
  background-repeat: no-repeat !important;
  background-size: contain;
}

[CSpencerLTD]

Where in the hbs file would I add that?

Just like this?

/*RESIZE ONLY THE LOGO */
auth-anon-layout > main > div > div.tw-max-w-28

[stefan0xC]

Cf. #5454 (reply in thread)

[CSpencerLTD]

@stefan0xC That has worked perfectly, thankyou :)

Once logged in, The Vaultwardem logo is visible

What would I need to add to my hbs file to replace that?

Thanks for your assistance :)

[stefan0xC]

That's explained in the wiki page linked above #5454 (comment).

[CSpencerLTD]

@stefan0xC yep, this is now working perfectly.

Thanks for your assistance