How to Make a Website Dark Mode

Jotform takes the hassle out of adding dark mode to your website with the Dark Mode widget. Give visitors the option to switch between light and dark themes, making your website more comfortable to browse in different lighting conditions.

Whether you’re creating a blog, portfolio, online store, or business website, the Dark Mode widget helps visitors choose the viewing mode that works best for them while creating a more enjoyable browsing experience.

Adding the Dark Mode toggle 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. Now, in the search results, click on Use Widget.

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

6. Next, under the Style tab, customize these properties:
   • Theme preset — Select a predefined dark color theme from the Dropdown menu.
   • Corner radius — Select one of the following options to choose the corner style of the dark mode button:
     • Square — Displays the button with square corners.
     • Rounded — Displays the button with rounded corners.
     • Circular — Displays the button with fully rounded corners.
   • Button Size — Click on and hold the slider handle, then drag it to adjust the width and height of the dark mode button.
   • Custom CSS — Enter custom CSS to further customize the widget’s appearance.

7. Next, under the Layout tab, configure these options:
   • Button Behavior — Select Fixed to keep the dark mode button in a fixed position on the page, or select Inline to display it within your page content.
   • Button Position — Select where you want the dark mode button to appear 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. The screenshot below shows how it looks on a website.