Components Color scheme switch
Petal Framework

Color scheme switch

A way for users to toggle light and dark mode.


Install the Javascript

For this to work the Javascript must be inline inside the <head>. If you try and load it from an external file there can be a flash of the wrong color scheme. eg if in dark mode it might flash white before turning dark.


  <.color_scheme_switch_js />

Ensure the hook is installed

If you’re using Petal Framework and have imported the hooks, it should work.

How to access

See plans

This comes with the Petal Framework private hex package. Purchase a membership to get access to this package. It can be used with any Phoenix project. Post-expiration, you'll retain access but won't be eligible for updates from newer versions.