Changing the Color Themes of Site Live

Hello,

I am making a portfolio website on Wix studio, and the site is a dark theme with a bold color accent. I would like for the visitor of the site to be able to change this color. I currently have all of my elements using this same theme color so I am wondering how I could go about to either:

changing the color of my sites main color theme via a toggle or slider, or
switching between a set of 4-5 preset color themes from the sites style sections.

I put a temporary slider on the bottom left to show an example of what I want it to kind of look like.

It is also worth noting that I have a lot of buttons on the site with alt color schemes, (just the inverse of the main theme with white) and I would like these to remain functional when hovering and clicking.

I will include some images below showcasing my desired effect. I don’t know much about coding but am willing to learn how to implement it if required.

any help on this would be greatly appreciated thanks!

Hi, @Mason_Klesch !!

Hello, I believe it’s possible to create a system for changing the color theme. :smiling_face_with_halo: If you’re editing in Wix Studio, you can define your styles in global.css and use Velo code to toggle classes for different elements. For example, you can add a class using the following code:

$w("#someElement").customClassList.add("someClass");

I’ll also introduce some other implementation methods. This is a post I came across earlier that explains how to add a dark mode! :smiling_face_with_sunglasses: