Keep background for all pages after it is set

[JanMolendijk]

Hello Coursesweb I`m buisy to setup an darkmode for my website
But when I wanna use an hyperlink to another page I would like
to set automatic the darkmode without hitting mousebutton
every time on new page for the darkmode.

I use this simple script .column commes just from a class

Code: Select all

 <script> 
function setBg0() { 
  elem = document.querySelector(".column"); 
  elem.style.background = "white"; 
  elem.style.color = "black"; 
} 
</script> 

& This is the button to set the darkmode

Code: Select all

 <a href='#' onclick='setBg0()'><t style='color: #ffffff; font-size: 12px; background-color: #ffffff'>w</t></a>

But how can I use the darkmode from an other page directly setted in an url ????
When I click the darkmode for the same page their aply an #

Like this: read.php?id=919&title=popup-modal-examples#

Hello,
Try with localStorage object; replace your script with this one:

Code: Select all

<script> 
function setBg0(){
  elem = document.querySelector(".column"); 
  elem.style.background = "white"; 
  elem.style.color = "black";
  localStorage.setItem('set_bg0', 'bg0'); 
}

if('set_bg0' in localStorage) setBg0();
</script>

Thanks for the support I tried things with locale storage
but it does not save correctly

Code: Select all

 <script> 
        function setBg2() { 
            elem = document.querySelector(".column"); 
            elem1 = document.querySelector(".column1"); 

            elem.style.background = "black"; 
 elem1.style.background = "black"; 

   elem.style.color = "green"; 
  elem1.style.color = "green"; 


 localStorage.setItem("set_bg2", "bg2"); 
} 

if("set_bg2" in localStorage) setBg2();
 
    </script> 
    
 <script> 

// https://www.w3schools.com/jsref/prop_style_fontsize.asp
// element options address

        function setBg0() { 
            elem = document.querySelector(".column"); 
            elem1 = document.querySelector(".column1"); 
      
            elem.style.background = "white"; 
 elem1.style.background = "white"; 


  elem.style.color = "black"; 
  elem1.style.color = "black"; 

 localStorage.setItem('set_bg0', 'bg0'); 
} 

if('set_bg0' in localStorage) setBg0();

    </script> 

I tried for local storage also those 2 scripts under

Code: Select all

<script>

 ((nm, tm) => {
      const lStorage = localStorage;
      const sStorage = sessionStorage;
      const tabId = sStorage.getItem(tm)
        || ((newId) => {
          sStorage.setItem(tm, newId);
          return newId;
        })((Math.random() * 1e8).toFixed());
      const update = (setTabValue) => {
        let currentValue = JSON.parse(lStorage.getItem(nm) || '{}');
        const arrValue: number[] = Object.values(currentValue);
        if (setTabValue
          && typeof currentValue[tabId] === 'undefined'
          && !arrValue.reduce((sum, current) => { return sum + current; }, 0)) {
          lStorage.clear();
          currentValue = {};
        }
        currentValue[tabId] = setTabValue;
        lStorage.setItem(nm, JSON.stringify(currentValue));
      };
      update(1);
      window.onbeforeunload = () => { update(0); };
    })('tabs', 'tabid');

</script>

Code: Select all

<script>

$(window).unload(function(){
  localStorage.clear();
});

</script>

Sorry, I can't help more regarding that issue.

Thanks for the support, after long searching I found a tool for every font-color + background-color
it even store all things with cookies so I left the local-storage

I'm glad you succeeded.
What tool have you found?

Dear admin I wanted to post the tool allready here

Hard to find the address but I have it now

Colourpicker bron: https://www.w3.org/WAI/WCAG20/Technique ... /index.php

I thought about this meight you can make a rubric
for scripts + tips from others meight it is usefull

Sometimes I surf for something specifiek & thinking about coursesweb
well this & that could also be handy for your website etcetra....