Coolor

Overview

With Coolor we enhanced the user experience on a Wix site by enabling dark mode in the classic editor and providing full multilingual support. The system remembers user preferences via local storage, ensuring returning visitors see their last-selected mode, while new visitors start in light mode by default. To achieve dark mode, each page was duplicated in both color schemes, and dynamic switching was implemented for shared elements like the header and footer. Additionally, multilingual functionality was improved by transitioning from tag-based translations to reference fields, allowing seamless content management.

Key Design Features

• Dual Page Versions:

  To support both light and dark modes, each page was duplicated in both color schemes.

  
  

• Header & Footer Switching:

  Since headers and footers are shared across all pages, we created two versions—one for light mode and one for dark mode. Code was used to dynamically switch between them based on the selected mode.

  
  

Key Development Features

• Dark Mode with Preference Memory:

  • Each page has a corresponding dark-mode version.

  • User preferences are stored in local storage for seamless future visits.

  • WixLocation API is used to redirect users to the appropriate light or dark page.

    
    

• Multilingual Support via Reference Fields:

  • Originally implemented with tags, later upgraded to reference fields.

  • Enables full translation support and streamlined content management.

    
    

Conclusion

Coolor successfully integrates dark mode with multilingual functionality, ensuring a visually adaptive and accessible experience for all users.