Ex12: Dark theme support

You can add different icons for light and dark themes.

Usually we pass an image encoded as base64 to img. This can also be an absolute image URL. But we can also pass an object, that contains two images with the keys LIGHT and DARK for light and dark themes respectively.

1this.adapter.attachConfig({
2 POST: (ctx) =>
3 button({
4 initial: 'DEFAULT',
5 DEFAULT: {
6 label: 'Injected Button',
7 img: {
8 LIGHT: LIGHT_IMG,
9 DARK: DARK_IMG,
10 },
11 exec: () => {
12 console.log(ctx);
13 alert('Hello, Themes!');
14 },
15 },
16 }),
17});

Also ctx contains theme parameter, which can be 'LIGHT' or 'DARK'. This information is determined by the adapter and can be used in the dapplet-feature or in the overlay.

The complete code for this example can be found here: ex12-dark-theme-support.