Force light theme

[jstilwell]

🚀 Feature Request

A setting toggle to force either light or dark themes.

🔈 Motivation

I understand that the theme is decided via user preference, but I would like to be able to force the light theme in a production environment because it looks more professional.

[github-actions]

Hello @jstilwell, thanks for contributing to the Password Pusher community! We will respond as soon as possible.

[pglombardo]

Hi @jstilwell - fair request. You will be able to disable this with the custom CSS option that will be added in #824

An environment variable toggle would be nice though. I'll see what we can do. Thanks for filing!

[pglombardo]

Hi @jstilwell,

So now that themes support is out, the best way to enforce just a light theme is to use one of the custom themes. They don't have a dark mode.

If you want to further customise, you can add custom CSS to make some overrides.

I hope this helps - let me know!

[L041S]

Hello, I’m trying to achieve this with custom css. I’m using docker and added the PWP_PRECOMPILE=true and a —env with my custom.css location but the dark theme is still there. I added

:root {
  color-scheme: only light;
}

in this file. Is it the wrong code ?

[pglombardo]

Hi @L041S - I tried your CSS as well and couldn't get it to work either. I also tested directly in the browser console - the CSS doesn't affect the application CSS.

I then tried:

/* Firefox */
@media (prefers-color-scheme: dark) {
    :root {
        color-scheme: light;
    }
}

/* Chrome */
@media (forced-colors: active) {
    :root {
        color-scheme: light;
    }
}

also with no affect. If there was a magic CSS snippet that could disable dark mode, adding it to custom.css would be the right move...

[kayvanaarssen]

Any news on this? An environment variable to specify an other theme as Dark mode would be nice.
Now you can only set one theme
Would be nice that for the same as the Logo for example you can select the Light Theme and Dark Theme.

Thanks!

[pglombardo]

That would be a good addition. Right now the themes are stable but out of date. Bootstrap has release new versions and our themes have to be updated. I need a good weekend to fix this but haven't had a chance yet. It's high on the list though because the longer I wait, the farther we fall out of sync with bootstrap.

The core issue is in #1377 - from there we can potentially make the dark theme optional via configuration.

Having two different themes for light and dark is possible but more challenging. It needs investigation.

[kayvanaarssen]

Thanks! Awesome you are so involved!
Also making 2 themes work. Don't know how its done not. But should not be so hard maybe only when using the precompile option? I understand your consern / issue. It needs to work flawlessly

[ravitej-pudi]

Any updates on this, I'm running this on Azure Web App using the docker container method, and I can't seem to be able to change the theme to anything other than the dark(default), by setting the PWP_PRECOMPILE=true, the container goes into a restart loop and never starts up. I can only get the container backup and running is by disabling PWP_PRECOMPILE by setting it to false, which goes back to the default theme. I've attached the logs from the container 2024_08_13_lw0sdlwk000A4Q_docker.log

[pglombardo]

Hi @ravitej-pudi - two things:

You're using the deprecated pwpush-ephemeral container. See the docs on how to migrate to the pwpush container.

Re: precompiling

I would bet that your container health checks are too short. See this note from the documentation here:

Note: Precompiling all application assets for a new theme on container boot can add 30-90 seconds to the boot process (depending on the system). Make sure to allow this time in your health checks before declaring the container as unresponsive.

If you increase the container health check wait times, the container should startup up after pre-compilation is done.

[ravitej-pudi]

Thanks for the quick response @pglombardo, yes indeed, I was still on the old version, I went ahead and updated to the latest. I also set the website container start time limit to more than 200, giving it enough time to precompile the theme and it loads up perfectly. 👍

[pglombardo]

Just an update here as I'm going through past issues. If you choose a theme without a dark mode, then of course light mode is enforced by default.

https://docs.pwpush.com/docs/rebranding/#gallery

I don't have a comprehensive list of which themes support dark mode but I just tried journal and it is a light only theme as an example.