theme-widget.md

import BrowserOnly from '@docusaurus/BrowserOnly'; import {WidgetPreview} from '@site/src/doc-demos/widgets'; import {_ThemeWidget} from '@deck.gl/widgets';

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

{() => }

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

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

ThemeWidgetProps

The ThemeWidget accepts the generic WidgetProps:

• id (default 'theme') - Unique id for this widget
• placement (default 'top-left') - Widget position within the view relative to the map container
• viewId (default null) - The viewId prop controls how a widget interacts with views.
• style (default {}) - Additional inline styles on the top HTML element.
• className (default '') - Additional classnames on the top HTML element.

lightModeTheme (object, optional) {#lightmodetheme}

Styles for light mode theme.

Default: Light Glass Theme

darkModeTheme (object, optional) {#darkmodetheme}

Styles for dark mode theme.

Default: Dark Glass Theme

initialTheme ('auto' | 'light' | 'dark' | 'none') {#initialtheme}

Set the initial theme. 'auto' inspects window.matchMedia('(prefers-color-scheme: dark)'), and none prevents the widget from changing the theme on-mount.

Default: 'auto'

lightModeLabel (string, optional) {#lightmodelabel}

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

Default: 'Light Theme'

darkModeLabel (string, optional) {#darkmodelabel}

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

Default: 'Dark Theme'

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