Cookie for Light/Dark Mode not working

Ask the community
, ,
1

I’m trying to add light/dark toggle for my site dashboard in wix studio.
But there is something not working while I’m trying to save UserPreferences after page reload.

// 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('#box41'),
        $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;
}

toggle is working to switch light/dark mode but it’s not keeping UserPreferences after site reload.

2

There’s currently no way to assign classes to elements in Velo so this wouldn’t work. There may be other issues with the code as well.

3

that’s work when we store the onclick animation named “Dark Mode” in interaction panel. The issue is that it’s not saving that dark mode after reloading the page.