How to Add Dark Mode to Your Website

With Jotform’s Dark Mode widget, you can let visitors switch between light and dark themes on your website. This gives them more control over how your site appears in different lighting conditions.

Whether you’re creating a blog, portfolio, online store, or business website, the widget makes it easy to offer both viewing options without changing your site’s overall design.

Adding the Dark Mode feature to your website only takes a few steps. Here’s how to set it up:

1. On the top-left side of your Workspace page, click on Create.

2. Then, in the menu that opens up, select Website Widget.

3. Next, in the Search bar in the upper-left corner of Choose Website Widget, enter Dark Mode.
4. Then, at the bottom of the Dark Mode widget, click on Use Widget.

5. Now, in the Widget Properties menu that opens on the right side of Website Widgets, click and hold the slider handle, then drag it left or right to adjust the transition speed between light and dark mode.

6. Next, under the Style tab, customize these properties:
   • Theme Preset — Click on the Downward Arrow icon and select a preset theme to apply to the widget.
   • Corner Radius — Choose the corner style of the widget elements: Square, Rounded, or Circular.
   • Button Size — Click on and hold the slider handle, then drag it to set the width and height of the Dark Mode button.
   • Custom CSS — Toggle this on, and then in the Code Editor below it, enter custom CSS code to apply advanced styling to the widget.

7. Next, under the Layout tab, configure these options:
   • Button Behavior — Choose whether the Dark Mode button stays fixed on the page or appears inline with your content.
   • Button Position — Click on the Downward Arrow icon and select where the Dark Mode button appears on the page.
8. Once everything’s set, in the pink navigation bar at the top of the page, click on Publish.

9. Then, in the Embed section, click on Copy Code, and, if you already know how, paste that into the Embed section on your platform, and you’re good to go.

10. To view embedding instructions for your widget, click on Platforms in the menu on the left side of the page.
11. Next, in the Platforms section on the right, select the platform you want to view embedding instructions for. Or, use the Search bar at the top of the section to find it easily.

12. Then, follow the steps in the How to Embed Your Widget section to add it to your website.

That’s it! Your Dark Mode widget will appear on your website based on how you set it up. Take a look at the screenshot below to see how it’ll look: