Dark Mode Detection Free

Demo to preview the settings


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.
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.

Plugin Elements Properties

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

Theme Detector

Detect the system theme.
Image without caption

Element Actions

  1. Check Theme - Check the theme of the system.
    1. Image without caption

Element Events

Dark theme is enabled
This event is triggered when the theme of the system is dark.
Light theme is enabled
This event is triggered when the theme of the system is light.

Element States

Dark theme is enabled
Indicates if the dark mode is enabled.
yes / no

Workflow example

How to detect the system theme

This example presents how to use the plugin element for detecting the system theme.
  1. On the page, it is placed a Theme Detector element.
    1. Image without caption
  1. In the workflow, when the Page is loaded then is called the Check Theme action. And, the result is saved in the β€œget_theme” custom state.
    1. Image without caption
      Image without caption
  1. On the page, the custom state is displayed in the Text element.
    1. Image without caption


Update 17.07.23 - Version 2.3.0

  • Updated description

Update 22.11.22 - Version 2.2.0

  • Description update

Update 31.10.22 - Version 2.1.0

  • Description update

Update 19.12.19 - Version 2.0.0

  • 1.0.1

Update 13.11.19 - Version 1.0.0

  • 1.0