Dark mode by default?

[kangaroo72]

Hi,
I'm running Vaultwarden 2.25.0.
Is it possible, to get the dark mode by default?

Thanks,

Tom

[BlackDex]

If I'm correct this is a per user setting stored within local storage of the browser. I do not think that this is possible. But i haven't checked thoroughly.

[kangaroo72]

yes, you're right. It's a "per user setting". A "force" to dark would be nice :-)

[Masgalor]

Before I can help you with that problem we need to clarify something.
It is highly unlikely you are running vaultwarden 2.25.0, because that version dose not exist, the current stable version is 1.23.1.
What you are referring to is the webvault, a web-client developed by bitwarden, like every other client.

Now that we know that this change has to be made in the client, locate the folder containing the webvault.
There will be one file called index.html and one sso-connector.html.
Both contain the line class="theme_light", change it to class="theme_dark" and clear your browser cache.
Now the client will start in dark mode by default.

[kangaroo72]

Hi @Masgalor. Indeed it's 1.23.1 - I messed that up...
Thanks for your help!!

[BlackDex]

You can do this automatically when using containers by creating a startup script.
See: https://github.com/dani-garcia/vaultwarden/wiki/Starting-a-Container#customizing-container-startup

Create a script in either /etc/vaultwarden.d or as the wiki shows init.sh and use the code example below.
That will change the index.html and sso-connector.html to use have the theme_dark there everytime the container starts.

#!/usr/bin/env sh
sed -i 's#class="theme_light"#class="theme_dark"#' /web-vault/index.html
sed -i 's#class="theme_light"#class="theme_dark"#' /web-vault/sso-connector.html

[Masgalor]

Hey @S1rM0rk3 ,
bitwarden has changed a lot about how themes are applied so it is not easy to keep this workaroung up to date.

The codeblock you posted was working until version 2022.10.0 from there it was neccessary to add

sed -i 's#this.theme=S.Light#this.theme=S.Dark#' /web-vault/app/main.*.js

But this is no longer working since version 2022.12.0, I haven't had time to figure out what needs to be changed now.

[BlackDex]

Looks like there is some more JavaScript which is active.

[Masgalor]

In case someone is waiting for a solution, this is working with 2023.3.0b.

#!/usr/bin/env sh
sed -i 's#class="theme_light"#class="theme_dark"#' /web-vault/index.html
sed -i 's#class="theme_light"#class="theme_dark"#' /web-vault/sso-connector.html
sed -i 's#this.theme=Ct.f.Light#this.theme=Ct.f.Dark#' /web-vault/app/main.*.js

[BlackDex]

It would be better if we could fix the web-vault (Upstream Bitwarden) to use the user preferred mode of course.
Not sure if that has been requested already.

[Fmstrat]

As of today, you don't need to change much, just the default in the global local storage variable. Here's a script I use in the docker container to set a primary theme color and change to the "system" theme (auto-selects light/dark based on system theme):

init.sh:

#!/bin/sh

