Password Pusher supports 26 themes out of the box. These themes are taken directly from the great Bootswatch project and are unmodified.

As such, themes mostly work although there may be a rare edge cases where fonts may not be clear or something doesn’t display correctly. If this is the case you can add custom CSS styles to fix any such issues. See the next section on how to add custom styling.

—> Checkout the Themes Gallery!

The Bootswatch themes are licensed under the MIT license.

Configuring a Theme

To specify a theme for your Password Pusher instance, you must set two environment variables:the PWP__THEME environment variable to specify the theme and PWP_PRECOMPILE=true environment variable to have CSS assets recompiled on container boot.

Warning: Make sure to set both PWP__THEME=<name> and PWP_PRECOMPILE=true for the selected theme to work. This will recompile assets on container boot with the new theme settings.

Environment Variable Description Possible Values
PWP__THEME Theme used for the application. ‘cerulean’, ‘cosmo’, ‘cyborg’, ‘darkly’, ‘flatly’, ‘journal’, ‘litera’, ‘lumen’, ‘lux’, ‘materia’, ‘minty’, ‘morph’, ‘pulse’, ‘quartz’, ‘sandstone’, ‘simplex’, ‘sketchy’, ‘slate’, ‘solar’, ‘spacelab’, ‘superhero’, ‘united’, ‘vapor’, ‘yeti’, ‘zephyr’
PWP_PRECOMPILE Forces a rebuild of the theme CSS on boot. true

Note: See the Themes Gallery for examples of each available theme.

Warning: Since the theme is a boot level selection, the theme can only be selected by setting the PWP__THEME environment variable (and not modifying settings.yml).

So to set the quartz theme for a Docker container:

docker run --env PWP__THEME=quartz --env PWP_PRECOMPILE=true -p "5100:5100" pglombardo/pwpush:latest

or alternatively for source code:

export PWP__THEME=quartz
bin/pwpush asset:precompile # manually recompile assets
bin/pwpush server

How to Precompile CSS Assets

Password Pusher has a pre-compilation step of assets. This is used to fingerprint assets and pre-process CSS code for better performance.

If using Docker containers, you can simply set the PWP_PRECOMPILE=true environment variable. On container boot, all assets will be precompiled and bundled into /assets.

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.

To manually precompile assets run bin/pwpush assets:precompile.

Adding an entirely new theme from scratch

The PWP__THEME environment variable simply causes the application to load a css file from app/assets/stylesheets/themes/{$PWP__THEME}.css. If you were to place a completely custom CSS file into that directory, you could then set the PWP__THEME environment variable to the filename that you added.

For example:

Add app/assets/stylesheets/themes/mynewtheme.css and set PWP__THEME=mynewtheme.

This would cause that CSS file to be loaded and used as the theme for the site. Please refer to existing themes if you would like to author your theme for Password Pusher.

Remember that after the new theme is configured, assets must be precompiled again. See the the previous section for instructions

Updated: