Webstudio Dark Theme Switcher
The easiest way to add dark mode to your Webstudio site.
Smart theme switcher. Just plug and play. Color Pallette
This website is using Craft method for color naming.
But you can use whatever you want.
Light Theme by Default.
Dark Theme become active by adding .dark-theme class.
Different types of switchers:
List of text titles
Only current theme text. Switch on click.
List of Icons
Only current theme icon. Switch on click.
What’s inside:
How it works
- On your first visit, the theme is set to Auto.
- In Auto mode, the website matches your device’s light or dark theme.
- If you switch to Light or Dark, your choice is saved for future visits.
- Your theme stays the same across all pages of the site.
Use it as a starting point – or plug it into your existing project.
option A
Starting from this template
No setup needed.
The color tokens are already connected in :root, and the theme switcher code is in the header and footer. Place switchers where you want.
Just start building your site – dark mode will work out of the box.
option b
Adding to your existing project
1. Go to the Global Root
2. Copy OP Colors Light Theme tokens and paste it into your project’s :root.
3. Grab the <script> codes from the header and footer of this template. Use Slot for all pages.
4. Place switchers where you want.
5. Change your projects colors to prebuilt colors via variables.
Done!
Your site now supports Light, Dark, and Auto modes.
Dark mode shouldn't be hard
Adding dark mode often means hours of setup, complex scripts, and unexpected behavior across devices.
This template solves it!
With a clean color system and drop-in theme logic – designed for Webstudio.
Just start building your site – dark mode will work out of the box.