How to Create Dark Mode

Ready to give your Wix Studio Editor a sleek and stylish makeover? In this step-by-step tutorial, I'll guide you through the process of creating a Dark Mode for your Wix Studio Editor.

Dark Mode not only reduces eye strain but also adds a touch of sophistication to your site experience.

Code: https://www.iloveeditorx.com/videos/how-to-create-dark-mode-%7C-wix-studio?tab=code

// Importing the local module from the 'wix-storage-frontend' package
import { local } from 'wix-storage-frontend';

// Event handler that runs when the page is ready
$w.onReady(function () {
    // Call the function to initialize the site theme
    initSiteTheme();
});

// Function to initialize the site theme based on user preferences
function initSiteTheme() {
    // Retrieve the user's theme preference from local storage
    const siteTheme = getUserPreferences();
    
    // Get a reference to the theme switch element on the page
    const themeSwitch = $w('#darkModeSwitch');

    // Check if the user's theme preference is 'Dark Mode' and update the switch accordingly
    if (siteTheme === 'Dark Mode') {
        themeSwitch.checked = true;
    }

    // Event handler for the change event of the theme switch
    themeSwitch.onChange(() => {
        // Check if the switch is turned on
        if (themeSwitch.checked) {
            // Set the site theme to 'Dark Mode' and save user preferences
            setSiteTheme('Dark Mode');
            saveUserThemePreferences('Dark Mode');
        } else {
            // Set the site theme to 'Light Mode' and save user preferences
            setSiteTheme('Light Mode');
            saveUserThemePreferences();
        }
    });
}

// Function to set the site theme for specified elements
function setSiteTheme(siteTheme) {
    // Array of elements affected by dark mode
    const effectedDarkModeElements = [
        $w('#header'),
        $w('#logo'),
        $w('#heroSection'),
        $w('#secondSection'),
        $w('#repeaterItem'),
        $w('#formSection')
    ];

    // Loop through each element and apply or remove dark mode effects
    effectedDarkModeElements.forEach(element => {
        if (siteTheme === 'Dark Mode') {
            // Apply dark mode effects based on element type
            if (element.type === '$w.VectorImage') {
                element.customClassList.add('dark-mode');
            } else {
                element.effects.applyEffects(['Dark Mode']);
            }
        } else {
            // Remove dark mode effects based on element type
            if (element.type === '$w.VectorImage') {
                element.customClassList.remove('dark-mode');
            } else {
                element.effects.removeEffects(['Dark Mode']);
            }
        }
    });
}

// Function to save the user's theme preferences to local storage
function saveUserThemePreferences(themeMode) {
    if (themeMode) {
        // Save the theme mode to local storage
        local.setItem("theme", themeMode);
    } else {
        // Remove the theme mode from local storage
        local.removeItem("theme");
    }
}

// Function to retrieve the user's theme preferences from local storage
function getUserPreferences() {
    // Get the theme mode from local storage
    const siteTheme = local.getItem("theme");

    // If the theme mode is 'Dark Mode', apply dark mode effects
    if (siteTheme === 'Dark Mode') {
        setSiteTheme(siteTheme);
    }

    // Return the theme mode
    return siteTheme;
}