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