Closed notthetup closed 9 months ago
Technically this could conflict with another component which uses toplevel light / dark class attributes for some other purpose. Super unlikely, of course, and probably not worth changing, but it does trigger some voices in my brain...
Indeed, there is no other way to do this other than assume that the parent will send the postMessage
at initialization. There are lots of issues there as well with things being loaded asynchronously.
On top of that adding a class
to the html
is pretty rare and I've only seen frameworks do it for this purpose. So I think we should be safe for now.
We added a toggle button for Light/Dark mode on the fjåge Web Shell. However, many modern web frameworks support dark mode, and it's common to embed the WebShell as an iframe inside web apps made from such a framework.
So we add two features to WebShell.
class
attribute on the parentHTML
element and if it finds alight
ordark
class attribute uses that as a hint to hide its toggle button and use the parent element's mode (light/dark) as it's own mode.iframe
calledhideModeToggle
If that's set to true, then it also hides its toggle button.window.postMessage
API with atheme
property which defines the theme to be eitherlight
ordark
. This allows the container web app to update the WebShell that the theme has changed.Finally, we updated the button style for the toggle button.