Webstudio
Simple Dark Theme Switcher
The easiest way to add dark mode to your Webstudio site.
Prebuilt
color palette. Smart theme switcher. Just plug and play.2
Pallette
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 specifically for Webstudio.
What’s inside:
- 🎨 Smart CSS variable palette – light & dark values built in
- 🌓 Auto / Light / Dark modes – user can switch anytime
- 💾 Local Storage support – remembers user’s choice
- 🖥️ System theme detection – respects OS settings
- 🔄 Real-time sync – updates when system theme changes
- ⚙️ No dependencies – pure HTML, CSS & JS
- ⚡ Webstudio-ready – works out of the box
How it works
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. Copy the
Light Theme
token and paste it into your project’s :root.
2. Add
the
<script>
code from the header and footer of this template. Use Slot for all
pages.
3. Place switchers where you want. Change your
colors to prebuilt colors via variables.
Done!
Your site now supports Light, Dark, and
Auto modes.