Customize Vaultwarden CSS
[!IMPORTANT] This functionality is only available in v1.33.0 and later releases.
Since version v1.33.0 you can modify the CSS which Vaultwarden previously embedded in the web-vault.
This way it makes it more easier for users to tweak the style and layout or even hide items.
To modify the CSS you need to add a templates directory in your data directory, or provide the correct path via the TEMPLATES_FOLDER environment variable.
Within this directory you need to create another directory called scss which will hold the file(s) for modifying the stylesheet Vaultwarden will serve.
There are two files you can place here:
-
user.vaultwarden.scss.hbs
This file is the file you want to edit and add your custom styles to. -
vaultwarden.scss.hbs
This file should not exist, since it will overwrite the built-in defaults.
Only override this if you really know what you are doing!
.
├── templates
│ └── scss
│ ├── user.vaultwarden.scss.hbs
│ └── vaultwarden.scss.hbs
Some examples which you can place inside user.vaultwarden.scss.hbs:
/* File location: /data/templates/scss/user.vaultwarden.scss.hbs */
/* --- Variables --- */
/* You can set different logos for the Vault (User) and the Admin Console (Org) */
$logo-default: url('/vw_static/logo-gray.png');
$logo-admin: url('/vw_static/logo-gray.png');
/* Sidebar Customization */
$sidebar-width: 15rem; /* Set this to match your logo width if needed */
/* --- Mixins --- */
@mixin hide-element { display: none !important; }
/* --- Hiding 2FA Providers --- */
/* 0: Authenticator App, 1: Email, 2: Duo, 3: YubiKey OTP, 7: FIDO2 WebAuthn */
.providers-2fa-0, .providers-2fa-1, .providers-2fa-2, .providers-2fa-3, .providers-2fa-7 {
@include hide-element;
}
/* --- Loading Screen --- */
app-root img.new-logo-themed { content: $logo-default !important; }
/* --- Login Screen --- */
auth-anon-layout bit-landing-header {
bit-icon {
/* Hide original SVG */
> svg { @include hide-element; }
/* Inject Custom Logo */
&::before {
display: block !important;
content: "" !important;
width: 100% !important;
height: 42px !important;
background: $logo-default no-repeat center left !important;
background-size: contain !important;
}
}
}
/* --- Dashboard Sidebar --- */
bit-nav-logo {
/*
Apply if you want logo to be less cropped when minimized
if you have a logo like the one Vaultwarden and Bitwarden have
*/
/* > div { padding-right: 2px !important; } */
bit-icon {
> svg { @include hide-element; }
&::before {
display: block !important;
content: "" !important;
width: 100% !important;
height: 42px !important;
background-repeat: no-repeat !important;
background-size: auto 42px !important;
background-position: center left !important;
}
}
}
/* --- Dashboard Sidebar --- */
app-user-layout bit-nav-logo bit-icon::before { background-image: $logo-default !important; }
app-organization-layout bit-nav-logo bit-icon::before { background-image: $logo-admin !important; }
/* --- Sidebar Layout & Logic --- */
#bit-side-nav {
/*
Only override width if it matches the default '18rem' inline style.
This ensures we don't break the 'Collapsed' state (4.5rem) or manual resizes.
*/
&[style*="18rem"] { max-width: $sidebar-width !important; }
/*
When sidebar is collapsed (width is usually 4.5rem), hide the custom logo
so it doesn't look broken or clipped.
*/
&[style*="4.5rem"] {
bit-nav-logo bit-icon::before { display: none !important; }
/*
Optional: Show original icon again when minimized?
Remove the comment below to enable:
*/
/* bit-nav-logo bit-icon > svg { display: block !important; } */
}
}
Non scrolling search filter: (tested with 'Stylus' browser extension)
/*
Make the "Filter" box fixed, so only the list of entries is scrolling.
Allow to always see what you filtered for and quickly access the search filter without scrolling back to the top.
*/
#main-content {
/*Edit 2025.09.12*/
contain: none;
}
#main-content > app-vault > .tw-flex .tw-basis-1\/4
{
position: fixed;
width: calc(25% - 55px);
}
#main-content > app-vault > .tw-flex .tw-basis-3\/4
{
position: relative;
left: calc(25% + 10px);
}