Ruby on Rails. Save my Dark Mode preference when I reload the page

I´m very new in JavaScript. So I have a Ruby on Rails app, which in I wanted to add a Dark Mode option. So with a pair of JS functions activated by a button, I modify every background-color and color CSS properties from every element in my page to go from dark to light mode. What I would like is that somehow C save the user preference. So when I reload the page, my last mode is saved and applied to the page.

function darkMode() {

  document.getElementById("sidebar").style.backgroundColor = 'rgb(12, 12, 12)';

   var cols = document.getElementsByClassName('but-cross');
  for(i = 0; i < cols.length; i++) {
    cols[i].style.backgroundColor = 'black';
  }
  document.getElementById("panel").style.backgroundColor = '#212121';

  var cols = document.getElementsByClassName('navbar');
  for(i = 0; i < cols.length; i++) {
    cols[i].style.backgroundColor = 'black';
  }
  var cols = document.getElementsByClassName('secondary-head-1');
  for(i = 0; i < cols.length; i++) {
    cols[i].style.backgroundColor = '#141414';
    cols[i].style.color = 'blanchedalmond';
  }
  var cols = document.getElementsByClassName('main-body-1');
  for(i = 0; i < cols.length; i++) {
    cols[i].style.backgroundColor = '#141414';
    cols[i].style.color = 'blanchedalmond';
  }
  var cols = document.getElementsByClassName('image-container');
  for(i = 0; i < cols.length; i++) {
    cols[i].style.backgroundColor = 'black';
    cols[i].style.border = '2px solid #171717';
  }
  document.getElementById("div1").style.backgroundColor = '#141414';

  var cols = document.getElementsByClassName('col-1');
  for(i = 0; i < cols.length; i++) {
    cols[i].style.backgroundColor = '#141414';
  }
  var cols = document.getElementsByClassName('col-2');
  for(i = 0; i < cols.length; i++) {
    cols[i].style.backgroundColor = '#141414';
  }
  var cols = document.getElementsByClassName('col-3');
  for(i = 0; i < cols.length; i++) {
    cols[i].style.backgroundColor = '#141414';
  }
  var cols = document.getElementsByClassName('col-4');
  for(i = 0; i < cols.length; i++) {
    cols[i].style.backgroundColor = '#141414';
  }
  var cols = document.getElementsByClassName('secondary-head-2');
  for(i = 0; i < cols.length; i++) {
    cols[i].style.backgroundColor = '#212121';
    cols[i].style.color = 'blanchedalmond';
  }
  var cols = document.getElementsByClassName('main-body-2');
  for(i = 0; i < cols.length; i++) {
    cols[i].style.backgroundColor = '#212121';
    cols[i].style.color = 'blanchedalmond';
  }

  document.getElementById("section2").style.backgroundColor = '#212121';

  var cols = document.getElementsByClassName('col-5');
  for(i = 0; i < cols.length; i++) {
    cols[i].style.backgroundColor = '#212121';
  }
  var cols = document.getElementsByClassName('col-6');
  for(i = 0; i < cols.length; i++) {
    cols[i].style.backgroundColor = '#212121';
  }
  var cols = document.getElementsByClassName('col-7');
  for(i = 0; i < cols.length; i++) {
    cols[i].style.backgroundColor = '#212121';
  }

  document.getElementById("div3").style.backgroundColor = '#212121';

  var cols = document.getElementsByClassName('tail-head');
  for(i = 0; i < cols.length; i++) {
    cols[i].style.backgroundColor = '#212121';
    cols[i].style.color = 'white';
  }

  var cols = document.getElementsByClassName('tail-tail');
  for(i = 0; i < cols.length; i++) {
    cols[i].style.backgroundColor = 'black';
    cols[i].style.color = 'white';
  }
  
  var x = document.getElementById("mode");
  if (x.innerHTML === "Modo oscuro") {
    x.innerHTML = "Modo claro";
  } else {
    x.innerHTML = "Modo oscuro";
  }

  document.getElementById( "mode" ).setAttribute( "onclick", "javascript: lightMode();" );
}

