Custom CSS logos for light/dark mode

[pixelshrink]

Hi, it would be great if we could update the instructions at https://github.com/dani-garcia/vaultwarden/wiki/Customize-Vaultwarden-CSS to account for using different logos for light/dark mode please.

[BlackDex]

Please feel free to do so.

[pixelshrink]

Sorry, I haven't figured that out so if anyone has it would be great to add that.

[stefan0xC]

The dark theme elements can be targeted via .theme_dark so you can probably just duplicate everything and prepend this to the selectors. I have not tested it but as far as I know the selectors with an additional class would have a higher specificity so they should take precedence.

[stefan0xC]

Instead of duplicating everything you can also use a feature of Sass to prepend the selector only to overwrite the relevant image, for example

/* --- Login Screen --- */
auth-anon-layout bit-landing-header {
  bit-svg {
    /* Hide original SVG */
    > svg { @extend %vw-hide; }

    /* Inject Custom Logo */
    &::before {
      content: "";
      display: block;
      content: "";
      width: 100%;
      height: 42px;
      background: $logo-lightmode no-repeat center;
      .theme_dark & {
        background: $logo-darkmode no-repeat center;
      }
    }
  }
}

I will update the wiki page eventually.