Light and Dark Modes for Web Apps

MATLAB® Web App Server™ supports rendering web apps according to the user's desktop theme, which can be either 'dark' or 'light'. By default, if an app designer has not specified a theme, the app adopts the user's current desktop theme. However, app designers can enforce a specific theme using properties available in App Designer.

When creating an app in App Designer, the app.UIFigure element has two key properties: Theme and ThemeMode.

Theme

This property specifies the visual theme of the app. Users can set it to 'light' or 'dark', with these string values resolving to GraphicsTheme objects. This ensures all components within the app adopt colors and styles consistent with the selected theme.

ThemeMode

This property determines how the theme is applied. There are two options: 'auto' and 'manual'.

  • auto: Automatically applies the desktop's current theme to the app. This setting ensures synchronization with the user's system-wide theme preferences. In this mode, any manual settings to the Theme property are overridden by the system's theme.

  • manual: Allows the user to explicitly specify a theme for the app, independent of the desktop's settings. This mode provides flexibility for developers who wish to enforce a particular theme.

When ThemeMode is set to 'auto', the application automatically adjusts its theme to match the desktop's theme. In this scenario, any manual attempt to set the Theme property to 'dark' or 'light' is ignored, as the system's theme takes precedence. To enforce a specific theme, set ThemeMode to 'manual' and specify the desired Theme.

Set Theme and ThemeMode Properties in App Designer

To set Theme and ThemeMode in App Designer:

  1. Select app.UIFigure from the Component Browser in App Designer.

  2. Navigate to the Window Appearance section.

  3. Click the drop-down menu next to Theme and choose either light or dark for your preferred theme.

  4. Find the ThemeMode drop-down just below the Theme setting and select either auto for system-based adjustment or manual for manual control.

See Also

(MATLAB)