function lightMode() {

  document.getElementById("sidebar").style.backgroundColor = 'rgb(39, 23, 0)';

   var cols = document.getElementsByClassName('but-cross');
  for(i = 0; i < cols.length; i++) {
    cols[i].style.backgroundColor = '#111';
  }
  document.getElementById("panel").style.backgroundColor = '#blanchedalmond';

  var cols = document.getElementsByClassName('navbar');
  for(i = 0; i < cols.length; i++) {
    cols[i].style.backgroundColor = 'rgb(70, 42, 0)';
  }
  var cols = document.getElementsByClassName('secondary-head-1');
  for(i = 0; i < cols.length; i++) {
    cols[i].style.backgroundColor = 'rgb(224, 207, 181)';
    cols[i].style.color = 'rgb(34, 20, 0)';
  }
  var cols = document.getElementsByClassName('main-body-1');
  for(i = 0; i < cols.length; i++) {
    cols[i].style.backgroundColor = 'rgb(224, 207, 181)';
    cols[i].style.color = 'rgb(34, 20, 0)';
  }
  var cols = document.getElementsByClassName('image-container');
  for(i = 0; i < cols.length; i++) {
    cols[i].style.backgroundColor = 'rgb(20, 12, 0)';
    cols[i].style.border = '0px solid #171717';
  }
  document.getElementById("div1").style.backgroundColor = 'rgb(224, 207, 181)';

  var cols = document.getElementsByClassName('col-1');
  for(i = 0; i < cols.length; i++) {
    cols[i].style.backgroundColor = 'rgb(224, 207, 181)';
  }
  var cols = document.getElementsByClassName('col-2');
  for(i = 0; i < cols.length; i++) {
    cols[i].style.backgroundColor = 'rgb(224, 207, 181)';
  }
  var cols = document.getElementsByClassName('col-3');
  for(i = 0; i < cols.length; i++) {
    cols[i].style.backgroundColor = 'rgb(224, 207, 181)';
  }
  var cols = document.getElementsByClassName('col-4');
  for(i = 0; i < cols.length; i++) {
    cols[i].style.backgroundColor = 'rgb(224, 207, 181)';
  }
  var cols = document.getElementsByClassName('secondary-head-2');
  for(i = 0; i < cols.length; i++) {
    cols[i].style.backgroundColor = 'blanchedalmond';
    cols[i].style.color = 'rgb(34, 20, 0)';
  }
  var cols = document.getElementsByClassName('main-body-2');
  for(i = 0; i < cols.length; i++) {
    cols[i].style.backgroundColor = 'blanchedalmond';
    cols[i].style.color = 'rgb(34, 20, 0)';
  }

  document.getElementById("section2").style.backgroundColor = 'blanchedalmond';

  var cols = document.getElementsByClassName('col-5');
  for(i = 0; i < cols.length; i++) {
    cols[i].style.backgroundColor = 'blanchedalmond';
  }
  var cols = document.getElementsByClassName('col-6');
  for(i = 0; i < cols.length; i++) {
    cols[i].style.backgroundColor = 'blanchedalmond';
  }
  var cols = document.getElementsByClassName('col-7');
  for(i = 0; i < cols.length; i++) {
    cols[i].style.backgroundColor = 'blanchedalmond';
  }

  document.getElementById("div3").style.backgroundColor = 'blanchedalmond';

  var cols = document.getElementsByClassName('tail-head');
  for(i = 0; i < cols.length; i++) {
    cols[i].style.backgroundColor = 'blanchedalmond';
    cols[i].style.color = 'rgb(20, 12, 0)';
  }

  var cols = document.getElementsByClassName('tail-tail');
  for(i = 0; i < cols.length; i++) {
    cols[i].style.backgroundColor = 'rgb(20, 12, 0)';
    cols[i].style.color = 'blanchedalmond';
  }
  var x = document.getElementById("mode");
  if (x.innerHTML === "Modo claro") {
    x.innerHTML = "Modo oscuro";
  } else {
    x.innerHTML = "Modo claro";
  }
    document.getElementById( "mode" ).setAttribute( "onclick", "javascript: darkMode();" );
}

I know that for sure there is a more organized a nicer way to achieve what I´ve done, but im very new with JS.