rm /web-vault/app/*.css.map

THEME_RGB=$(printf "%d %d %d\n" 0x${THEME_COLOR:0:2} 0x${THEME_COLOR:2:2} 0x${THEME_COLOR:4:2})
sed -i "s|6a99f0|${THEME_COLOR}|g" /web-vault/app/*.css
sed -i "s|175ddc|${THEME_COLOR}|g" /web-vault/app/*.css
sed -i "s|106 153 240|${THEME_RGB}|g" /web-vault/app/*.css
sed -i "s|23 93 220|${THEME_RGB}|g" /web-vault/app/*.css

THEME_BG_RGB=$(printf "%d %d %d\n" 0x${THEME_BG_COLOR:0:2} 0x${THEME_BG_COLOR:2:2} 0x${THEME_BG_COLOR:4:2})
sed -i "s|1f242e|${THEME_BG_COLOR}|g" /web-vault/app/*.css
sed -i "s|31 36 46|${THEME_BG_RGB}|g" /web-vault/app/*.css

sed -i "s|this.theme=Ct.f.Light|this.theme=Ct.f.System|g" /web-vault/app/main.*.js

/start.sh

docker-compose.yml:

  vaultwarden-web:
    container_name: vaultwarden-web
    image: vaultwarden/server:alpine
    environment:
      THEME_COLOR: "313131"
      THEME_BG_COLOR: "171717"
      ...
    depends_on:
      - vaultwarden-db
    volumes:
      - ./init.sh:/init.sh
      ...
    command: /init.sh

[kangaroo72]

@Fmstrat you're running this script in your docker-container? Doesn't work for me...

´´´start.sh: 4: Bad substitution´´´

[Fmstrat]

I've updated the comment: #2220 (reply in thread)

You're likely missing the ENV variables. I also added in a BG color.

[info-git]

For me it wasn't the missing env variables, it was the string to rgb conversion that was failing. I'm wondering if it's because it's not bash running the script or something. I did the conversion in bash where it worked, and used the converted strings directly in the script.

THEME_COLOR="FFA428"
THEME_BG_COLOR="009639"
THEME_RGB="255 164 40"
THEME_BG_RGB="0 150 57"

[c4bler]

It seems like to get this working on current version (at least on the login page) this worked for me:

#!/bin/sh
sed -i 's#class="theme_light"#class="theme_dark"#' /web-vault/index.html
sed -i 's#class="theme_light"#class="theme_dark"#' /web-vault/sso-connector.html
sed -i "s|this.theme=Xe.f8.Light|this.theme=Xe.f8.System|g" /web-vault/app/main.*.js

Inside the docker-compose.yml:

volumes:
            - "/opt/vaultwarden/vw-data/:/data/"
            - "/opt/vaultwarden/scripts/init.sh:/etc/vaultwarden.sh"

In case this changes I found the correct string via a grep from inside the docker container:

docker exec -it vaultwarden /bin/bash
grep -r -oE '.{0,20}this.theme=.{0,20}' /web-vault/app

[ghost]

Does this still work? It would be great to have just only dark mode everywhere because my eyes are strained very easily using dark mode and since the browsers i tend to use across devices don't always keep the settings stored locally it would be great to have something server side that i will know regardless of what device i open it on it will be in dark mode. Thanks.

[necaran]

The script for 1.33.0:

#!/bin/sh
# https://github.com/bitwarden/clients/blob/web-v2025.1.1/apps/web/src/index.html#L2
sed -i 's/theme_light/theme_dark/g' /web-vault/*.html
# https://github.com/bitwarden/clients/blob/web-v2025.1.1/apps/web/src/app/core/core.module.ts#L226-L227
sed -i 's/.Light),deps:/.Dark),deps:/g' /web-vault/app/main.*.js

[ghostersk]

This seem to work. But for some reason when I opened the main page in incognito window it still showed as light, I went to check the files if they had updated the code, then I refreshed the page again and it was dark.
Thank you all. I hate light mode.

I made the code as per the Vaultwarden docu:

#!/bin/bash
# /etc/vaultwarden.sh
# https://github.com/dani-garcia/vaultwarden/wiki/Starting-a-Container#customizing-container-startup
echo "Starting Up"
if [ ! -e /.init ]; then
  touch /.init
  # run your init steps...
  # https://github.com/bitwarden/clients/blob/web-v2025.1.1/apps/web/src/index.html#L2
  sed -i 's/theme_light/theme_dark/g' /web-vault/*.html
  # https://github.com/bitwarden/clients/blob/web-v2025.1.1/apps/web/src/app/core/core.module.ts#L226-L227
  sed -i 's/.Light),deps:/.Dark),deps:/g' /web-vault/app/main.*.js
fi

docker compose:

volumes:
      - /opt/settings/vaultwarden:/data
      - /opt/settings/vaultwarden/vaultwarden.sh:/etc/vaultwarden.sh