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.

JavaScript

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

new Deck({
  widgets: [
    new ThemeWidget({placement: 'top-left'})
  ]
});

TypeScript

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

new Deck({
  widgets: [
    new ThemeWidget({placement: 'top-left'})
  ]
});

React

import React from 'react';
import DeckGL, {_ThemeWidget as ThemeWidget} from '@deck.gl/react';
import '@deck.gl/widgets/stylesheet.css';

function App() {
  return (
    <DeckGL>
      <ThemeWidget placement="top-left" />
    </DeckGL>
  );
}

Installation

npm install deck.gl
# or
npm install @deck.gl/core @deck.gl/widgets

import {_ThemeWidget as ThemeWidget, type ThemeWidgetProps} from '@deck.gl/widgets';
import '@deck.gl/widgets/stylesheet.css';
new ThemeWidget({} satisfies ThemeWidgetProps);

To use pre-bundled scripts:

<script src="https://unpkg.com/deck.gl@^9.0.0/dist.min.js"></script>
<link href="https://unpkg.com/deck.gl@^9.0.0/dist/stylesheet.css" rel='stylesheet' />
<!-- or -->
<script src="https://unpkg.com/@deck.gl/core@^9.0.0/dist.min.js"></script>
<script src="https://unpkg.com/@deck.gl/widgets@^9.0.0/dist.min.js"></script>
<link href="https://unpkg.com/@deck.gl/widgets@^9.0.0/dist/stylesheet.css" rel='stylesheet' />

new deck._ThemeWidget({});

Types

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.

initialThemeMode ('auto' | 'light' | 'dark')

• Default: 'auto'

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

lightModeLabel (string, optional)

• Default: 'Light Mode'

Tooltip message displayed while hovering a mouse over the widget when light mode is available.

darkModeLabel (string, optional)

• Default: 'Dark Mode'

Tooltip message displayed while hovering a mouse over the widget when dark mode is available.

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