December 31, 2023
Updated!

Light/Dark Theme Toggle Using Webflow Variables Feature

Webflow
Design
JavaScript

Overview

Having a light/dark theme toggle can be a powerful accessibility feature in your website. In this article I am going to show you how you can toggle light/dark theme easily using JavaScript to manipulate color variables.

Understanding Variables

image #1 - variables in Webflow

Imagine we have only 2 variables e.g. black and white. as shown in the image. how is this translated in CSS? Variables are attached to your root. In HTML, the root element is <html>. It is the outermost element of an HTML document and contains all the content on the web page.

Now, if we are using variables across the website for all coloring then it's easy to apply dark-mode with a simple trick. We can just manipulate these variables to the dark-mode version. e.g. lightmode: (black text on white bg) -> darkmode: (white text on black bg). So, if we swapped the hex value for black and white variables we will end up having a darkmode.

image #2 - color variables in the root

How to manipulate the variables?

You can easily change the hex color by defining a css class and attaching this class to the <body> to override the :root values.

<style>
body.dark-mode {
                --brand-white: #151515;
                --brand-purple: #5f4190;
                --p-color: #a7a9ac;
                --background: #1a1a1b;
                --brand-black: white;
                --brand-grey: #919197;
            }
</style>

Let's see an example ^^

image #3 - Lightmode vs. Darkmode

Here I am using the colors shown in image #2 for Lightmode and the colors in the css class dark-mode from the code above for Darkmode .. All we have to do is add the ".dark-mode" class to the body when the theme toggle button is clicked. Easy Peasy huh? Let's see how can we do it using JavaScript.


<!-- Switching Between Dark and Light Themes -->
<script>
  // Defining the body element
  const body = document.body;
  // Locating the theme toggle button in the document
  const modeToggle = document.getElementById('mode-toggle');

  // Function to apply the selected theme
  function setTheme(theme) {
    // Toggling the 'dark-mode' class on the body element based on the theme
    body.classList.toggle('dark-mode', theme === 'dark');
    // Storing the selected theme as a cookie to remember the user's preference
    document.cookie = `theme=${theme}; expires=Fri, 31 Dec 9999 23:59:59 GMT; path=/`;
  }

  // Checking the cookie for the theme when the page loads
  window.onload = function () {
    // Extracting the theme preference from the cookie
    const themeCookie = document.cookie.replace(/(?:(?:^|.*;\s*)theme\s*=\s*([^;]*).*$)|^.*$/, '$1');
    // Applying the stored theme preference if it's 'dark'
    if (themeCookie === 'dark') {
      // Simulating a click on the toggle button to activate the dark mode
      modeToggle.click();
    }
  };

  // Toggling the theme when the button is clicked
  modeToggle.addEventListener('click', () => {
    // Checking if the current mode is dark
    const isDarkMode = document.body.classList.contains('dark-mode');
    // Setting the theme to 'light' if dark, and vice versa
    setTheme(isDarkMode ? 'light' : 'dark');
  });
</script>
<!-- END - Switching Between Dark and Light Themes -->

The provided code manages the switching between dark and light themes on a webpage. It uses a toggle button and stores the user's preference as a cookie to maintain the chosen theme across page reloads. The 'setTheme' function applies the selected theme, and the 'window.onload' event ensures that the stored theme preference is respected when the page initially loads. The 'click' event listener on the toggle button triggers the theme switch.

Note: You can also store the user prereference as a variable in the local storage if you don't want to use cookies.

Happy designing ^^

Introduction

In this tutorial, I'll guide you through the process of building an interactive dynamic gallery using Webflow's CMS multi-image field feature. By the end of this tutorial, you'll have a visually appealing gallery where users can navigate through multiple images seamlessly.

Step 1: Setting Up Your Collection

Begin by creating a collection in Webflow with a multi-image field. For example, let's say you have a collection named "Recipes" with a gallery of images for each recipe.

Step 2: Addressing Lightbox Issues

If you try to use the lightbox component directly within a collection list linked to the multi-image field, you might face a problem. Each collection item ends up with a separate lightbox containing only one image. To resolve this, group all the lightboxes by assigning them a common group name. This ensures that all images are displayed together in the lightbox.

Step 3: Designing Your Gallery Layout

To achieve the desired gallery layout, create a separate collection list for the gallery. Limit the items displayed to 3. Style the list as a grid with 2 columns and add an overlay with "(+n)" indicating the number of additional images beyond the third one.

Use the following JavaScript code to modify the layout:

// Make the first image span 2 columns
var firstImg = document.querySelector(".gallery-list > div:nth-child(1)")
firstImg.style.gridArea = 'span 1/span 2/span 1/span 2';

// Hide overlay for items in the gallery, except for the third one if there are more than 3 images
var imgCount = document.querySelector('.lightbox-list').childElementCount
if (imgCount > 3) {
    var imgOverlay = document.querySelector('.gallery-list').children[2].children[0].children[1];
    imgOverlay.style.display = 'flex';
    imgOverlay.children[0].textContent = `+${imgCount - 3}`;
}

Step 3: Designing Your Gallery Layout

To ensure that clicking on images in the gallery opens the lightbox, use the following JavaScript code:

const imageWrappers = document.querySelectorAll('.image-wrapper');

for (let i = 0; i < imageWrappers.length; i++) {
    const imageWrapper = imageWrappers[i];
    const order = i + 1;

    imageWrapper.addEventListener('click', () => {
        console.log(`Image wrapper clicked! Order: ${order}`);
        document.querySelector(`.lightbox-list > div:nth-child(${order}) > a`).click()
    });
}

This code creates an array of gallery images and triggers a click event on the corresponding lightbox item when a gallery image is clicked. This way, users can seamlessly navigate through the images in the lightbox.

Conclusion

By following these steps and implementing the provided code snippets, you can create a dynamic and interactive image gallery in Webflow using CMS multi-image fields. This approach enhances user experience by allowing smooth navigation through multiple images within a cohesive lightbox environment.

Happy designing!

logo in footer
Copyrights 2024 © Abdelhalim Aljamal - All rights reserved.
Close
logo in navbar
Code copied to clipboard!