Dark mode toggle button for websites

Dark mode toggle button for websites: what it is for

Dark mode is now standard on phones, and many people expect websites to follow along. This generator builds light and dark themes with CSS variables and prefers-color-scheme, so the site follows the system on its own, plus a button that lets visitors pick a different theme just on your site.

The code comes in three parts: one line for the head that applies the saved choice before the page appears (no flash of the wrong theme), the CSS with color-scheme so fields and scrollbars follow along, and the button with aria-pressed and sun and moon icons.

How to use

1. Choose the light and dark theme colors.
2. Test the button in the preview.
3. Paste the line in the head, then the CSS and the button where they belong.

When to use it

• Blogs and content sites.
• Web apps and dashboards.
• Developer portfolios.

Frequently asked questions

How do I avoid a flash of the light theme on load?

The script that reads the saved choice has to run in the head, before the page appears. The code comes in two parts: one line for the head and the button for the page body.

What does color-scheme do?

It tells the browser whether the page is light or dark, so it also adjusts scrollbars, form fields and the default background. Without it, dark mode ends up with white fields that clash.

Do I need a button if the site already follows the system?

It is not required: with prefers-color-scheme alone, the site already follows the phone or computer theme. The button is useful for people who want a theme different from their system only on your site.

Is it really free?

Yes, 100% free. No sign-up, no subscription and no usage limits. All Tools123 tools are free and run right in your browser.

Similar tools