Pugpig Bolt now has a dark mode feature that can be added to your app settings page.

As shown in the screenshots below, there are 3 options:

1. Use system settings, which will mimic your phone's light/dark mode settings
2. Light
3. Dark

Everything in the app which can be styled normally can also have its own dark mode styling, from toolbars and settings pages to timelines and HTML content.

As with all other app changes, adding dark mode to settings would need a new app config as would updating the app container and any settings pages to support dark mode. Dark mode CSS will be automatically applied to HTML content coming from the Pugpig Express CMS (Minimal theme only). It is likely if CSS already exists that additional dark mode styling will need to be applied to handle the custom CSS on the template.

Embedded Web Views

The app sets the appropriate information to support the prefers-color-scheme media query (https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme). We strongly recommend your website uses media queries to detect dark mode (rather than custom Javascript).

Accessibility

It's important to factor in colour contrast for accessibility when dark mode is enabled. It is common that brand colours may not pass accessibility testing when used in conjunction with a darker background colour. There are many online tools available to help you test different combinations of colours - we like Colour Contrast Checker. 

Please reach out to Pugpig Support, or your Customer Success Manager if you'd like to know more about dark mode or are interested in adding it to your app.