Light Dark Theme Toggle

Instructions

Overview

Add a customizable light-dark theme toggle to your Webstudio site. By default, it follows the user's system preference. Only if the user triggers the toggle does it change the theme to light or dark mode. It is also made for Craft, the official way of building in Webstudio.

Getting Started

Quick Start

1. Click the Copy Component button on the top of the page, and paste the component into your Webstudio site.

2. Copy this code and paste it in your "Project Settings" inside the Custom Code section:

[code-block]<script defer src="https://drevo.b-cdn.net/Library/Custom%20Components/Light%20Dark%20Theme%20Toggle/light-dark-theme-toggle-v1.1.js"></script>

<style> [dv-theme="dark"]{ --foreground-primary: rgba(252, 252, 253, 1); --foreground-secondary: rgba(13, 15, 17, 1); --foreground-accent: rgba(28, 32, 36, 1); --foreground-muted: rgba(196, 196, 196, 1); --foreground-border: rgba(33, 33, 33, 1); --background-primary: rgba(13, 15, 17, 1); --background-secondary: rgba(252, 252, 253, 1); --background-accent: rgba(255, 255, 255, 1); --background-card: rgba(19, 22, 25, 1) } [dv-theme="light"] { --foreground-primary: rgba(13, 15, 17, 1); --foreground-secondary: rgba(252, 252, 253, 1); --foreground-accent: rgba(255, 255, 255, 1); --foreground-muted: rgba(105, 120, 135, 1); --foreground-border: rgba(217, 217, 224, 1); --background-primary: rgba(252, 252, 253, 1); --background-secondary: rgba(13, 15, 17, 1); --background-accent: rgba(28, 32, 36, 1); --background-card: rgba(242, 243, 246, 1) } </style>[/code-block]

How it works

1 - First, you need to set the colors you want for the dark and light themes. In the example above, we used Craft's common variables for best practice. You must set the same CSS variable name for each theme, but one with the color you want for light and the other for dark.

2 - The code automatically sets your site to the system preference theme. If the user visiting your site toggles the trigger, then the code will save their preference, and even after they leave your site, their preference will be saved in local storage.

Toggle Settings

Add these attributes to your elements:

• dv-theme-trigger="button" => For the button that will trigger the theme toggle
• dv-theme-trigger="switch" => For the switch element that will trigger the theme toggle (includes visual state management)
• dv-theme-icon="dark" => Element you want to show when in dark mode
• dv-theme-icon="light" => Element you want to show when in light mode

Switch vs Button Triggers

• Button Trigger: Simple click-to-toggle functionality, ideal for icon buttons or text buttons
• Switch Trigger: Provides visual state feedback with aria-checked and data-state attributes for accessibility and styling. Perfect for toggle switches that need to show their current state visually

Important: Choose only one trigger type per page - either use dv-theme-trigger="button" OR dv-theme-trigger="switch", not both. Using multiple trigger types simultaneously may cause conflicts.

Animation Customization Options

You can add an animation for when your theme is transitioning. Here's an example of a color fading transition:

[code-block]<style> :root{ /* Define transition properties */ --theme-transition-duration: 0.3s; --theme-transition-timing: ease-out; }

/* Apply transitions to elements that should animate during theme changes */ html{ transition: background-color var(--theme-transition-duration) var(--theme-transition-timing), color var(--theme-transition-duration) var(--theme-transition-timing), border-color var(--theme-transition-duration) var(--theme-transition-timing); }

/* You can also add transitions to specific elements that change with theme */ [dv-theme-icon]{ transition: opacity var(--theme-transition-duration) var(--theme-transition-timing), display var(--theme-transition-duration) var(--theme-transition-timing); } </style>[/code-block]

Overall Notes

• The component automatically detects user's system preference
• Persists theme selection using localStorage
• Works with dynamically loaded content
• Adds the dv-theme="light" or dv-theme="dark" attribute to the root element
• Style your website using the [dv-theme="light"] and [dv-theme="dark"] selectors
• Switch triggers automatically manage aria-checked and data-state attributes for enhanced accessibility