Light and Dark Mode

Light and Dark Mode

Indify has two dynamic background modes for all widgets: Dark/Light Mode, or Custom Background Color mode. This article explains the first option, which is only available if the Set background color option is turned off (which it is by default).

On the configuration page for your widget, in the style settings section, you will find a setting called “Dark/Light Appearance”. You may choose between four options:

1. 🌗Light and Dark Mode - → Use system setting
2. 🌗Light and Dark Mode - → Light
3. 🌗Light and Dark Mode - → Dark
4. 🌗Light and Dark Mode - → Do nothing

→ Use system setting

This option will ensure that your widget’s background follows the same color scheme that you have enabled for your system. If your system’s color scheme changes, your background will automatically change as well.

To ensure that your widget always looks seamless, please make sure that the platform containing the widget embed also has its color scheme set to “Use system setting”.

→ Light

This option will always display your widget in light mode, regardless of system setting.

→ Dark

This option will always display your widget in dark mode, regardless of system setting.

→ Do nothing

This option will show the widget as it appears by default, which is light mode. Dark mode can still be enabled from the widget itself, by using the widget’s hover menu.

Check out 🌗Light and Dark Mode - Setting dark or light mode locally to learn more.

Setting dark or light mode locally

When either Use system setting or Do nothing is selected, your widget’s hover menu will show a Dark Mode toggle that can be used to toggle between dark and light mode settings, overriding your current setting. This setting will be stored locally, so you can refresh the page and the Dark Mode setting will remain the same.

Mode-dependent color settings

Many of our widgets offer the ability to customize different colors for certain elements in Dark and Light Mode, such as text color, panel color, digit color, and more. Each field represents the color for that element within that environment.

This feature only appears if the widget has elements whose color can be customized, and if either Use system setting or Do nothing is selected.

On this page

• Light and Dark Mode
• Dynamic background options, explained
• → Use system setting
• → Light
• → Dark
• → Do nothing
• Setting dark or light mode locally
• Mode-dependent color settings