<aside> ✅ Link to plugin page: https://zeroqode.com/plugin/dark-mode-detection-free-plugin-for-bubble-1689610491515x801011804047830900

</aside>

Demo to preview the settings

<aside> ✅ Demo page: https://ezcodepluginsdemo.bubbleapps.io/version-test/dark_theme_detect_free

</aside>

<aside> ✅ Bubble Editor: https://bubble.io/page?type=page&name=dark_theme_detect_free&id=ezcodepluginsdemo&tab=tabs-1

</aside>

Introduction

Plugin will detect if the user has set their system to use a light or dark color theme/mode.

This is automatic and does not require any user input.

You can also check it using workflow action: Check Theme

If none is detected or feature is not supported then light mode will be triggered as default.

<aside> ⚠️ This feature is supported by most modern browser on PC and mobile. Support will also depend on whether or not the OS has support for a light/dark theme preference. Set brightness action have a check box Save to localStorage when it is checked the choosed brightness will be saved to localStorage so on next load the page will already have it.

</aside>

banner-need-help-last.webp

Plugin Elements Properties

This plugin has one visual element which can be used on the page: Theme Detector.

Theme Detector

Detect the system theme.

Untitled

Element Actions

  1. Check Theme - Check the theme of the system.

    Untitled

Element Events