Change Global Colors on Button Click

I am wanting to make a dark mode style button interaction where a click will change the global colors. How would I do that? The idea is there would be different color themes the user can pick from.


Here is my public share link: LINK
(how to access public share link)

hi @Nick_Rutlinh here is very simple one way how it can be done but feel free to find more sources how to on internet by using keywords CSS, dark mode, toggle, switch, javascript etc.

  <div>
        <button onclick="darkMode()">Darkmode</button>
  </div>
<style>
  .dark-mode {
        background-color: black;
        color: white;
      }
  .light-mode {
        background-color: white;
        color: black;
      }
</style>
<script>
  function darkMode() {
    var element = document.body;
    element.classList.toggle("dark-mode");
  }
</script>

Thanks @Stan , that kinda worked out. But ideally I would like to change the colors based on the color variable i used for the element. So, just completely update the GB2-1 variable to another value without needing to specify if it’s a background-color or color etc.
image

hi @Nick_Rutlinh you have several options how-to

  1. usually in standard dev environment you will create multiple stylesheets you can switch between that’s IMO not possible if it is it will be based on some kind of WF hacking going around WF basic functionality.

  2. I thing you can use WF actions and spend some time to create this functionality with native WF GUI. It can be frustrating and time consuming process as it is not how it should be done.

  3. use custom code to do that

I have done simple example that change only background and font colors but feel free to customise it to your needs.

You can also use local storage to save setting in user browser so their preferred color setting stay when landed on your site again.

1 Like

Thanks so much @Stan . I will see if I can work with that code to implement it into my site.

1 Like

hi @Nick_Rutlinh it should work as it is simple task. If this example will help you to solve your request feel free to close it as solved. :wink: