Components Color scheme switch
Petal Pro

Color scheme switch

A way for users to toggle light and dark mode.

Installation

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.

<head>
  ...

  <.color_scheme_switch_js />
</head>

Ensure the hook is installed

If you’re using Petal Pro 2.0 (or newer) or Petal Pro 1.8 (or older with the Petal Framework) and have imported the hooks, it should work.

How to access

Membership
$299
-> 
See plans

This comes with Petal Pro. 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.