10

Customize Vaultwarden CSS

Jorge de Araujo edited this page 2025-02-01 16:48:15 +01:00

Table of Contents

• Customize Vaultwarden CSS

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:

/* Hide `Authenticator app` 2FA (First item of the list) */
app-two-factor-setup ul.list-group.list-group-2fa li.list-group-item:nth-child(1) {
  @extend %vw-hide;
}

/* Hide `YubiKey OTP security key` 2FA (Second item of the list) */
/* Note: This will also be hidden automatically if the Yubikey config is net set */
app-two-factor-setup ul.list-group.list-group-2fa li.list-group-item:nth-child(2) {
  @extend %vw-hide;
}

/* Hide `Duo` 2FA (Third item of the list) */
app-two-factor-setup ul.list-group.list-group-2fa li.list-group-item:nth-child(3) {
  @extend %vw-hide;
}

/* Hide `FIDO2 WebAuthn` 2FA (Fourth item of the list) */
app-two-factor-setup ul.list-group.list-group-2fa li.list-group-item:nth-child(4) {
  @extend %vw-hide;
}

/* Hide `Email` 2FA (Fifth item of the list) */
/* Note: This will also be hidden automatically if email is not enabled */
app-two-factor-setup ul.list-group.list-group-2fa li.list-group-item:nth-child(5) {
  @extend %vw-hide;
}

/* Use a custom login logo */
app-root img.new-logo-themed {
	content: url(../images/my-custom-login.logo.png) !important;
}

/* 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-custom-global-logo.png) !important;
  background-repeat: no-repeat !important;
  background-size: contain;
}

/* Use a custom top left logo different per vault/admin */
app-user-layout bit-nav-logo bit-icon > svg,
app-organization-layout bit-nav-logo bit-icon > svg {
  display: none !important;
}
app-user-layout bit-nav-logo bit-icon::before,
app-organization-layout bit-nav-logo bit-icon::before {
  display: block;
  content: "" !important;
  width: 200px !important;
  height: 50px !important;
  background-repeat: no-repeat !important;
  background-size: contain;
}
app-user-layout bit-nav-logo bit-icon::before {
  background-image: url(../images/my-custom-password-manager-logo.png) !important;
}
app-organization-layout bit-nav-logo bit-icon::before {
  background-image: url(../images/my-custom-admin-console-logo.png) !important;
}

FAQs

1. FAQs
2. Audits
3. Supporting upstream development

Troubleshooting

1. Logging
2. Bitwarden Android troubleshooting

Container Image Usage

1. Which container image to use
2. Starting a container
3. Using Docker Compose
4. Using Podman
5. Updating the vaultwarden image

Reverse Proxy

1. Proxy examples
2. Using an alternate base dir (subdir/subpath)

HTTPS

1. Enabling HTTPS
2. Running a private vaultwarden instance with Let's Encrypt certs

Configuration

1. Overview
2. Enabling admin page
3. SMTP configuration
4. Disable registration of new users
5. Disable invitations
6. Enabling WebSocket notifications
7. Enabling Mobile Client push notification
8. Other configuration

Database

1. Using the MariaDB (MySQL) Backend
2. Using the PostgreSQL Backend
3. Running without WAL enabled
4. Migrating from MariaDB (MySQL) to SQLite

Security

1. Hardening Guide
2. Password hint display
3. Enabling U2F and FIDO2 WebAuthn authentication
4. Enabling YubiKey OTP authentication
5. Fail2Ban Setup
6. Fail2Ban + ModSecurity + Traefik + Docker

Performance

1. Changing the API request size limit
2. Changing the number of workers

Customization

1. Translating the email templates
2. Translating admin page
3. Customize Vaultwarden CSS
4. Disabling or overriding the Vault interface hosting

Backup

1. General (not docker)
2. Backing up your vault

Development

1. Building binary
2. Building your own docker image
3. Git hooks
4. Differences from the upstream API implementation

Alternative deployments

1. Pre-built binaries
2. Creating a systemd service
3. Third-party packages
4. Deployment examples
5. Disable the admin token

Other Information

1. Importing data from Keepass or KeepassX
2. Changing persistent data location
3. Syncing users from LDAP
4. Caddy 2.x with Cloudflare DNS
5. Logrotate example