ThemeWidget (Experimental)

This widget changes the theme of deck.gl between light mode and dark mode. Click the widget to toggle the theme.

info

• The ThemeWidget is mainly intended for minimal applications and to help developers test theme changes. More advanced applications that already support theming in their non-Deck UI will likely want to control change of deck themes using the same mechanism that is used for the remainder of their UI.

Usage

import {_ThemeWidget as ThemeWidget} from '@deck.gl/widgets';
import {Deck} from '@deck.gl/core';

new Deck({
  widgets: [new ThemeWidget()]
});

ThemeWidgetProps

The ThemeWidget accepts the generic WidgetProps and:

lightModeTheme (object, optional)

• Default: Light Glass Theme

Styles for light mode theme.

darkModeTheme (object, optional)

• Default: Dark Glass Theme

Styles for dark mode theme.

initialTheme ('auto' | 'light' | 'dark')

• Default: 'auto'

Set the initial theme. 'auto' inspects window.matchMedia('(prefers-color-scheme: dark)').

lightModeLabel (string, optional)

• Default: 'Light Theme'

Tooltip message displayed while hovering a mouse over the widget when out of fullscreen.

darkModeLabel (string, optional)

• Default: 'Dark Theme'

Tooltip message displayed while hovering a mouse over the widget when fullscreen.

Styles

Name	Type	Default
--icon-sun	SVG Data Url	Material Symbol Add
--icon-moon	SVG Data Url	Material Symbol Remove

Source

modules/widgets/src/theme-widget.tsx