BugDumpbeta
Back to changelog

The widget now follows your app's theme toggle

vSDK 0.0.39New featureDenis Povarov

The widget's theme used to be fixed the moment it started. A site with its own light/dark switch could pass the right theme on page load, but when a user flipped the switch, the widget stayed in the old colors until the next reload.

setTheme() changes it in place:

JavaScript 
bugdump('setTheme', 'dark'); // script tag
TypeScript 
Bugdump.getInstance()?.setTheme('dark'); // npm

It takes light, dark, or auto and applies immediately, including to a panel that is already open. Through the command queue it is safe to call before the script has finished loading. Wire it to your theme toggle and the widget follows your app instead of the operating system.

The screenshot editor follows the theme too. The annotation editor used to ignore the theme option and always follow the OS, so data-theme="dark" on a machine set to light mode gave you a dark panel and a light editor. It now matches the widget.

Upgrading

  • Script tag from bugdump.com: nothing to do — latest.js already has it.

  • npm: update to @bugdump/sdk 0.0.39.

  • Self-hosted or proxied: replace your copy of latest.js.

The theme option and data-theme attribute are unchanged. They still set the starting theme, and they are still the way to get it right on the first paint — use them together with setTheme().

Examples for React, Vue, and plain JavaScript are in Matching the widget to your app's theme, and the reasoning behind the design is in Dark Mode for Embedded Widgets.