Dark / Light Mode

1. Copy Dark Mode Toggle Switch

   

2. Set Custom Attribute

   In you Webflow site add a custom attribute with name data-theme and value dark or light to each page's body element.

3. Add Themes CSS

   The following CSS defines the variables for both dark and light themes. By setting the data-theme attribute on the body element, you can easily switch between these themes.

   Add this css code to a global embed, so that it can be loaded in each page and your designer as well.

   <style>
   :root {
     color-scheme: dark light;
   }
   
   body[data-theme="dark"] {
     /* Body */
     --body--color--background: var(--color--neutral--950);
     --body--color--foreground: var(--color--neutral--300);
     /* Border */
     --border--color--light: var(--color--neutral--600);
     --border--color--medium: var(--color--neutral--400);
     --border--color--dark: var(--color--neutral--300);
     /* Font Color */
     --font--color--muted: var(--color--neutral--400);
     --font--color--neutral: var(--color--neutral--100);
     --font--color--primary: var(--color--primary--400);
     --font--color--danger: var(--color--danger--600);
     --font--color--warning: var(--color--warning--600);
     --font--color--success: var(--color--success--600);
     /* Button */
     --button--color--primary--background: var(--color--primary--600);
     --button--color--primary--foreground: var(--color--primary--950);
     --button--color--neutral--background: var(--color--neutral--400);
     --button--color--neutral--foreground: var(--color--neutral--700);
     --button--color--neutral--hover-background: var(--color--neutral--400);
     --button--color--neutral--hover-foreground: var(--color--neutral--900);
     --button--color--neutral--pressed-background: var(--color--neutral--100);
     --button--color--neutral--pressed-foreground: var(--color--neutral--950);
     --button--color--primary--hover-background: var(--color--primary--400);
     --button--color--primary--hover-foreground: var(--color--primary--950);
     --button--color--primary--pressed-background: var(--color--primary--600);
     --button--color--primary--pressed-foreground: var(--color--primary--950);
     --button--color--danger--background: var(--color--danger--600);
     --button--color--danger--foreground: var(--color--danger--950);
     --button--color--danger--hover-background: var(--color--danger--400);
     --button--color--danger--hover-foreground: var(--color--danger--950);
     --button--color--danger--pressed-background: var(--color--danger--300);
     --button--color--danger--pressed-foreground: var(--color--danger--900);
     --button--color--warning--background: var(--color--warning--600);
     --button--color--warning--foreground: var(--color--warning--950);
     --button--color--warning--hover-background: var(--color--warning--400);
     --button--color--warning--hover-foreground: var(--color--warning--950);
     --button--color--warning--pressed-background: var(--color--warning--300);
     --button--color--warning--pressed-foreground: var(--color--warning--900);
     --button--color--success--background: var(--color--success--600);
     --button--color--success--foreground: var(--color--success--950);
     --button--color--success--hover-background: var(--color--success--400);
     --button--color--success--hover-foreground: var(--color--success--950);
     --button--color--success--pressed-background: var(--color--success--300);
     --button--color--success--pressed-foreground: var(--color--success--900);
   }
   
   body[data-theme="dark"] .button_animation {
     display: none;
   }
   
   body[data-theme="light"] .button_animation {
     display: block;
   }
   
   body[data-theme="dark"] .button_animation.is-dark {
     display: block;
   }
   
   body[data-theme="light"] .button_animation.is-dark {
     display: none;
   }
   </style>

4. Theme Toggle Switch CSS

   Here’s the CSS for the toggle switch that allows users to switch between dark and light modes. You can add this to the global embed as well.

   <style>
   .darkmode_toggle-switch:after {
     content: "";
     width: 1.275rem;
     height: 1.275rem;
     position: absolute;
     top: 50%;
     left: 0rem;
     background: linear-gradient(180deg,#ffcc89,#d8860b);
     border-radius: 100rem;
     transform: translateY(-50%);
     transition: left 0.4s, background 0.4s;
   }
   
   .darkmode_input {
     width: 0;
     height: 0;
     visibility: hidden;
   }
   
   .darkmode_input:checked + .darkmode_toggle-switch {
     background: var(--button--color--neutral--hover-background);
     border-color: var(--button--color--neutral--hover-background);
   }
   
   .darkmode_input:checked + .darkmode_toggle-switch:after {
     left: calc(100% - 1.3rem);
     background: var(--button--color--neutral--foreground);
   }
   </style>

5. Storing Theme Preferences

   This script ensures that the user's theme preference is saved in localStorage and applied whenever they visit the site. Add this code to </body> section throughout the site.

   <script>
     const toggleElements = document.querySelectorAll("[data-toggle-theme]");
   
     // Function to apply the theme based on the saved preference
     function applyTheme(theme) {
       document.body.setAttribute("data-theme", theme);
       toggleElements.forEach((element) => {
         element.checked = theme === "dark";
       });
     }
   
     // Load the saved theme from localStorage and apply it
     const savedTheme = localStorage.getItem("theme") || "light";
     applyTheme(savedTheme);
   
     // Add event listener to the checkbox to toggle theme
     document
       .getElementById("darkmode-toggle")
       .addEventListener("change", function () {
         const theme = this.checked ? "dark" : "light";
         //change all instances of dark mode toggle
         toggleElements.forEach((element) => {
           element.checked = this.checked;
         });
         document.body.setAttribute("data-theme", theme);
         localStorage.setItem("theme", theme); // Save the preference in localStorage
       });
   </script>