-
Notifications
You must be signed in to change notification settings - Fork 13
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Allow the WebShell dark mode toggle to be disabled #305
Conversation
d911ec5
to
745ecfa
Compare
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
LGTM other than a few tiny nitpicks 👍
- WebShell now looks at the
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.
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 On top of that adding a |
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.